SASS란 무엇인가요
SASS(Syntactically Awesome Style Sheets)는 CSS 언어에 대해서 보수적인 입장을 취한다. 즉, CSS의 역할에서 부족한 것을 개선해주는 역할을 한다. 큰 프로젝트에서 유용하게 쓰일 수 있으며 코드의 재활용성을 높여주고, 코드의 가독성도 높여주는 역할을 한다.
컴파일러 선택
컴파일러 선택에는 Ruby Sass 혹은 LibSass가 있다.
-
Ruby Sass를 선택하는 경우는 Ruby on Rails 프로젝트에 적합하다.
Ruby Sass 는 gem install sass 로 설치한다. sass style.scss style.css 로 컴파일한다. -
Ruby 프로젝트가 아닐 경우, LipSass 사용이 좋다. 즉, Node.js를 사용하는 경우는 node-sass를 선택한다.
NPM 을 통해서 $ npm install -g node-sass 로 설치한다. $ node-sass -v 를 통해서 버전확인.
SASS와 SCSS
SASS의 경우 예전 문법으로 들여쓰기 문법을 사용한다.
- 중괄호 {} 대신 들여쓰기로
- 세미콜론 ; 대신 줄 바꿈
SCSS의 경우 SASS의 문법을 대대적으로 개선하여 새로 추가된 것이 SCSS이다. 문법적으로 변화한 것이다.
#title p {
color: #ececec;
width: 50%;
}
//을 이용해서 라인단위로 주석처리 가능공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 있기 때문에 SCSS를 사용하는 것을 추천한다.
또한 SCSS 문법으로 작성한 SASS 파일은 .scss 확장자를 사용한다.
기본문법
1.Variables (변수)
변수 선언은
$변수명: 속성값;SCSS
$font-default: pink;
$color-point: blue;
body {
font: 30px solid $font-default;
color: $color-point;
}CSS
body {
font: 30px solid pink;
color: blue;
}2.Nesting (중첩)
기본적인 구조
SCSS
.contanier {
width: 100%;
h1: {
color: red;
}
}CSS
.container {
width: 100%;
}
.container h1 {
color: red;
}상위요소 참조
&을 사용하면 현재 블럭이 적용되는 셀렉터를 참조(지환)한다.
SCSS
a {
text-decoration: none;
&:hover { text-decoration: underline; }
}CSS
a { text-decoration: none; }
a:hover { text-decoration: underline; }3.Interpolatio(내삽)
#{..}을 사용해서 문자열 내에 표현식의 결과를 내삽하거나, 다른 변수의 내용으로 치환이 가능하다.
SCSS
$name: foo;
p.#{$name} {
border-color: blue;
&.#{$name} { color: red; }
}
.someclass {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}CSS
p.foo {
border-color: blue;
}
p.foo { color: red; }
.someclass {
font: 12px/30px;
}4.Import
@import 지시어를 이용해서 부분화 된 다른 SCSS 파일을 불러온다.
@import 'SCSS파일명';5. Extend(상속)
SCSS
.box {
border: 1px solid gray;
margin: 20px;
}
.two-box {
@extend .box;
border: 2px solid green;
}CSS
.box, .two-box {
border: 1px silid gray;
margin: 20px;
}
.two-box {
border: 2px solid green;
}6.Mixin
재사용 할 CSS 선언 그룹을 만들어서 사용하는 것을 말한다. 유용한 기능이다.
선언 @mixix mixin명(변수명){} / 호출 @include mixin명(변수명){}SCSS
@mixin mixin {
border: 1px solid red;
padding: 10px;
}
.mix {
@include mixin;
background-color: blue;
}CSS
.mix {
border: 1px solid red;
padding: 10px;
background-color: blue;
}7.Operators(연산자)
수학 연산자, 컬러 연산자, 문자열 연산자, 불린 연산자, 리스트 연산자가 있다.
그 중 한가지 예로
SCSS
article[role="main"] {
width: 600px / 960px * 100%;
}CSS
article[role="mail"]{
width: 62.5%;
}8.Function(함수)
@function 지시어를 통해 정의 그리고 이 내부에서 @return 지시어로 값을 내보낸다.
SCSS
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n){
@return $n * $grid-width + ($n -1) * $gutter-width;
}
#sidebar { width: grid-width(5);
}참고사이트
