SASS (SCSS) 문법 정리

 

SASS란?

 

CSS의 확장 문법이다.

SASS에서 입력한 코드는 CSS로 컴파일해야 실행시킬 수 있다.

기본적으로 들여쓰기를 사용한다.

 

1. Nesting (중첩)

상위 선택자의 반복을 줄일 수 있다.

 

/*SCSS*/

.section {
	width: 100%;
    
    .list {
    	padding: 20px;
        
        li {
        	float: left;
		}
	}
}

 

2. & (부모 선택자 참조)

&를 사용하여 부모 선택자를 참조하여 사용할 수 있다.

/* SCSS */

.fs {
  &-small {
    font-size: 12px;
  }
  
  &-medium {
    font-size: 14px;
  }
  
  &-large {
    font-size: 16px;
  }
}

 

 

3. $ (변수)

 

변수를 선언할 수 있다.

선언한 블록 내에서만 사용할 수 있다.

 

$color: #00498c;

body {
	.box {
    	width :100%
        background-color: $color;
        color: white;
     }
}

 

 

4. @extend (확장)

 

작성 방법1 - @extend .클래스명;

작성 방법2 - @extend %클래스명;

 

 

% : 임시 클래스 이름을 뜻한다

html에는 실제로 존재하지 않는다.

SASS에서만 임의로 사용하는 클래스 이름이다.

 

.box{
	padding:20px;
    border: 1px solid #333;
}

.new-box{
	@extend .box;
    background-color: #eee;
}

.list-box{
	@extend .box;
    background-color: #000;
}

 

 

 

5. @Mixin (재사용)

 

 

1. 재사용할 css 스타일을 정의할 수 있다.
2. @mixin으로 선언한다.
3. @include로 사용한다.

 

@mixin btn($border-color : black, $font-color : black) {
	padding: 10px 20px;
    cursor: pointer;
    background-color: inherit;
    border: 1px solid lightgray;
    border-radius: 14px;
    font-weight: bold;
}

.btn-1{
	@include btn(red, red);
}

.btn-2{
	@include btn(blue, blue);
}

 

 

 

6. operator (연산자)

 

 

레이아웃을 디테일하게 디자인할 때 쓸 수 있다.

(+ , - , * , / , %)

 

 

.box {
	width: calc(10em / 2);
    height: 100px;
    border: 1px solid red;

 

1. 추가로 calc는 calculation의 줄임말 즉, 계산이라는 뜻이다.
2. 더하기, 빼기, 곱하기는 calc를 사용하지 않아도 계산이 된다.
3. 단독적으로 사용할 때 나누기는 calc를 꼭 써야 계산된다. 
4. 그 이유는 / 기호 자체가 css에서 다른 용도로도 쓰이기 때문이다.