[SCSS] 초기 세팅, 변수, 중첩

설치

npm install -g sass

CSS컴파일

sass style.scss style.css

SCSS 파일 자동 컴파일 설정(선택 사항)

sass --watch style.scss:style.css

• 이 명령어는 style.css파일을 감시하여 변경될 때마다 style.css로 자동 컴파일한다.

변수

#var.scss
$bg-color: blue;
$bg-hover: lightgreen;

@use 'var';

div {
    width: 200px;
    height: 200px;
    background: var.$bg-color;

    &:hover { // & : div로 보면 된다.
        background: var.$bg-hover;
    }
}

💡최신 Sass 버전에서는 @import 대신 @use를 권장한다. 

 

중첩

기존 CSS

.top-bar{height:80px;}
.top-bar > .container {background:red;}
.top-bar > .logo

SCSS

.top-bar {
    height: 80px;

    >.container {
        height: 100%;
        display: flex;
    }

    .logo {
        display: flex;
        align-items: center;
        padding: 0 10px;
    } 
}

접어가면서 사용할 수 있다.

 

중첩(+선택자)

CSS

.swiper{height:100px;}
.swiper .swiper-slide{font-size:1rem;}
.swiper .swiper-pagination{font-size:1rem;}
.swiper .swiper-scrollbar{font-size:1rem;}

SCSS

.swiper{
	height:100px;
	.swiper{
		&-slide{font-size:1rem;}
		&-pagination{font-size:1rem;}
		&-scrollbar{font-size:1rem;}
	}
}