[SCSS] 사용방법

Scss - css preprocessor / css 전처리기

css의 작성법보다 편하지만 Scss는 웹브라우저가 인식하지 못한다. 작성 후 css로 컴파일하고 실행

scss 중첩 구문
div {
ul{
width:600px;

li {
padding: 0 20px;
}
}

}
2. scss 상위 선택자 참조 &
ul {
li{
width:120px;
&:last-child {
margin-right:50px;
}

}
}
3. scss 변수(Variables) - 반복적으로 사용되는 값을 변수로 지정
변수 이름 앞에 항상 $ 를 붙입니다.
$변수이름: 속성값;
@at-root / 바로 위 클래스를 벗어남

* 변수 유효범위 (Scope)
변수는 사용가능한 유효범위가 있습니다.
선언된 블록 {{}} 내에서만 유효범위를 가진다.

*전역설정 !global
!global플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있다.
변수값 입력후 !global; 입력

4. 재활용(Mixins)
스타일시트 전체에서 재사용할 css선언 그룹을 정의해줌
1) 선언하기(@mixin) / 여러번 사용할 스타일을 선언
@mixin 믹스인이름 { 
스타일 작성 
}
@mixin 믹스인이름($매개변수){
스타일
}

@mixin large-text{
font-size:22px;
font-weight:bold;
font-family:sans-serif;
color:tomato;
&::after{
content:"여러분";
}
}
div {
@include large-text
}
2) 사용(포함)하기(@include)
@include 믹스인이름;
@include 믹스인이름(인수);