데브코스-til-css심화 3

@mixin @include && 내장모듈

@use "sass:map"; //내장모듈을 가져온다
@mixin large-text($size: 30px) {
    // @if($size < 30px){
    //     font-size: 30px;
        
    // } @else{
    //     font-size: $size;
    // }
    font-size : if($size<30px, 30px, $size);
    font-weight: bold;
    font-family: sans-serif;
    color: blue;
    
}

.box-a{
    width: 100px;
    height: 200px;
    @include large-text;
}

.box-b{
    width: 200px;
    @include large-text(40px); //재활용
}

.box-c{
    width: 200px;
    @include large-text(20px); //재활용
}

@mixin reset-margin{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@mixin section($size: 40px, $end: "!!"){
    font-size: 20px;
    line-height: 1.4;
    color: blue;
    h1{
        font-size: $size;
        font-weight: bold;
        @include reset-margin;
        &::after{
            content: $end;
        }
    }
}

.section{
    @include section;
}
.article{
    @include section(50px, "??")
}


@mixin bg($w, $h, $b...){
    width: $w;
    height: $h;
    background: $b;
}

.box{
    @include bg(
        100px,
        200px,
        url("/images/a.png") no-repeat center,
        url("/images/b.png") repeat-x,
        url("/images/c.png") repeat-y center / contain
        );
}

@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...);

}

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

.absolute{
    width: 100px;
    height: 100px;
    @include pos(absolute, $t: 100px, $l: 50px);
}

.fixed{
    width: 100px;
    height: 200px;
    @include pos(fixed, $b: 20px, $r: 20px);
}

.sticky{
    @include pos(sticky, $t: 0);
}

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

.box{
    @include icon("/images/icon.png"){//여기내용을content에 보냄 
        position: absolute;
        top: 0;
        legt: 50px;
    }
}

media

@use "sass:map"; //내장모듈을 가져온다

@mixin media($name){
    $breakpoints:(
        sm: 576px,
        md: 992px,
        lg: 1400px
    );
    // breakpoints.sm // breakpoints.md // breakpoints[name]
    @media all and (max-width:map.get($breakpounts, $name)){
        @content
    }
}

.box {
    width: 400px;
    height: 400px;
    @media all and (max-width: 1400px){
        width: 300px;
        height: 300px;
        
    }
    @media all and (max-width: 922px){
        width: 200px;
        height: 200px;
        
    }
    @media all and (max-width: 576px){
        width: 100px;
        height: 100px;
        
    }
}

.section {
    @media all and (max-width: 992px){
        width: 450px;
    }
}