1. 주석
: css로 변환시 주석 유지됨
2. 중첩
scss
.container {
> ul {
li {
font-size: 40px;
.name {
color: royalblue;
}
.age {
color: orange;
}
}
}
}
css
.container > ul li {
font-size: 40px;
}
.container > ul li .name {
color: royalblue;
}
.container > ul li .age {
color: orange;
}
3. 상위(부모) 선택자 참조
scss
.btn {
position: absolute;
&.active {
color: red;
}
}
.list {
li {
&:last-child {
margin-right: 0;
}
}
}
.fs {
&-small { font-size: 12px; }
&-medium { font-size: 14px; }
&-large { font-size: 16px; }
}
css
.btn {
position: absolute;
}
.btn.active {
color: red;
}
.list li:last-child {
margin-right: 0;
}
.fs-small {
font-size: 12px;
}
.fs-medium {
font-size: 14px;
}
.fs-large {
font-size: 16px;
}
4. 중첩된 속성
scss
.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
};
margin: {
top: 10px;
left: 20px;
};
padding: {
top: 10px;
bottom: 40px;
left: 20px;
right: 30px;
};
}
css
.box {
font-weight: bold;
font-size: 10px;
font-family: sans-serif;
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 30px;
}
5. 변수
scss
.container {
$size: 200px;
position: fixed;
top: $size;
.item {
$size: 100px;
width: $size;
height: $size;
transform: translateX($size);
}
left: $size;
}
css
.container {
position: fixed;
top: 200px;
left: 100px;
}
.container .item {
width: 100px;
height: 100px;
transform: translateX(100px);
}
6. 산술 연산
scss
div {
width: 20px + 20px;
height: 40px - 10px;
font-size: 10px * 2;
margin: (30px / 2);
padding: 20px % 7;
}
css
div {
width: 40px;
height: 30px;
font-size: 20px;
margin: 15px;
padding: 6px;
}
7. 재활용
scss
@mixin center {
display: flex;
justify-content: center;
aligh-items: center;
}
.container {
@include center;
.item {
@include center;
}
}
.box {
@include center;
}
@mixin box($size: 80px, $color: tomato) {
width: $size;
height: $size;
background-color: $color;
}
.container {
@include box(200px, red);
.item {
@include box($color: green);
}
}
.box {
@include box;
}
css
.container {
display: flex;
justify-content: center;
aligh-items: center;
}
.container .item {
display: flex;
justify-content: center;
aligh-items: center;
}
.box {
display: flex;
justify-content: center;
aligh-items: center;
}
.container {
width: 200px;
height: 200px;
background-color: red;
}
.container .item {
width: 80px;
height: 80px;
background-color: green;
}
.box {
width: 80px;
height: 80px;
background-color: tomato;
}
8. 반복문
scss
@for $i from 1 through 10 {
.box:nth-chid(#{$i}) {
width: 100px * $i;
}
}
css
.box:nth-chid(1) {
width: 100px;
}
.box:nth-chid(2) {
width: 200px;
}
.box:nth-chid(3) {
width: 300px;
}
.box:nth-chid(4) {
width: 400px;
}
.box:nth-chid(5) {
width: 500px;
}
.box:nth-chid(6) {
width: 600px;
}
.box:nth-chid(7) {
width: 700px;
}
.box:nth-chid(8) {
width: 800px;
}
.box:nth-chid(9) {
width: 900px;
}
.box:nth-chid(10) {
width: 1000px;
}
9. 함수
scss
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
@function ratio($size, $ratio) {
@return $size * $ratio
}
.box {
$width: 100px;
width: $width;
height: ratio($width, 1/2);
@include center;
}
css
.box {
width: 100px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
10. 색상 내장 함수
mix($color, red); 색상을 섞어줌
lighten($color, 10%); 10%만큼 밝아짐
darken($color, 10%); 10%만큼 어두워짐
saturate($color, 10%); 채도가 10% 만큼 올라감
desaturate($color, 10%); 채도가 10% 만큼 내려감
grayscale($color); 회색으로 만들어줌
invert($color); 색상을 반전시킴
rgba($color, .5); 투명도 설정
11. 가져오기
@import "./sub", "./sub2"
12. 데이터 종류
$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null: null;
$list: orange, royalblue, yellow;
$map: (
o: orange,
r: royalblue,
y: yellow
);
13. 반복문 @each
scss
$list: orange, royalblue, yellow;
$map: (
o: orange,
r: royalblue,
y: yellow
);
@each $c in $list {
.box{
color: $c;
}
}
@each $k, $v in $map {
.box-#{$k}{
color: $v;
}
}
css
.box {
color: orange;
}
.box {
color: royalblue;
}
.box {
color: yellow;
}
.box-o {
color: orange;
}
.box-r {
color: royalblue;
}
.box-y {
color: yellow;
}
14. 재활용 @content
scss
@mixin left-top {
position: absolute;
top: 0;
left: 0;
@content;
}
.container {
width: 100px;
height: 100px;
@include left-top;
}
.box {
width: 200px;
height: 300px;
@include left-top {
bottom: 0;
right: 0;
margin: auto;
}
}@mixin left-top {
position: a;
}
css
.container {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.box {
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}