SASS 문법

1) Variables ($)

변수선언은 '$'으로 시작.

변수의 값으로는 문자, 숫자, 컬러가 올 수 있다.

$변수명 : 속성값;

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2) Nesting

부모자손 선언 - tree구조, 포함관계, 중첩적 선언

꺾쇠 선택자를 통해 직접선택도 가능( ul > a)

& : 상위요소(자기자신)을 뜻함 = this

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav {
& > ul { /* 이곳의 &은 nav */
margin:0;
padding:0;
list-style:none;
& > li{ /* 이곳의 &은 ul */
width:100%;
}
}
}

클래스명에도 &을 활용할 수 있다.

#box { &-tit { /* #box-tit */ padding:0; } }

-> 코드의 반복을 줄일수있다.

**미디어쿼리 사용시 아래의 두가지 방법으로 사용가능

@media screen and(max-width:500px){    #box{       font-size:16px;    }    }  @media screen and(min-width:501px;) and(max-width:720px){    #box{       font-size:24px;    }    }

#box{       @media screen and(max-width:500px){     font-size:16px;  }       @media screen and(min-width:501px;) and(max-width:720px){       font-size:24px;  }    }

3) Mixins

반복되는 속성을 묶어서 함수로 만들어 재사용할 수 있다.

@mixin linkStyle($textColor, $textDeco:none) {

color:$textColor;

text-decoration:$textDeco;

}

정의한 mixin은 @include를 통해 사용할수있다.

@mixin 함수명(인자1, 인자2, … ) {              재사용하길 원하는 속성 : 인자;      }

mixin 사용법

@include 함수명(값); /* 값이 빈값일때 정의된 함수의 기본값이 적용됨 */

vendor prefix를 전부 일일히 쓰지않고 함수를 만들어 쓸수있다..!!!

@mixin transform($property) {  -webkit-transform:$property;  -ms-transform:$property;  -moz-transform:$property;  -o-transform:$property;  transform:$property;  }

.wrap { @include transform(rotate(30deg)); }

4) Extend

똑같은 코드를 묶어서 재사용할수있음. 단, 속성과 값이 같을 때

%로 정의한다.

%boxShape {     border-radius: 20px;     border: 3px solid #f00;     box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.75);  }

 

#box1 {                 @extend %boxShape;      }

5) Partials

sass 파일을 reset.css나 common.css처럼 그루핑하여 사용하는 법.

파일을 나누어 저장한 후 import하여 사용한다.

* scss파일을 만들때 파일명에 '_'로 시작해서 이름을 짓지 말 것, 컴파일이 안됨

-> 단, 변수나 믹스인등을  분리할 파일은 "_파일명.scss"로 저장한다(컴파일 안해도 되는 부분을 따로 떼내기 때문)

* colorhighlight와 컴파일 충동이 나니까 vscode에서는 사용중지 시키고 사용할것 -> colorize 확장으로 재설치!

@import "common";

6) if

@mixin txtBg($color) {     background-color:$color;       }   @mixin theme($mood) {       @if $mood == 'light' {          @include txtBg(red);       }       @else if $mood == 'dark' {          @include txtBg(black);       }       @else {         @include txtBg(blue);          }   }

/* 사용 */  #box1 {     @include theme('light');   }   #box2 {     @include theme('dark');     }    #box3 {     @include theme('mood1');     }

참고문서 : 

인프런 -  CSS에 날개를 달아주는 Sass (SCSS)

http://sass-lang.com/guide

https://designmeme.github.io/ko/blog/sass-awesome-docs/