SCSS

ネストされたネスト

.container {
  h1{
  	color: royalblue;
    font-size:24px;
    }
  ul{
  display:flex;
  	li{
     font-size:12px;
     }
   }
 }

1.ネスト属性

.box{
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top:10px;
    left:20px;
  };
  padding: {
    top:10px;
    bottom:40px;
  }
}

2.親選択プログラムを&参照します。

.list{
  li{
   &:last-child{
     margin-left:0
    }
  }
}

//font-size
.fs {
  &-small {
    font-size: 12px;
  }
  &-medium {
    font-size: 14px;
  }
  &-large {
    font-size: 16px;
  }
}
//background-color
.bc {
  &-dark {
    background-color: #a8a8a8;
  }
  &-normal {
    background-color: #daddad;
  }
  &-light {
    background-color: #faa2af;
  }
  &-emphasis {
    background-color: #f94855;
  }
}

へんすう

$deepdark: black;
$dark: darkgrey;
$light: orange;

.container{
  color:$deepdark;
  h1{
    color: $dark;
  }
}

$size: 200px; // 전체 범위

.container {
	$size: 400px; // .container에서는 400px로 변경하여 사용
    .item{
    width: $size; // 400px
    }
}

.box {
	width: $size // $size는 계속 변경딘 400px로 사용된다.
    }

さんじゅつえんざん

.div {
	width: 20px + 20px // 40px
    height: 40px - 10px // 30px
    margin: 30px / 2 //30px / 2 나누기는 적용되지 않음
    font-size: 10px * 2 // 20px
}
// 나누기 적용 방법 1.
    margin: (30px / 2) // 15px;

// 나누기 적용 방법 2.
$size: 30px;
	margin: $size / 2 // 15px;

// 나누기 적용 방법 3.
	margin: calc(30 / 2)px;

@mixin / @include

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

.container {
  @include center;
  .item{
    @include center;
    font-size: 18px;
  }
}

@mixinのパラメータとパラメータの使用

@mixin d-flex($align:center){
  display:flex;
  justify-content: $align;
  align-items: $align;
}

.container {
  @include d-flex; // default parameter를 통해 자동 center로 정렬됨.
  .item{
    @include d-flex(flex-start);
    font-size: 18px;
  }
}

複素パラメータ、引数を受け入れることができます。

@mixin d-flex($horizon: center, $align: center, $color: #ff0){
  display:flex;
  justify-content: $horizon;
  align-items: $align;
  color: $color;
}

.container {
  @include d-flex(center,flex-start,#daddad);
  .item{
    @include d-flex($align:flex-start,#f94855);
    font-size: 18px;
  }
}

  .item{
    @include d-flex($align:flex-start,#f94855);
    font-size: 18px;
  }

SCSSの繰り返し文

@for $i from 1 through 10 {
  //scss의 보간 #{}
  .box:nth-child(#{$i}){
    width: 100px;
  }
}

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, 9/16); // 16:9의 비율을 쉽게 만들 수 있다.
  @include center;
}

//@mixin은 코드의 모음, 함수는 반환된 결과를 나타낸다.

SCSSの組み込み関数

// mix() 첫번째 인수에 들어오는 색상과 2번째 인수를 섞어 새로운 색상을 만들어 반환한다.
.box{
background-color:mix($color, red)
}

// lighten(),darken() 첫번째 인수에 들어오는 색상을 2번째 인수만큼 밝게,어둡게 만들어 반환한다
.box{
  background-color: lighten(#3533ff, 10%);
}
.box{
  background-color: darken(#3533ff, 10%);
}
// darken, lighten은 버튼의 호버 효과에 유용하게 쓰인다.
.button:hover{
  background-color: darken($color, 10%)
}

//grayscale() 회색으로 만들어준다
.box{
  background-color: grayscale(#3533ff);
}

//invert() 색상을 반전시킨다
.box{
  background-color: invert(#3533ff);
}

//rgba() 반투명하게 만들어준다. 표준보다 편리하여 유용하다
.box{
  background-color: rgba($color, .5);
}

@each

// @mixin의 @content

@mixin left-top{
  position:absolute;
  top:0;
  left:0;
  @content;
}

.container {
  width:100%;
  height: 100px;
  @include left-top;
}
// mixin에 @content를 작성하고 사용하는 요소에서 중괄호를 통해 속성을 추가할 수 있다.
.box{
  @include left-top {
    bottom: 0;
    right: 0;
    margin: auto;
  }
}