scss 기본 사용법

자식 요소

 

{} 괄호 안의 class,id 등 자식요소를 넣어 사용한다.

 <div>
     <p>자식 요소 1</p>
     <span>자식 요소 2</span>
 </div>

div {
    width: 100%; height: 400px;

    p {
        font-size: 20px; font-weight: 500;
    }

    span {
        font-size: 15px; font-weight: 300;
    }
}

 

& 연결

 

:hover :after .class 등 태그에 연결 할 때 사용한다.

div {
    width: 100%; height: 400px;

    &:hover {
        background-color: #888;
    }

    &.box {
        background-color: #e22121;
    }

    p {
        font-size: 20px; font-weight: 500;
    }

    span {
        font-size: 15px; font-weight: 300;
    }
}

 

변수

/* $변수명 : 값 */

$background : red;
$color : blue;

div {
    width: 100%; height: 400px;
    background-color: $background;

    p {
        font-size: 20px; font-weight: 500; color: $color;
    }

    span {
        font-size: 15px; font-weight: 300;
    }
}

 

조건부

 

if & else if 문

div {
    width: 100%; height: 400px;
    background-color: $background;

    @if $background == red {
        border: 1px solid blue;
    } @else if  $background == blue {
        border: 1px solid red;
    } @else {
        border: 1px solid black;
    }

}

 

for 문

section {
    width: 100%; height: 400px;

    @for $i from 1 through 3 {
        .box-#{$i} {
            width: 100px * $i;
            height: 80px;
            border: 1px solid;
        }
    } 

}

화면 값

 

while 문

section {
    width: 100%; height: 400px;

    $i : 1;

    @while $i <= 3 {
        .box-#{$i} {
            width: 100px * $i;
            height: 80px;
            border: 1px solid;
        }
        $i : $i + 1;
    }

}

 

each 문

 /* @each $var in <list> {} */
 /* $var = 임의 변수 | <list> = ,로 구본 되는 리스트 */
 
 section {
    width: 100%; height: 400px;

    @each $number in 1, 2, 3 {

        .box-#{$number} {
            width: 100px * $number;
            height: 80px;
            background-image: url('/img/img_#{$number}.png');
        }
    }

}

 

함수

/* 함수 선언*/
@mixin 함수명(인수１, 인수２, ...) {
  ...
}

/* 함수 불러오기 */
@include 함수명(인수１, 인수２, ...);


@mixin colorBox( $size, $color) {
    font-size: $size; color: $color;
}

section {
    width: 100%; height: 400px;

    p {
        @include colorBox(20px, blueviolet);
    }

}

 

미디어쿼리

$breakpoint-1024: 1024px; /* 함수 선언 */
$breakpoint-640: 640px; /* 변수 선언 */

@mixin max-screen() {
   @media (max-width : $breakpoint-1024) {
        @content;
   };
};

@mixin min-screen() {
   @media (max-width : $breakpoint-640) {
        @content;
   };
};

section {
    width: 100%; height: 400px;
    background-color: #666;

    @include max-screen() {
        height: 300px;
    }

    @include min-screen() {
        height: 300px;
    }

}