🧑‍💻 SCSS 문법 정리

SCSS 문법에 대해 정리해보고자 한다.

1. 변수 선언

SCSS는 다양한 데이터 타입을 갖고 있어 변수로 사용이 가능

데이터 타입
Colors (색상)	red, blue, green ...
Numbers (숫자)	1, 100px, 2em...
Strings (문자)
Lists (공백이나 ,로 구분된 값의 목록)	red blue,(red,blue),...
Maps (Lists와 유사하나 Key : Value 형태)	(red : a),(blue : b),...
Booleans (논리)	true, false
Nulls (아무 값도 없음)	null

$color:red;
$number:100px;
$string:springboot;
$list:red,blue,green,...;
$map:(red:r, blue:b,...);
$boolean:true;

반복적으로 사용되는 값에는 변수를 선언하여 간편하게 사용 가능

*주의사항
변수 이름 앞에는 꼭 $를 붙여야 한다.

scss

$primary : blue;
$w : 100px;

.btn{
	background : $primary;
    width : $w;
}

css

.btn{
	background : blue;
    width : 100px;
}

이런식으로 특정 값의 변수를 선언해서 사용할 수 있다.

다만, 변수는 선언된 블록 내에서만 사용 가능.

.btn1{
	$color : red;
    background : $color;
} /* Okay */

.btn2{
	background : $color;
} /* Error */

➣#{} : 코드의 어디든지 변수값 사용 가능

/* scss */
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

/* css */
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

---

2. 중첩문 사용

css에서는

.div {
...
}

.div .list{
...
}

.div .list li{
...
}

처럼 일일히 나눠서 직접 작성해야 했지만

scss에서는

.div{
 ...
	.list{
     ...
    	li{
        ...
        }
    }
}

으로 {안에만 잘 작성해주면 css로 컴파일 하는 과정에서
자동으로

.div {
...
}

.div .list{
...
}

.div .list li{
...
}

이렇게 변경해준다.

---

3. 상위 선택자 참조 (&)

scss

.btn{
	&.active{
     ...
    }
}

.btn{
 ...
	&:hover{
   	 ...
    }
}

css

.btn.active{
 ...
}

.btn{
 ...
}
.btn:hover{
 ...
}

---

4. Mixin (재활용)

작성한 css를 재사용할 수 있는 기능 지정한 스타일을 반환

@mixin 으로 선언하고 @include 로 사용

/* mixin 선언 */
@mixin mine{
	color : red;
    
	&:hover{
    	color : blue;
    }
}

/* include로 사용 */
.btn1{
	@include mine;
}

.btn2{
	@include mine;
}

---

5. 함수 사용

@return을 통해 계산된 특정 반환 값을 사용함
scss

$w : 100px;

@function myfunc($number){
	@return $number*3;
}

.div{
	width : $w + myfunc(10);
}

css

.div{
	width : 130px;
}

---

6. 조건문 (if)

특정 조건에서 참 거짓에 따라 값을 반환하는 기능

1. if(조건, 참, 거짓)

/* scss */
$w : 100px;

.btn{
	width : if($w > 100px, $w, null);
}

/* css */
.btn{
	width : 100px;
}

2. @if, @else if, @else

조건에 따른 분기 처리가 가능

@mixin mine($text){
	@if $text == 'no'{
    	color : red;
    }@else if $text == 'yes'{
    	color : green;
    }@else{
    	color : blue;
    }
}

.text1{
	@include mine('no');
}

.text2{
	@include mine('yes');
}

---

7. 반복문

Style을 반복적으로 출력하는 기능

through 와 to 에 따라 종료 조건이 다름

from a through b	a 부터 b 까지(b 포함) 반복
from a to b	a 부터 b 전까지(b 불포함) 반복

/* scss */

@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width: 20px * $i;
  }
}

@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width: 20px * $i;
  }
}


/* css */

.through:nth-child(1) {
  width: 20px;
}

.through:nth-child(2) {
  width: 40px;
}

.through:nth-child(3) {
  width: 60px;
}

.to:nth-child(1) {
  width: 20px;
}

.to:nth-child(2) {
  width: 40px;
}

@each : List나 Map의 반복에서 유용

/* scss */
@each $color in red, blue, green {
	.#{$color}-text{
    	color : #{$color};
    }
}

@each $fruit, $color in (apple:red, banana:yellow) {
	.#{$fruit}{
    	color : #{$color};
    }
}


/* css */
.red-text{
	color : red;
}
.blue-text{
	color : blue;
}
.green-text{
	color : green;
}

.apple{
	color : red;
}
.banana{
	color : yellow;
}