utility class (유틸리티 클래스)

[ utility class 란? ]

각각의 클래스들을 정적으로 하나 하나씩 작성하는 것이 아니라, 하나의 코드로 여러 클래스들을 동적으로 생성하는 방식을 유틸리티 클래스라고 할 수 있습니다. CSS 프레임워크인 TailwindCSS 가 이러한 유틸리티 클래스 방식을 사용하고 있는 대표적인 사례라고 할 수 있습니다.

 

[ 예시 ]

1. 다음과 같이 scss 파일을 작성합니다.

-- index.scss

$alignments: (
  "center", 
  "space-between", 
  "space-around", 
  "space-evenly", 
  "flex-start", 
  "flex-end"
);

@each $align in $alignments {
  .justify-#{$align} {
    justify-content: #{$align};
  }

  .items-#{$align} {
    align-items: #{$align};
  }

  .justify-items-#{$align} {
    justify-items: #{$align};
  }

  .content-#{$align} {
    align-content: #{$align};
  }
}

2. sass 를 전역으로 설치합니다. (이미 설치 되어 있다면 생략)

npm i -g sass

3. 아래 명령어를 통해 위에서 작성한 index.scss 를 index.css 로 트랜스파일합니다.

sass ./index.scss ./index.css

4. index.css 를 확인하면 아래와 같이 출력된 것을 확인 할 수 있습니다.

-- index.css

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.justify-items-center {
  justify-items: center;
}

.content-center {
  align-content: center;
}

.justify-space-between {
  justify-content: space-between;
}

.items-space-between {
  align-items: space-between;
}

.justify-items-space-between {
  justify-items: space-between;
}

.content-space-between {
  align-content: space-between;
}

.justify-space-around {
  justify-content: space-around;
}

.items-space-around {
  align-items: space-around;
}

.justify-items-space-around {
  justify-items: space-around;
}

.content-space-around {
  align-content: space-around;
}

.justify-space-evenly {
  justify-content: space-evenly;
}

.items-space-evenly {
  align-items: space-evenly;
}

.justify-items-space-evenly {
  justify-items: space-evenly;
}

.content-space-evenly {
  align-content: space-evenly;
}

.justify-flex-start {
  justify-content: flex-start;
}

.items-flex-start {
  align-items: flex-start;
}

.justify-items-flex-start {
  justify-items: flex-start;
}

.content-flex-start {
  align-content: flex-start;
}

.justify-flex-end {
  justify-content: flex-end;
}

.items-flex-end {
  align-items: flex-end;
}

.justify-items-flex-end {
  justify-items: flex-end;
}

.content-flex-end {
  align-content: flex-end;
}

 

[ 참고자료 ]

https://dev.to/ahmedsarhan/how-to-build-your-own-utility-framework-using-scss-25dh

How to build your own Utility classes using plain Scss alone

 

[ 대표 이미지 출처 ]

https://en.m.wikipedia.org/wiki/File:Sass_Logo_Color.svg

File:Sass Logo Color.svg - Wikipedia