SASS

 

SASS(Syntactically Awesome Style Sheets)는 css를 확장하여 몇 가지 편의성을 제공하는 스타일시트 언어이다.

sass 파일은 .scss로 저장되는데, 이 파일을 css로 컴파일하여 html 문서에 연결해야하는 다소의 불편이 따른다.

 

사용을 위해서 우선 sass를 설치해야 한다.

 

1. ubuntu에 sass 설치하기

$ sudo apt-get update $ sudo apt-get install sass

위와 같이 입력하면 sass가 설치된다.

 

2. 컴파일하기

$ sass name.scss name.css

2-1 자동 컴파일

 

파일을 수정할 때마다 컴파일을 하는 것은 귀찮고 불편한 일이다.

$ sass --watch name.scss:name.css

위와 같이 입력하면 ctrl+c 를 눌러 종료시킬 때까지 파일에 변동이 발생할 경우 자동으로 컴파일이 된다.

 

2-2 WSL에서 C: 에 접근하는 방법

 

윈도우에 ubuntu를 설치하는 경우, 윈도우로 작업하던 파일을 ubuntu를 통해서 보려면

 

시작위치 (/home/사용자이름) 에서 다음과 같이 입력한다.

 

$ cd ../../mnt/c

 

3. sass의 주요특징

 

1) variable

 

$color는 색상에 대한 정보를 담고 있는 변수이다.

 

이 변수를 이용하면 일괄적으로 여러 요소들의 색상을 변경할 수 있다.

$color: green;

ul {
	font-size: 14px;
	color: $color;
}

ul > ol {
	font-size: 18px;
	color: $color;
}

2) nesting

 

하나의 컨테이너 안에 paragraph 와 unordered list가 존재하고 각 요소의 스타일을 변경하려고 한다.

 

css의 경우

div {
	font-size: 20px;

	div p{
		color:blue;
	}

	div ul{
		color:green;
	}
}

 

sass의 경우

div {
	font-size: 20px;

	p{
		color:blue;
	}

	ul{
		color:green;
	}
}

 

 

3) inheritance

 

css의 경우 공통적으로 가지는 속성에 대해서 기술한 뒤, 각각의 고유한 특성에 대해 기술하여야 하는 반면

 

.msg, .success, .fail {
	font-family: sans-serif;
    font-size: 20px;
	border: 1px solid black;
	padding: 10px;
}

.success {
	background-color: green;
}

.fail {
	background-color: red;
}

 

sass에서는 msg를 상속하는 것만으로 공통 속성을 가지게 된다.

 

%msg { /* generic message */
	font-family: sans-serif;
    font-size: 20px;
	border: 1px solid black;
	padding: 10px;
}

.success {
	@extend %msg;
	background-color: green;
}

.fail {
	@extend %msg;
	background-color: red;
}

.normal {
	@extend %msg;
	background-color: white;
}

 

실행결과