Sass 기초 강의

Sass(Syntanctically Awesome StyleSheets)

CSS의 유지보수 + 코드 복잡도의 단점을 극복하기위해 만든 CSS 확장 언어  
CSS 전처리기  
\=> 코드 수정, 조각 재사용 편리  

1. .Sass에 맞게 코드를 작성
2. Sass 전처리기를 걸처 .css로 재탄생 (컴파일)

왜 쓸까?
간결하고 빠르게 코드를 작성할 수 있기 때문

SCSS는 Sass의 하위개념

.scss에는 css 구문을 전부 호환!

명령어 인터페이스

sass 설치 : npm install -g sass
버전 확인 : sass --version
컴파일 : sass 폴더/파일.scss:폴더/파일.css
라이브 싸스 컴파일러랑 다른점? 라이브!
라이브모드를 하고싶다면 : sass --watch 폴더/파일.scss:폴더/파일.css

압축스타일 만들기 (빌드 결과의 용량 경량화)
sass --style compressed 폴더/파일.scss:폴더/파일.css

주석

CSS의 주석을 그대로 사용할 수 있다 (/* */) => 보통 여러줄 짜리 주석을 달때 사용
한줄 짜리라면 //을 사용하여 주석처리 한다 (최종 css 파일에 반영 안된다)

중접

선택자를 거로 다른 선언무에서 계속 반복해 쓰지 않고 서로 중첩하여 쓸 수 있다.(컴파일 하면서 반영)
지나친 중첩은 가독성을 떨어뜨릴 수 있다.

div {  
    p {  
        span{  
        }  
    }  
}  

• 단축속성 : 여러가지 css 속성의 값을 함께 지정할 수 있는 속성, 같은 주제를 가진 여러 공통속성을 묶기 위해 정의하는 속성.
  => Sass에서는 중첩하여 단축속성의 하위 속성을 그룹화 할 수 있다.

p {  
    font: {  
        family: sans-serif;  
        size: 1em;  
        style: normal;  
        weight: 900;  
    };  
}  

상위선택자 참조하기 &
&을 사용하면 상위 선택자 참조 가ㅓ능
의사클래스를 선택하고자 할 때 + 서로 다른 클래스에 서로다른 스타일을 지정할 떄도 사용가능

button {  
    &:active{  
        background-color: red;  
    }  
}  

변수 $

같은 속성값을 자주 사용할 수록 코드가 무거워지고 수정이 어렵다.
변수를 지정하여 재사용 정보를 저장할 수 있다!
컴파일하면 보이지 않는다!
-이름은 직관적으로 선호!
-특수문자는 - _ 만 사용 가능
-가독성을 위해 납용을 금물

$main-color: red;  

div{  
    &:nth:child(1){  
        color: $main-color;  
    }  
}  

믹스인 @mixin

동일한 스타일을 반복해서 사용해야할 경우, 사이트 전체에서 재사용할 스타일 그룹을 정의 할 수 있다.
인자를 취할 수 있다. 괄호와 함께 사용하면 인자가 정의되고 개수 제한은 없다.
인자를 기본값을 정의해 두면, 인자 전달 여부에 따라 선택적으로 스타일이 결정된다

@mixin 이름($font-color $bg-color:yellow) {  
    font-size: 18px;  
    color: $font-color;  
    background-color: $bg-color;  
}  


h1 {  
@include 이름(red)  
}  

컨탠트 @content

믹스인 내부에 @content가 있다면 원하는 부분에 스타일 블록을 전달 할 수 있다.

$color: red;  

@mixin colors($color: blue) {  
  // Mixin의 범위  
  @content;  
  background-color: $color;  
  border-color: $color;  
}  

div {  
  @include colors() {  
    // 스타일 블록이 정의된 범위  
    color: $color;  
  }  
} 

출력

div {  
  color: red;  
  background-color: blue;  
  border-color: blue;  
}

@import

외부에서 가져온 Sass 파일을 모두 단일 CSS 파일에 병합

@extend

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우
원치않은 부작용이 있을 수 있으니 권장하지 않음 mixin 으로 대체하자

.btn {  
  padding: 10px;  
  margin: 10px;  
  background: blue;  
}  
.btn-danger {  
  @extend .btn;  
  background: red;  
}  

조건문 @if  

@if (조건1) {  
  /* 조건1이 참일 때 구문 */  
} @else if (조건2) {  
  /* 조건2가 참일 때 구문 */  
} @else {  
  /* 모두 거짓일 때 구문 */  
}

반복문 @for

변수는 관례상 $i를 사용합니다

@for $i from 1 through 3 {  
  .through:nth-child(#{$i}) {  
    width : 20px \* $i  
  }  
}

출력

.through:nth-child(1) { width: 20px; }  
.through:nth-child(2) { width: 40px; }  
.through:nth-child(3) { width: 60px; }  

@for $i from 1 to 3 {  

.to:nth-child(#{$i}) {  
    width : 20px \* $i  
  }  
} 

출력

.to:nth-child(1) { width: 20px; }  
.to:nth-child(2) { width: 40px; }