SCSS

🍈 @mixin

@includeで指定したコード内容を使用します.
このとき指定したターゲットにはパラメータがないかdefault値がある可能性があります.

SCSS

// 매개변수가 없는 @mixin
@mixin noArgument{
    font : {
        size:100px;
        weight:bold;
        family :sans-serif;
    };
}

.box1{
    width:100px;
    height:200px;
    @include noArgument;
}

// 매개변수가 있는 @mixin
@mixin Argument($size){
    font : {
        size:$size;
        weight:bold;
        family :sans-serif;
    };
}

.box2{
    width:100px;
    height:200px;
    @include Argument(1000px);
}

@mixin noArgumentValue($size : 3000px){
    font : {
        size:$size;
        weight:bold;
        family :sans-serif;
    };
}

//매개변수는 기존에 설정되어 있으나 쓰지않아 default value로 처리
.box3{
    width:100px;
    height:200px;
    @include noArgumentValue;
}

//매개변수는 기존에 설정되어 있으나 쓰지않아 default value로 처리
.box4{
    width:100px;
    height:200px;
    @include noArgumentValue();
}

CSS

.box1 {
  width: 100px;
  height: 200px;
  font-size: 100px;
  font-weight: bold;
  font-family: sans-serif;
}

.box2 {
  width: 100px;
  height: 200px;
  font-size: 1000px;
  font-weight: bold;
  font-family: sans-serif;
}

.box3 {
  width: 100px;
  height: 200px;
  font-size: 3000px;
  font-weight: bold;
  font-family: sans-serif;
}

.box4 {
  width: 100px;
  height: 200px;
  font-size: 3000px;
  font-weight: bold;
  font-family: sans-serif;
}

@mixinプロパティ

@mixinは他の@mixinと重複していてもよい.

可変因数で複数連用可能.

・{ }スタイルブロックが追加された内容をmixinに伝えることができるので、それを得るためにmixinは使うべき@content

パラメータ伝達の場合、既存の伝達順序は異なるが、キーワード引数により、順序が異なっていてもキーワードごとに値が伝達される.

mixin無価時のエラー防止のために追加した:null無価であればnullとして扱う.

nullで値を処理した場合、その内容はコンパイルされません.

@contentでは()かっこで値が得られ、使用時に使用できます.

展開演算子の例1

SCSS

//$width, $height를 제외한 나머지 값을 $marginRest에 몰아 넣는다. 
@mixin content($width , $height, $marginRest...){
    width : $width;
    height : $height;
    margin : $marginRest;
}

.box{
    @include content(
        100px,
        200px,
        50px,
        100px,
        150px,
        200px
    );
}

CSS

.box {
  width: 100px;
  height: 200px;
  margin: 50px, 100px, 150px, 200px;
}

展開演算子の例2

SCSS

@mixin spread($t, $r, $b, $l){
    margin-top : $t;
    margin-right : $r;
    margin-bottom : $b;
    margin-left : $l;
}

.box{
    $m : 10px 20px 30px 40px;
    @include spread($m...)
}

CSS

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

spread($m)で処理すると100万ドルの並びが全て$tに入る
したがって、$r$b$lには値がないので、後で展開演算子を配置して展開します.エラーが蒸し焼きで並べられているように...通過するはずです.

・@mixin spread($t, $r:500px, $b:30px, $l:70px)となると$tに並び、間違いはありませんが、欲しい結果ではありません.

展開演算子の例3(+補間)

SCSS

@mixin spread($p,$t, $r, $b, $l){
    #{$p}: {
    top : $t;
    right : $r;
    bottom : $b;
    left : $l;
    }
}

.box{
    $m : 10px 20px 30px 40px;
    @include spread(margin, $m...);
    @include spread(padding, 10px 20px 30px 40px...)
}

CSS

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

選択者または属性は一般変数では処理できず、#{$p}で処理し、残りの配列は...で分解し、個別に入れる.

@contentの例

SCSS

@mixin icon($url){
    &::after{
        content : url($url);
        @content;
    }
}

.box{
    @include icon("/images/icon.png"){
        position:absolute;
        top : 0;
        left : 50px;
    }
}

CSS

.box::after {
  content: url("/images/icon.png");
  position: absolute;
  top: 0;
  left: 50px;
}

キーワード引数の例

SCSS

@mixin pos($p , $t:null,$b:null){
    position : $p;
    top : $t;
    bottom : $b;
}

.absolute{
    @include pos( $b : 150px, $p:absolute, $t : 2000px)
}

CSS

.absolute {
  position: absolute;
  top: 2000px;
  bottom: 150px;
}

パラメータを順番に渡さなくても、キーワード伝達値に基づいて処理されます.

🍈 @mixinまとめ

SCSS

@mixin pass($a:null,$b:null,$c:null){
    &:hover{
                color:blue;
                font-size : $a;
                width : $b;
                height : $c;
                @content (1000px, 2000px);
    }
    @content(10px,20px);
}

.div{
    @include pass ($a:10,$b:20,$c:30) using($t , $b){
        margin-top : $t;
        margin-bottom : $b;
    }
}

CSS

.div {
  margin-top: 10px;
  margin-bottom: 20px;
}
.div:hover {
  color: blue;
  font-size: 10;
  width: 20;
  height: 30;
  margin-top: 1000px;
  margin-bottom: 2000px;
}

includeでpass対応@mixinを受信し、値ごとにパラメータを処理し、値がなければnullとする.

usingにより、各コンテンツの追加パラメータが@mixinの処理値に変換され、一緒に追加されます.

製作した.div:hoverわあ.divをそれぞれCSS結果として表す.

@includeオブジェクトを検索してその用途を{}コンテンツから@mixinに移行し、@mixinが受信したパラメータ($a$b$c)と受信した用途{}(marify-top,marify-bottom)に従ったコンテンツを処理し、計算に戻る

🍈 さんこうえんざんし

if(check、checkがtrueの場合、checkはfalse)

SCSS

@mixin content($size){
    // @if($size < 30px){
    //     font-size : 30px;
    // }
    // @else{
    //     font-size : $size;
    // }
    font-size : if($size < 30px , 30px , $size);
}

.box100px{
    @include content(100px);
}

.box20px{
    @include content(20px);
}

CSS

.box100px {
  font-size: 100px;
}

.box20px {
  font-size: 30px;
}

$sizeは30 px以下で30 pxを処理し、30 pxを超えると対応する寸法を処理する.コメントセクションのifelseは同じ結果です.

🍈 map.get

Mapはキー値に基づいて対応するターゲットを取得します.@use "sass:map"を上に追加する

SCSS

@use "sass:map";

$bootstrap-colors : (
    primary : #0275d8,
    success : #5cb85c
);

.notice{
    color : map.get($bootstrap-colors, success);
}

CSS

.notice {
  color: #5cb85c;
}

🍈@extend

拡張子を追加すると、選択プログラムが爆発したり、継承が重複したりするなどの問題が発生します.
実際の@mixinはこの@extendをすべて適用できるので、あまり使いにくいです.

🍈 @function @return @error

類似js使用
@errorの場合、SCSSにエラーが表示されます.(JSのthrowに類似)
関数の作成時に作成される既存の関数(url,repeat...)避けるためにA-B(my-func)の形で書くことがある.
拡張性のため、ある変数値について、既に記述されているものがあれば、後述する!default.

🍈 @each

ListとMapで処理可能

🍈 @for

$i from a through b=>a~b$i from a to b=>aからb-1

🍈 @while

@while $i > 0 { ... }