반응형
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
웹에서 컴파일되는 모습 볼 수 있는 곳은 이곳
'html_css' 카테고리의 다른 글
기종 별 input 모양 (0) | 2021.04.06 |
---|---|
Web 기본 정리 (0) | 2020.12.11 |
HTML 몰아서 정리 (0) | 2020.11.16 |
티스토리에서 코드 예쁘게 올리기(highlight.js) (0) | 2019.12.18 |
ul에다가 float했는데 순서 반대로 뒤바뀌었을때 (0) | 2019.10.01 |