[CSS] SASS 기본 문법 - 에이블런 프론트엔드부트캠프 11일차

1. 주석

한글 주석을 달기 위해서 문서 최상단에 아래와 같은 코드를 작성한다

@charset "UTF-8";

 

한 줄 주석 처리는 sass가 감지하지 않아서 css 파일에 업데이트 되지 않는다

 // 한 줄 주석처리는 css 파일에서 보이지 않는다

 

여러 줄 주석 처리는 css에 적용한다.

/*
	블록 주석처리는 css에 업데이트시킨다
*/

 

2. 변수

변수 선언 방법은 다음과 같다

// $변수명: 속성값;
$width: 100%;

 

변수 사용 방법은 다음과 같다

// 속성명: $변수명
width: $width;

 

3. 연산자

css에서 calc함수를 사용해 연산했던 내용을 scss에서는 calc 함수를 사용하지 않고 사용할 수 있다.

width: 100% - 10%;

 

단, 단위가 다를 경우에는 calc함수를 사용해야 한다.

 

4. 중첩

css의 자식 선택자에 속성을 넣기 위해서는 다음과 같은 코드를 작성해야했다

main {
	width: 70%;
    height: 70vh;
	background: #ddd;
}

main section h1 {
	font: 16px/1 arial;
}

 

하지만 scss에서는 아래와 같이 중첩하여 조금 더 코드의 재사용성을 높일 수 있다.

main {
    width: 70px;
    height: 70vh;
	background: #ddd;

	section h1 {
    	font: 16px/1 arial;
    }
}

 

수업시간에서는 축약형으로 section h1으로 써야 한다고 배웠지만, section 안에 h1을 넣어 코드를 작성해도 정상적으로 작동됐다

 

main {
    width: 70px;
    height: 70vh;
	background: #ddd;

	section {
    	h1 {
    		font: 16px/1 arial;
        }
    }
}

5. &

중첩문 안에 부모 선택자를 다시 사용해야 할 때에는 &를 사용하면 된다. 가상선택자를 사용하기 위해서도 &를 사용해야만 한다.

article {
	&::hover {
    	background: lightblue;
    }
}

6. @mixin

다른 언어에서 함수를 만들어 코드의 재사용성을 높이는 것처럼 sass에서도 함수처럼 @mixin을 사용하여 패키지로 만들 수 있다.

@mixin button($wid:200px, $ht:50px, $btnBg:#fff, $fz:12px){
    display: block;
    width: $wid;
    height: $ht;
    background: $btnBg;
    border-radius: calc($ht / 2);
    font-size: $fz;
    line-height: $ht;
    text-align: center;
}

 

사용 방법은 다음과 같다.

@include button($wid: 150px);

 

7. for 반복문

// for문
@for $i from 1 through 10 {
    &:nth-of-type(#{$i}) {
        transition-delay: $i * 0.3s;
    }
}