SCSS 기본 정리

SASS 상위 버전이 SCSS

문법적으로 약간 다른게 있으며 보통은 SCSS씀.

 

1. &

부모 선택자 선택

li {
    &:last-child {
        padding: 10px;
    }
}

/*결과*/
li:last-child {
  padding: 10px;
}

.btn {
    &-small {
        padding: 1px;
    }
}

/*결과*/
.btn-small {
  padding: 1px;
}

 

2. :

동일한 네임을 가진 css는 중첩해서 사용 가능

li {
    font: {
        size: 10px;
        color: #333;
    }
}

/*결과*/
li {
  font-size: 10px;
  font-color: #333;
}

 

3. !global

변수는 스코프 안에서만 움직이기 때문에, 상단에 전역변수로 써주거나 아니면 !global 달아주기

li {
    $color : #333 !global;
}

.btn {
    color: $color;
}

/*결과*/
.btn {
  color: #333;
}

 

4. !default

변수는 덮어쓰기 가능한데 기본값 쓰고 싶을때

$color: #111;

li {
    $color: #333 !default;
    color: $color;
}

/*결과*/
li {
  color: #111;
}

 

5. @import

@import "a.css";
@import "http://~";
@import url(a);
@import "a" screen;
@import "a.css", "b.css";

 

 

6. /

연산할때 나누기는 그대로 컴파일되니까 아래와 같이 써야함.

1) (괄호)안에 넣기

2) 한쪽을 변수로 만들기

3) 다른 연산과 같이 쓰기 예) 10px + 20px / 3

 

*그리고 css에서는 연산하려면 calc()쓰는데, 여기서는 필요없음.

 

 

7. @mixin, @include

재사용할 css그룹 만들기

@mixin smallText {
    font: {
        size: 12px;
        weight: bold;
    };
    color: #333;
    background-color: #fff;
    &:before {
        content: "Im small Text";
    }
};

.btn {
    @include smallText;
}

/*결과*/
.btn {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  background-color: #fff;
}

.btn:before {
  content: "Im small Text";
}

 

 

8. @content

선언된 mixin에 원하는 스타일을 추가할 수 있음

@mixin smallText {
    color: #333;
    @content;
};

.btn {
    @include smallText {
        padding: 10px;
    }
}

/*결과*/
.btn {
  color: #333;
  padding: 10px;
}

 

9. ...

값이 하나가 아니고 리스트로 받는다는 의미

$colors: red, orange, green;

@mixin color($a, $b, $c) {
    color: $a;
    background-color: $b;
    border-color: $c;
}

.btn {
    @include color($colors...);
}

/*결과*/
.btn {
  color: red;
  background-color: orange;
  border-color: green;
}

 

10. #{}

코드 어디에든 변수를 넣을 수 있음.

 

 

11. _파일이름

main.scss

a.scss

b.scss

있을 때 저렇게만 저장하면 3개 다 컴파일 되는데

 

_a, _b로 이름 변경하고 main에 import시키면 나중에 컴파일 후 main만 되서 굿굿.

 

 

 

 

아주 잘되있는 분 포스팅보면서 정리함

https://heropy.blog/2018/01/31/sass/

 

공식 홈페이지

https://www.sass-lang.com/documentation

 

웹에서 컴파일되는 모습 볼 수 있는 곳은 이곳

https://www.sassmeister.com/