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. $ (변수)

1. 변수를 선언해줘야한다.
2. 선언한 블록 내에서만 사용할 수 있다.

$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;

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