1. $변수선언
CSS 는 변수를 사용할 수 없습니다. 때문에 반복적으로 사용되는 코드를 계속해서 입력해야하고, 그 코드가 바뀌면 모든 코드를 수정해야하는 어려움이 있습니다. 하지만 Sass(SCSS)는 그 코드를 변수로 지정해 필요한곳에 사용할 수 있습니다. 이는 나중에 코드를 수정해야할 상황에서 변수의 값만 변경하면 되므로 작업이 간단해 집니다.
예를 들어
$red: #fe3900$red 라는 변수를 선언하고 사용시
/*scss*/
GNB{background-color: $red;}
CTA{background-color:$red;}
modal{background-color:$red;}GNB, CTA, modal 세개의 요소 모두 background-color 값을 $red라는 변수를 통해 선언을 했고 나중에 $red의 컬러를 약간 조정하게 되더라도 선언된 값 #fe3900을 수정하면 한꺼번에 수정하게 됩니다.
2. @Mixin 과 @include
@Mixin 은 SCSS 의 문법중 가장많이 사용되는 요소입니다.
@Mixin은 그룹단위의 css 스타일 코드를 변수처럼 사용할 수 있습니다.
사용 방법은 한꺼번에 자주 사용되는 코드들을 @mixin으로 묶은뒤 @include를 통해 사용하면되는 아주 간단한 구조 입니다.
예를 들어
/*scss*/
@mixin text-style-12() {
font-size: 12px;
line-height: 16px;
letter-spacing: -0.005em;
}
@mixin text-style-13() {
font-size: 13px;
line-height: 20px;
letter-spacing: -0.01em;
}
GNB{
@include text-style-12;
}text-style을 지정할때 같이 선언되는 font-size, line-height, letter-spacing을 @mixin 으로 묶었습니다.
GNB 요소가 @include를 통해 2개의 @mixin중 text-style-12를 선언해 그 안에 묶여있는 font-size, line-height, letter-spacing을 적용받게 됬습니다.
3. @content
@content 는 @Mixin 에 정의 되어있지 않은 스타일을 추가적으로 더 넣을수 있게 합니다.
이는 @media 에서 굉장히 유용하게 작용합니다.
아래의 예를 살펴봅니다.
/*scss*/
@mixin responsiveDesktop {
@media screen and (min-width: 1200px) {
@content;
}
}
GNB{
color: $red;
@include responsiveDesktop{ color:$blue;}
}
@mixin responsiveDesktop은 1200px 이상일때는 @content로 스타일 선언을 추가로 할수있게 만들었습니다.
결과적으로 GNB는 1200px 미만일때 색상은 $red, 1200px 이상일때는 $blue가 됩니다.
4. %(플레이스 홀더)
%(플레이스 홀더)는 mixin과 비슷하지만 인자를 받아쓸수 없고 공통적으로 사용하는 범위가 한정되어있을때 자주사용합니다. 사용할때는 @extend 문을 선언하여 사용합니다.
mixin 과의 또 다른 차이점은 mixin은 여러곳의 선택자에서 사용되더라도 그대로 컴파일 되어 나오고, %(플레이스 홀더)
는 여러곳의 선택자에서 사용되면 컴파일 이후 그 선택자들을 모두 묶어 스타일 되어 나옵니다.
아래 예시를 보겠습니다.
/*scss*/
%tag-base{
height:10px;
width:10px;
}
@mixin text-style-12() {
font-size: 12px;
line-height: 16px;
letter-spacing: -0.005em;
}
.tag-red{
@include text-style-12;
@extend %tag-base;
color: $red;
}
.tag-green{
@include text-style-12;
@extend %tag-base;
color: $green;
}위와 같은 방법으로 플레이스홀더, mixin을 선언한뒤 둘다 .tag-red, .tag-green에 사용을 하고 컴파일을하면 어떻게 css 스타일이 적용이 될까요?
/*css*/
.tag-red{
font-size: 12px;
line-height: 16px;
letter-spacing: -0.005em;
color: $red;
}
.tag-green{
font-size: 12px;
line-height: 16px;
letter-spacing: -0.005em;
color: $green;
}
.tag-red,
.tag-green{
height:10px;
width:10px;
}
5. @import
마지막으로 import 입니다. import는 css에도 있는 구문으로서 파일들을 별도로 분리시킨후 다른 파일 에서 가져올때 사용되는 구문입니다. css 와 scss의 import구문의 가장 큰 차이점은
CSS: @import 구문 호출할 때마다 HTTP요청을 추가로해 성능 저하를 야기함.
SCSS: CSS자체에 파일이 포함되어 성능저하 야기 X.
이런 현상의 이유는 결과적으로 분리된 SCSS 파일 전체를 import 시킨후 하나의 덩어리진 css 로 컴파일 하기 때문입니다.
scss를 사용하면 성능저하 이슈를 해결함과 동시에 유지보수에 용이하게 파일들을 관리할수 있게 됩니다.
아래 예시 사진을 보면 더 쉽게 이해가 가능합니다.
위 사진은 3000천줄 이상의 css 코드 덩어리 입니다.
웹 페이지를 만들때 스타일 코드는 이처럼 몇천줄 이상이 되기 쉽상인데 이는 유지보수에 큰 어려움을 주고 이를 해결하기 위해 CSS로 @import를 하면 성능저하 이슈가 생기는 상황입니다.
위 사진은 scss를 사용해 스타일 코드를 module, component, constants, layout등 세부적으로 카테고리화 한뒤 그안에서 각 카테고리에 맞는 스타일 코드를 선언하고 마지막으로 main.scss 파일에 @import 했습니다.
이처럼 scss를 사용하면 몇천줄 되는 스타일코드를 카테고리화 시켜 세부적으로 관리가능하고 기존의 css에서 발생했던 성능이슈도 해결할수 있습니다.
참고:
김버그의 UI 개발 부트캠프)
'HTML & CSS > Sass(SCSS)' 카테고리의 다른 글
| Sass(SCSS) 시작하기!! (0) | 2021.10.20 |
|---|