재활용

@mixin name($size : 기본값) {스타일 정의}

@include name(30px) // 30px 적용
@include name // 기본값 적용

삼항 연산자

if(condition, true, false)// condition의 따라 true와 false로 스타일 정의

가변인수, 전개 연산자

@mixin bg($b...){
background : $b;
}

.box {
@include bg(url1,url2,url3,url4,url5)
}

.$mixin spread($t,$r,$b,$l){
margin : {
top : $t;
right : $r;
bottom : $b;
left : $l;
	}
}

.box{
$m : 10px 20px 30px 40px;
@include spread($m...)
}

키워드 인수

@mixin pos($t : null,$p : null){스타일}

@include pos ($p : 10px)

@content;

@minxin icon (){
@content(인자);
}
.box{
@include icon() using($c){
스타일 내용 => @content 부분에 적용
속성 : $c; // @content에서 받은 인자 사용 
}
}

맵 활용

@use "sass:map";

@mixin media($name){
    $breakPoints : (
        mobile : 576px,
        tablet : 992px,
        desktop : 1400px,
);
    @media all and (max-width : map.get($breakPoints, $name)){
        @content;
    }
}

.box {
    width : 400px;
    height : 400px;
    @include media(mobile){
        모바일 반응형 스타일 내용 
    }
}

@extend

.container {
@extend .btn
}// 중첩사용 자제(선택자 폭발)

$선택자 (placeholder) @extend에서만 사용가능 

@media 외부에서 선언된 선택자는 사용 불가 

함수

@function grid(){
@return 스타일
}

속성 : grid();

조건문

@if(조건){스타일}
@else if{스타일}
@else if{스타일}
@else{스타일}

반복문

@ use "sass:list";

$sizes : 20px, 40px, 80px;
$fruits : (apple: 'A', banana: 'B');

// 리스트 반복
@each $size in $sizes {
   $index: list.index($sizes,$size);
}
// 맵 반복
@each $key, $value in $fruits {
}

// for(let i =0; i <=3; i++)
@for $i from 1 through 3 

// for(let i =0; i <3; i++)
@for $1 from 1 to 3 

$n : 8;
@while($n > 0){
$n : $n - 1 ; 
}

@import

@import "url주소"

scss파일 명 앞에 _를 붙이면 css로 따로 컴파일 되지 않는다.

@use(모듈화)

@use "./varialbes" as var;

.main {
 background-clolr : var.$primary;
}

느낀점

sass문법은 정말 이상해보인다. 자바스크립트도 문법이 이상하다는 소리는 들었지만 직접적으로 이상하다는 느낌은 잘 들지 않았지만 sass문법은 정말 이상하게 느껴진다. 그래도 css문법을 그대로 쓸수 있고 특히 hover기능을 구현할때는 정말 편할것 같다.