[SCSS] SASS(SCSS)란?

jsp로 개발할 땐 css만을 써오다가 vue를 사용하면서 scss를 사용해보게 되었고,
압도적으로! 편리함을 많이 느꼈기 때문에 한번쯤 정리해보고 싶어 정리해본다.

---

📌 Sass (Synthetically Awesome StyleSheets)

sass는 CSS전처리기로써 이를 직접 동작시킬 수 없고, css로 컴파일을 거친 뒤 실행할 수 있다.

📌 Sass vs SCSS ?

Sass가 먼저 생겼고 Sass 3 버전부터 새롭게 등장한것이SCSS로, Sass와 SCSS는 서로 완벽하게 호환이 된다.

Sass와 SCSS의 차이점은 {}(중괄호)와 ;(세미콜론)의 유무에 따라 사용방식이 다르다.
또한, 재사용 기능은 만드는 방식인 믹스인(Mixin)에서 차이가 난다.

.Sass

.wrap
	padding: 10px
    .items
    	font-weight:bold
        padding: 5px 0
        .detail
        	margin: 10px
            &:hover
            	cursor: pointer
                color: yellow
            }
        }
    }
}

.SCSS

.wrap{
	padding: 10px;
    .items{
    	font-weight:bold;
        padding: 5px 0;
        .detail{
        	margin: 10px;
            &:hover{
            	cursor: pointer;
                color: yellow;
            }
        }
    }
}

📌 SCSS 문법

1. 변수

• 변수 선언 : $변수명 : 속성값;
• 변수 사용 : $변수명;
  변수는 선언한 블록 내에서만 사용 가능.

$m-color: #efefef;
$m-width: 100px;

.main-item{
	color: $m-color;
    width: $m-width;
}

2. 중첩 (Nesting)

상위 선택자의 반복을 줄여서 사용할 수 있다.

/* CSS */
.wrap{
	padding: 10px;
}
.wrap .items{
	font-weight:bold;
	padding: 5px 0;
}
.detail{
	margin: 10px;
}

/* SCSS */
.wrap{
	padding: 10px;
    .items{
    	font-weight:bold;
        padding: 5px 0;
        .detail{
        	margin: 10px;
        }
    }
}

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

상위 선택자를 중첩하여 사용할 때에 '&'키워드를 사용하여 상위 선택자를 사용할 수 있다.

.detail{
	margin: 10px;
	&:hover{
		cursor: pointer;
		color: yellow;
	}
}

4. 연산자

레이아웃을 디테일하게 디자인할 때 쓸 수 있다.

.item {
	width: calc(10em / 2);
    height: 100px;
    border: 1px solid red;
}

• +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지) 가 있음.
• calc는 calculation의 줄임말 즉, 계산이라는 뜻.
  +, -, *는 calc를 사용하지 않아도 계산이 된다.
  / 기호가 css에서 다른 용도로도 쓰이기 때문에 나누기는 calc를 꼭 써야함.
  
  

5. 조건

조건의 참, 거짓에 따라 하나의 값을 반환한다.
Javascript의 삼항 연산자와 구조가 비슷하다.

 /* SCSS */
 
$width: 300px;

.main{
  width: if($width > 100px, $width, 100px);
}


/* Compile to CSS */

.main{
  width: 300px;
}

6. Mixin (재활용)

Mixin은 재사용할 CSS 스타일을 정의할 수 있는 유용한 기능.
@mixin을 통해 스타일을 선언하고 @include를 통해 사용한다.

 @mixin item-btn{
 	padding: 5px 10px;
    font-weight: bold;
    border:1px solid green;
    border-radius: 10px;
}

.main-btn{
	@include item-btn;
}