방명록
- utility class (유틸리티 클래스)2024년 01월 25일 22시 06분 25초에 업로드 된 글입니다.작성자: 루루개발자
[ 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
[ 대표 이미지 출처 ]
https://en.m.wikipedia.org/wiki/File:Sass_Logo_Color.svg
'CSS' 카테고리의 다른 글
CSS 가 적용되는 우선순위 (0) 2024.01.24 CSS 에서 사용하는 길이 단위 (0) 2022.10.02 ul, ol 태그에서 커스텀 마커 사용하는 방법 (1) 2022.07.05 bell shake 애니메이션 예제 (0) 2022.05.12 infinity rotate 애니메이션 예제 (0) 2022.05.11 다음글이 없습니다.이전글이 없습니다.댓글