SASS(SCSS)문법 정리

SASS(SCSS)문법을 정리했다.

SASS(SCSS)는 최종에는 표준 CSS로 동작해야 하며 전처리기로 작성 후 CSS로 컴파일 해야 한다.

 

 

 

1. 중첩 : 자식 요소를 부모 요소 내부에 작성이 가능

.box{
    h2{
    	color: red;
    }
}

 

2. & : 바로 상위의 요소를 선택할 수 있음

.box{
/* .box:hover */
    &:hover{
    	color: red;
    }
}

 

3. @at-root : 하위 요소는 범위 밖에서 사용할 수 없기 때문에 중첩에서 벗어 날 때 사용

.box{
    @at-root h2{
    	color: red;
    }
}


/* CSS

.box{

}
h2{
	color: red;
}
*/

 

4. 속성 중첩 : 중복되는 속성의 이름을 중첩

.box{
    margin: {
        left : 5px;
        bottom : 10px;
    }
}

 

5. 변수 : 자주 사용하는 값을 변수로 지정하여 사용 가능

@import 'main.css';

/* 전역 변수로 어디든 사용 가능 */
$box-bgcolor: #232323;
/* overwrite 방지, 기존의 변수가 있을 경우 사용하지 않음 */
$box-color: red !default;

.box{
    background-color: $box-bgcolor;
    /* background-color: $box2-bgcolor; 불가능 */
}

.box2{
    $box2-bgcolor: #252525;
    color: $box-color /* blue */
    h1{
    	background-color: $box2-bgcolor;
    }
}

 

6. Mixins : 재활용 할 내용을 작성한다.

기본사용 - 1단계 : 선언(Mixins) > 2단계 : 사용(include)

/* SCSS */
@mixin main-text{
    font{
        size: 20px;
        weight: bold;
    }
    color: red;
}

.box{
    @include main-text;
}


/* SASS */
=main-text
    font-size: 20px
    font-weight: bold
    color: red
    
.box
    +main-text

인수전달 - Mixins으로 매개변수를 전달한다.

@mixin box-border($pixel, $color){
	border: $pixel solid $color;
}

.box{
    @include box-border(2px, red);
}

@mixin position($state:relative, $l:null, $r:null, $t:null, $b:null){
    position: $state;
    left: $l;
    right: $r;
    top: $t;
    botton: $b;
}

.box{
    @include position(absolute, $l:10px, $t:25px);
}

 

7. 논리적용이 가능하다.

$width: 50px;
@function border-style($pixel){
    @if($pixel >= 1px and $pixel <= 5px){
        return $pixel solid red;
    }@else{
        return $pixel dashed blue; 
    }
}

.box{
    h2{
        @if($width > 100px){
            height: 200px;
        }
        color: @if($width > 200px, red, :blue);
        border: border-style(2px);
    }
}

 

 

 

 

출처

Sass(SCSS) 완전 정복! | HEROPY

Sass(SCSS) 완전 정복!