데스코스-til-css심화4

내장모듈-list,map

@use "sass:list";
@use "sass:map";
//확장

%btn{
    display:inline-block;
    font-weight:bold;
    padding: 10px 20px;
    border-radius: 4px;
    background-color: gray;
}

.btn-primary{
    @extend %btn;
    background-color: blue;
}

.container {
    .item{
        color: red;
        .box{
            @extend .item;
            &::after{
                content: "";
                @extend .item;//부작용 중첩사용피하기
            }
        }
    }
}

.btn-danger{
    @extend %btn; //% placeholer scss에서 extend에서 사용가능 
    background-color: red;
}

.btn-success{ 
    @extend %btn;
    background-color: green;
}

@media all and (max-width: 1400px){
    %box{
        color: red;
    }
    .box{
        @extend %box; //미디어규칙 내부에 정의해야한다.
        //외부에서 선언된 미디어에서 확장하는것은 허용x
    }
}

function

//function
$columns-width: 1200px;
@function grid($col : 1, $total: 12){
    @if ($col > $total){
        @error '작아야되'
    }

    @return $columns-width * $col / $total;
}

.box1{
    width: grid(1, 12);
}

.box3{
    width: grid(11);
}

.box4{
    $columns: 4 12;
    width: grid($columns...);
}
//조건과 반복

@mixin avatar($size, $circle: false){
    width: $size;
    height: $size;
    
    @if $circle{
        border-radius: $size / 2;
    }
}

.square-av{
    @include avatar(100px, $circle: false);
}

.circle-av{
    @include avatar(100px, $circle: true);
}

반복

$sizes: 20px, 40px, 80px;
$fruits: (apple: 'A', banana: 'B', cherry: 'C');

@each $size in $sizes{
    $index: list.index($sizes, $size);
    .icon-#{$index}{
        height: $size;
        width: $size;
    }
}

@each $key, $value in $fruits{
    .fruit-#{$key}::after{
        content: $value;
    }
}

.list{
    postion: relative;
    top:0;
    @for $i from 1 through 3{
        .item:nth-child(#{$i}){
            width: 100px * $i;
        }
    }
}

.list{
    position: relative;
    .item{
        $i: 1;
        $n: 8;
        @while ($n > 0){
            &:nth-child(#{$i}){
                width: 100px * $n;
                height: 100px * $i;
            }
            $i: $i + 1;
            $n: $n - 2;
        }
    }
}