[CSS] SCSS

October 7, 2022

SCSS는 CSS Preprocessor(전처리기)라 불리며 CSS의 기능을 확장한 언어이다.

CSS 문법과 유사하며 선택자의 중첩, 조건문, 반복문, 단위연산 등 표준 CSS보다 많은 기능을 제공한다.

공식사이트 : https://sass-lang.com/

SCSS는 CSS 전처리기( preprocessor )인 SASS의 Version 3에서 생겨난 언어로 문법이 CSS와 유사하여 사용이 용이하고 CSS와의 호환성도 좋다. 때문에 사용자 수도 SCSS 쪽이 더 많고, 다수의 프레임워크, 라이브러리들도 SCSS의 문법을 활용하고 있다.

우리가 리액트에서 사용하는 Styled-component는 또한 SCSS 라이브러리 없이 SCSS 문법을 사용할 수 있다.

사용하기

변수 ( Variables )

우리가 알고 있는 Number, String, Boolean, Null과 List, Map, Color 의 자료형을 지원한다.
- Color : 색상변수 red, #FFFFFF, rgba(255, 255, 255, 1)
- List : 공백이나 쉼표로 구분되는 배열 (a, b, c), d
- Map : key:value 형태의 배열 (a:apple, b:banana, c:coconut)
```
$pointColor: #390093;				// $변수명: 값 → 변수선언
   
div{
    background-color: $pointColor;	// 변수사용
}
```
※ 지역변수 / 전역변수 개념을 지원한다. 즉, 스코프 {} 내에서 선언된 변수는 스코프 밖에서는 사용할 수 없다.

※ 템플릿 리터럴과 비슷한 개념의 ${}를 지원한다.
```
$fileName: unquote("bg.png");
  
div {
    background-image: url(http://abc.com/imgs/#{$fileName}); // ▶ #{$fileName} 부분이 bg.png로 치환된다.
}
```

재활용 ( Mixins )

CSS스타일을 @mixin으로 정의하고 @include로 변수와 같이 재사용이 가능하다. ( 특정 스타일 자체를 변수처럼 사용하는 기능 인 것 같다 )

// 선언
@mixin blackBox{
    background-color: #000000;
    font-size: 1rem;
    color: yellow;
      
    &:hover{
        background-color: #888888;    
    }
}
  
// 사용
div {
    @include blackBox;
}

함수 ( Function )

함수를 정의하여 사용할 수 있다.

$n_scale: 0.8
@function f_scale($n_width, $n_scale){
    @return $n_width * $n_scale
}
  
div{
	width: f_scale(150)
}

연산자 ( Operation )

+, -, *, /, % 연산자를 지원한다.
중첩 ( Nesting )
- 셀렉터를 중첩하여 사용할 수 있다.
```
div {
    width:100px;
            
    .like{	
        border: 1px solid #ffffff;
        li{
        	font-size: 1rem;
    	}
    }
        
    &:hover{	
        background-color: #000000;
    }
}
```
  위 예제와 같이 CSS에서 div .like {}, div .like li {}, div:hover {} 로 분리작성해야하는 부분을 중첩하여 사용이 가능하게 하여 보다 직관적인 표현이 가능해진다.
  
  &키워드는 부모 선택자로 치환된다. 컴파일 시 치환되는 원리이므로 아래와 같이 사용도 가능하다.
```
.textBox{
    &-small{
        font-size: 0.7rem;
    }
    &-big{
        font-size: 1.2rem
    }
}
```
  위 코드는 각각 textBox-small, textBox-big으로 사용된다.
- 속성의 상위 요소를 참조할 수 있다.
```
div {
    font: {
        size: 1rem;
        weight: bold;
        family: Verdana;
    }
}
```
  각각 font-size, font-weight, font-family로 작성되어야하는 코드의 상위요소인 font를 생략시킨다.

조건 ( Condition )

if(조건문, 참일 경우 반환값, 거짓일 경우 반환값)

@if 조건문 {
    참일 경우 반환값
} @else if 조건문 {
    참일 경우 반환값
} @else {
    나머지 반환값
}

반복 ( Loop )

@for $i from 1 through 10 {
    // 1부터 10까지(10포함)반복
}
@for $i from 1 to 10{
    // 1부터 10까지(10제외)반복
}

반복 ( Each )

List와 Map 데이터를 반복할 때 사용한다.

@each $반복문에서 사용할 변수명 in 배열{
    // 반복할 내용
}
  
@each $반복문에서 키를 받아올 변수명, $값을 받아올 변수명 in 배열 {
    // 반복할 내용
}

내장함수 ( Built-In-Modules )

공식문서 내 Documentation 참조

출처

https://heropy.blog/2018/01/31/sass/

https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

####

Rose

사용하기

출처