SCSS - 2

複文

4回繰り返します.@for $i from 1 to 5 {
}

@for $i from 1 to 5 {     1부터 5전까지
   .container{
       color:red;
   }
}

.container {color: red;} 
.container {color: red;}
.container {color: red;}
.container {color: red;}       //4개 출력

純粋にこのように使うのは効率的ではありません.
だから、隣の兄弟の順番をリストするときに役立ちます.
JavaScriptの補間値は${}、SCSSの補間値は#{}です.

scss
@for $i from 1 to 5 {
    .box:nth-child(#{$i}){
        width : 50px * $i;
    }
}

css
.box:nth-child(1) {width: 50px;}

.box:nth-child(2) {width: 100px;}

.box:nth-child(3) {width: 150px;}

.box:nth-child(4) {width: 200px;}

n.関数

@function raito(para) {body}

ほとんどのモニタの割合は16:9です.
関数として実装し,簡単に代入した.

@function raito($width) {
 @return  $width * (9/16)
}

.box{
 $width:1920px;               // 원하는값 입력
 width: $width;
 height:raito($width);
}

結果

.box {
 width: 1920px;
 height: 1080px;
}

内蔵カラー関数

関数は、mix(color1,color2)2色の合計を示します.lighten(color,1~100)色を明るくします.darken(color,1~100)色を暗くします.saturate(color,1~100)カラー.desaturate(color,1~100)彩度.grayscale(color)グレーに変更されました.反転invert(color)色rgb(color,0~1)色を不透明にします.

インポート

VSCによると、SCSSファイルは他のSCSSファイルを簡単にインポートできます.
JavaScriptと異なり、エクスポートは不要、インポートのみ@import url('./tset.scss');であるが、@import './tset';とより簡単に表すこともできる.一度持ってきた時は@import './test','./tset2';でカンマで

データ#データ#

SCSSのデータ型.
データ説明例番号1、.82、20 px、2 em…Strings文字bold、relative、「/image/a.png」、「dotum」Colors色はred、blue、#FFFFF 00、rgba(255,0,0,5)Booleans論理true、偽NullListが空、または区切られた値リスト(apple、orange、banana)、apple orange MapListsを表し、Key:vanan:

@each

@eachは重複文に似ています.違う形で返すだけです.@each $var in list {}リストは次のように使用できます.アレイの順序で作成します.

$list: orange,red,blue;
@each $col in $list {
    .box{
      color:$col
    }
}

.box {
  color: orange;
}

.box {
  color: red;
}

.box {
  color: blue;
}

mapはオブジェクトの形状に似ています.彼は鍵と値段を持っている.
JavaScriptとは異なり、{}カッコではなく()カッコを使用します.
mapは키と값を有するため、2つの変数を宣言する

@each $key ,$value in $map {}

2つの変数があるので、どこでも使用できます.

SCSS
$map:(
  o:orange,
  r:red,
  b:blue
);
@each $key ,$value in $map {
    .box-#{$key}{
      color: $value
    }
}

CSS
.box-o {
  color: orange;
}

.box-r {
  color: red;
}

.box-b {
  color: blue;
}

補間を使用して、異なるクラスに適用できます.