SCSS

1. 주석

// background-color: orange; : css로 변환시 주석 사라짐
/* font-size: large; */ : 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"  // url(), css 생략 가능

12. 데이터 종류

$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; // blue, #FFFF00, rgba(0,0,0,.1)
$boolean: true; // false
$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;
}