[Sass/SCSS] 3. Sass/SCSS 문법

 

(1) 주석(Comment)

Javascript와 동일한 두 가지 사용.

// Compile되지 않는 주석
/* Compile되는 주석 */

그러나, Sass의 경우 여러 줄의 주석을 사용할 때 줄의 앞에 *가 붙어야 하고 같은 선상에 있어야 함.

/* 여러 줄의 주석을
 * 사용할 경우 앞의 *를
 * 맞춰 주어야 합니다. */

SCSS는 기존 CSS와 동일하게 사용함.

 

 

(2) 중첩

if (SCSS) {

.component {
	width: 100%;
    .content {
    	float: left;
        .box {
        	float: left;
        }
    }
}

} else if (SCSS to CSS) {

.component {
	width: 100%;
}
.component .content {
	float: left;
}
.component .content .box {
	float: left;
}

}

 

(3) 상위 선택자 참조

① 중첩 시, &는 부모 선택자를 치환함.

if (SCSS) {

.box1 {
	width: 100%;
    &.box_inner {
    	color: red;
    }
}
ul {
	li{
    	&:nth-of-child(1) {
        	padding-left: 10px;
        }
    }
}

} else if (SCSS to CSS) {

.box1 {
	width: 100%;
}
.box1 .box_inner {
	color: red;
}
ul li:nth-of-child(1) {
	padding-left: 10px;
}

}

 

② 응용

if (SCSS) {

.fw {
  &-s { font-weight: 300; }
  &-m { font-weight: 500; }
  &-l { font-weight: 700; }
}

} else if (SCSS to CSS) {

.fw-s {
	font-weight: 300;
}
.fw-m {
	font-weight: 500;
}
.fw-l {
	font-weight: 700;
}

}

 

③ 중첩 벗어나기 @at-root

중첩에서 벗어나고 싶을 때 이용.

중첩 안에서 생성하지만 중첩의 밖에서 사용해야 유용합니다.

if (SCSS) {

ul {
	$w: 100px;
    $h: 200px;
    li {
		weight: $w;
        height: $h;
    }
    @at-root .box {
    	weight: $w;
        height: $h;
    }
}

} else if (SCSS to CSS) {

ul li {
	width: 100px;
    height: 200px;
}
.box {
	width: 100px;
    height: 200px;
}

}

 

(4) 속성 중첩

margin-, padding-, font- 등 CSS의 속성 중 앞 부분이 같은 것들을 묶을 수 있습니다.

if (SCSS) {

.content {
  margin: {
    top: 5px;
    left: 10px;
  };
  padding: {
    top: 10px;
    right: 5px;
  };
}

} else if (SCSS to CSS) {

.content {
	margin-top: 5px;
    margin-left: 10px;
    padding-top: 10px;
    padding-right: 5px;
}

}

 

(5) 변수

변수를 지정해 반복 사용이 가능합니다.

변수의 앞에는 $로 표시.

$변수이름: 값;

if (SCSS) {

$default-color: #f00;
$img-url: "/assets/images/";
$w100: 100%;

.content {
	width: $w100;
    background: $default-color url($img-url + "background.jpg");
}

} else if (SCSS to CSS) {

.content {
	width: 100%;
    background: #f00 url("/assets/images/background.jpg");
}

}

 

① 변수를 변수에 재할당 가능

② !global (전역 변수 설정)

    - 변수를 선언할 때 마지막에 !global 을 붙이면 됩니다.

    - 기존에 같은 변수가 있었을 경우 덮여서 적용됩니다.

③!default (초기 값 세팅)

    - 변수를 선언하는 마지막에 !default 를 붙이면 됩니다.

    - 같은 이름의 기존 변수가 상단에 있을 경우 후발 변수는 사용하지 않고 먼저 선언된 초기 값을 사용하겠다는 표현.

    - Bootstrap같은 Sass 라이브러리 연결 시 덮어쓰임 방지로 사용하게 될 수 있습니다.

 

(6) #{} 문자 보간

#{}를 사용하여 코드의 모든 곳에 변수 값 지정 가능

if (SCSS) {

$google-font: unquote("Noto+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$google-font}");

} else if (SCSS to CSS) {

@import url("http://fonts.googleapis.com/css?family=Noto+Sans");

}

① unquote()는 Sass의 내장된 함수로 문자에서 따옴표를 제거합니다.