[SCSS] 무작정 예제 따라하기

데이터 종류, @each

SCSS

$number: 1;      // .5, 100px, 1rem
$string: bold;   // relative, "../image/a.png"
$color: red;     // blue, #ffff00, rgba(0,0,0,.1) 
$boolean: true;  // false
$null: null;
$list: orange, royalblue;
$map: (
    o: orange,
    r: royalblue,
    y: yellow
);

@each $c in $list {
    .list {
        color: $c;
    }
}
@each $k, $v in $map {
    .box-#{$k} {
        color: $v;
    }
}

컴파일된 CSS

.list {
  color: orange;
}

.list {
  color: royalblue;
}

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

내장함수

SCSS

.box {
  $color: royalblue;
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: $color;
  &:hover {
    background-color: darken($color, 10%);
  }
  &.built-in {
    //background-color: mix($color, red);
    //background-color: lighten($color, 10%);
    //background-color: rgba($color, .2);
    background-color: invert($color);
  }
}

컴파일된 CSS

.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: royalblue;
}
.box:hover {
  background-color: #214cce;
}
.box.built-in {
  background-color: #be961e;
}

함수

SCSS

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@function ratio($size, $ratio) {
  @return $size * $ratio
}

.box {
  $width: 160px;
  width: $width;
  height: ratio($width, 9/16);
  @include center;
}

컴파일된 CSS

.box {
  width: 160px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

for문 예시

scss

// for (let i = 0; i < 5; i+=1) {
//   console.log(`loop-${i}`)
// }
$url: "https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images";
@for $i from 1 through 5 {
    .hero:nth-child(#{$i}) .image {
        background-image: url("#{$url}/hero#{$i}.png");
    }
}

컴파일된 css

.hero:nth-child(1) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");
}

.hero:nth-child(2) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png");
}

.hero:nth-child(3) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png");
}

.hero:nth-child(4) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero4.png");
}

.hero:nth-child(5) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero5.png");
}

@mixin 단어 정리

scss

//인수 기본값 설정 가능
@mixin box($size: 80px, $color: tomato) {
  // $size 매개변수
  width: $size;
  height: $size;
  background-color: $color;
}

.container {
  //200px, red 인수
  @include box(200px, red);
  .item {
  	//$color: green 키워드 인수
    @include box($color: green);
  }
}

컴파일된 css

.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  width: 80px;
  height: 80px;
  background-color: green;
}