SCSS 문법

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

 

설치

cmd 창에서 yarn add sass 후 사용 가능

yarn add sass

 

1. 사용 가능한 데이터 타입

$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
  l: light,
  d: dark,
);

 

2. Nesting 중첩

{} 안에 또  {} 선언

.sectionMain{
    width: 100%;
    .boxLeft {
        width: 20%;
        padding: 10px;
        li {
            float: left;
        }
    }
}

 

3.  "&"

상위 선택자 참조하는 &. (치환원리)

.bttn{
    position: relative;
    &:hover{
        background-color: red;
    }
    & span{
        color: blue;
    }
    &-junior{
        border: none;
        background-color: orange;
    }
}

 

4. 변수

선언된 블록 내에서만 유효

$fsize: 2rem;
$fcolor: #ff0000;
$img-dir: "/_imgs/";
.header{
    font-size: $fsize;
    color: $fcolor;
    // 이렇게 써도 되고
    // background: url($img-dir + "bg.jpg");
    // 이렇게 써도 됨 #{} 이용 
    background:  url(#{$img-dir} + "bg.jpg");
}

 

5. Operations 연산

+, -, *, /, % 사용 가능

 

6. Mxins

 

- 스타일만 반환
- 선언 @mixin   

- 사용 @include

@mixin large-font{
    font:{
        size: 22px;
        weight: 600;
        family: serif;
    }
    color: yellowgreen;
    &::after{
        content: "~";
    }
}
.mixins{
    @include large-font;
}

 

7. Function

- @function 으로 선언

- 값 리턴시 @return 

$mWidth : 720px;
@function fgrid($num: 1, $cols: 12){
    @return $mWidth * ($num/$cols);
}
.grid12 {
    display: flex;
    .left{
        width: fgrid(); //1칸
        background-color: #ff0000;
    }
    .middle{
        width: fgrid(8); //8칸
        background-color: #00ff00;
    }
    .right{
        width: fgrid(3); //3칸
        background-color: #0000ff;
    }
}

 

8. Condition

- if, @if @if else, @else

 

8-1. (@없이) if 삼항연산자처럼 쓰기

$viewportWidth: 100vw;
.if {
    border: 1px solid black;
    max-width: if($viewportWidth > 40vw, 40vw, $viewportWidth);
    &::after{
        content: "max 40vw";
    }
}

8-2. @if, @if else, @else

$boxColor: marin;
.if {
    @if $boxColor == marin{
        background-color: #3b8383;
    }@else if $boxColor == fire{
        background-color: #ff0000;
    }@else{
        background-color: #333333;
    }
}

 

9. Loop 

9-1. @for

- i from A through B를 쓰면 B값도 포함
- i from A to B를 쓰면 B 전까지 돎

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

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

 

9-2. @each

@each $fruit in apple, cherry, orange{
    .#{$fruit}-box{
        &::after{
            content: "#{$fruit}";
        }
    }
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    #{$header} {
      font-size: $size;
    }
}