CSS - Sass(SCSS)

설치

npm install -g sass

 

사용법

sass --watch style.scss:style.css

sass --watch .:.

: 현재 디렉토리의 sass 파일을 css파일로 컴파일

문법

1. 중첩 ( Nesting )

/* style.scss */
#navbar {
	width:80%;
	height:23px;
	
	ul{ list-style-type: none; }
	li{
		float:left;
		a { font-weight:bold; }
	}
}

/* style.css */
#navbar {
	width:80%;
	height:23px
}

#navbar ul {
	list-style-type:none;
}

#navbar li {
	float:left;
}

# navbar li a {
	font-weight: bold;
}

셀렉터 뿐만 아니라 이름의 중복도 줄일 수 있다.

/* style.scss */
.fakeshadow {
	border:{
		style:solid;
		left:{
			width:4px;
			color:#888;
		}
		right:{
			width:2px;
			color:#ccc;
		}
	}
}

/* style.css */
.fakeshadow {
	border-style:solid;
	border-left-width:4px;
	border-left-color:#888;
	border-right-width:2px;
	border-right-color:#ccc;
}

 

2. 부모 엘리먼트를 참조 ( Parent References )

/* style.scss */
a {
	color:#ce4dd6;
	&:hover { color:#ffb3ff; }
	&:visited { color:#c458cb; }
}

/* style.css */
a {
	color:#ce4dd6;
}
a:hover {
	color:#ffb3ff;
}
a:visited {
	color:#c458cb;
}

 

3. 변수 ( Variables )

: 변수이름은 '$'로 시작해야 하고, 변수의 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 컬러

/* style.scss */
$main-color: #ce4dd6;
$style: solid;

#navbar {
	border-bottom:{
		color:$main-color;
		style:$style;
	}
}

a {
	color: $main-color;
	&:hover { border-bottom: $style 1px; }
}

/* style.css */
#navbar {
	border-bottom-color: #ce4dd6;
	border-bottom-style: solid;
}

a {
	color:#ce4dd6;
}
a:hover {
	border-bottom: solid 1px;
}

 

4. 연산자와 함수 ( Operations and Functions )

: 연산자( +,-,*,/,% )와 함수를 이용해서 엘리먼트의 크기나 좌표 또는 색상을 동적으로 변경가능

/* style.scss */
#navbar {
	$navbar-width:800px;
	$items:5;
	$navbar-color:#ce4dd6;

	width:$navbar-width;
	border-bottom: 2px solid $navbar-color;

	li{
		float:left;
		width:$navbar-width/$items - 10px;

		background-color:
			lighten($navbar-color, 20%);
		&:hover{
			background-color:
				lighten($navbar-color, 10%);
		}
	}
}

/* style.css */
#navbar {
	width:800px;
	border-bottom:2px solid #ce4dd6;
}
#navbar li {
	float:left;
	width:150px;
	background-color:#e5a0e9;
}
$navbar li:hover{
	background-color:#d976e0;
}

 

5. Interpolation

: '#{}'를 사용해서 변수로 속성이나 선택자의 이름을 동적으로 치환할 수 있다.

/* style.scss */
$side:top;
$radius:10px;

.rounded-top {
	border-#{$side}-radius: $radius;
	-moz-border-radius-#{$side}: $radius;
	-webkit-border-#{$side}-radius: $radius;
}

/* style.css */
.rounded-top {
	border-top-radius: 10px;
	-moz-border-radius-top: 10px;
	-webkit-border-top-radius: 10px;	
}

 

6. Mixins

: 선택자와 속성을 재활용할 수 있도록 해주는 방법

  선언할 때는 '@mixin'으로 시작하고

  호출할 때는 '@include'을 사용

/* style.scss */
@mixin rounded-top {
	$side:top;
	$radius:10px;

	border-#{$side}-radius: $radius;
	-moz-border-radius-#{$side}: $radius;
	-webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded-top; }
#footer { @include rounded-top; }

/* style.css */
#navbar li {
	border-top-radius: 10px;
	-moz-border-radius-top: 10px;
	-webkit-border-top-radius: 10px;
}
#footer {
	border-top-radius: 10px;
	-moz-border-radius-top: 10px;
	-webkit-border-top-radius: 10px;
}

 

7. 인자 ( Arguments )

: Mixin의 진정한 힘은 인자를 통해서 나타나는데, 인자는 Mixin 안에서만 사용되는 지역변수를 의미한다.

  인자는 기본 값을 가질 수 있다.

/* style.scss */
@mixin rounded($side, $radius: 10px) {
	border-#{$side}-radius: $radius;
	-moz-border-radius-#{$side}: $radius;
	-webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded(top); }
#footer { @include rounded(top,5px); }
#sidebar { @include rounded(left,8px); }

/* style.css */
#navbar li {
	border-top-radius: 10px;
	-moz-boder-radius-top: 10px;
	-webkit-border-top-radius: 10px;
}
#footer {
	border-top-radius: 5px;
	-moz-border-radius-top: 5px;
	-webkit-border-top-radius: 5px;
}
#sidebar {
	border-left-radius: 8px;
	-moz-border-radius-left: 8px;
	-webkit-border-left-radius: 8px;
}

 

8. 불러오기 ( @import )

: Sass는 import를 위한 이름규칙이 있다. 불러지는 파일은 partials라고 불리고, 이 파일은 '_'로 이름이 시작된다.

  예를 들면 _rounded.scss와 같은 식이다. @import 'rounded'로 사용

/* _rounded.scss */
@mixin rounded($side, $radius: 10px) {
	border-#{side}-radius: $radius;
	-moz-border-radius-#{$side}: $radius;
	-webkit-border-#{$side}-radius: $radius;
}

/* style.scss */
@import "rounded";

#navbar li { @include rounded(top); }
#footer { @include rounded(top,5px); }
#sidebar { @include rounded(left,8px); }

/* style.css */
#navbar li {
	border-top-radius: 10px;
	-moz-border-radius-top: 10px;
	-webkit-border-top-radius: 10px;
}
#footer {
	border-top-radius: 5px;
	-moz-border-radius-top: 5px;
	-webkit-border-top-radius: 5px;
}
#sidebar {
	border-left-radius: 8px;
	-moz-border-radius-left: 8px;
	-webkit-border-left-radius: 8px;
}

 

sass / scss 컴파일러

vscode Extensions - Live Sass Compiler 설치

 

출처 : https://www.youtube.com/watch?v=1T75ySKsHpc 

        ( 생활코딩 유투브 SASS문법 1 ~ 3 )