7. Pseudo Classes

#main-nav a:hover {

  background: #333;

}

는 다음과 같이 

a{

  &:hover{

    background: #333;

  }

}

float후에 사용되는 아래와 같은 것도 mixin으로 처리한후에 사용함.

@mixin clearFix{

  &:after{

    content: "";

    display: block;

    clear: both;

  }

}

8. Mathematical Operators

*, /, +, - 를 사용가능함.

width: (100% / 6) 

9. Creating a Grid with SASS Math

mixin과 math를 이용해서 grid를 자동으로 설정가능함.   동영상을 꼭보세요.

sass의 장점이 여기에서 나오기 시작합니다.

 

@mixin grid($cols, $mgn) {
    float: left;
    margin-right: $mgn;
    margin-bottom: $mgn;
    width: ((100% - (($cols - 1) * $mgn)) / $cols);
    &:nth-child(#{$cols}n) {
        margin-right: 0;
    }
}

 

10. Colour Functions

http://sass-lang.com/documentation/Sass/Script/Functions.html

 

lighten($deepBlue, 5)

complement($deepBlue)

 

11. The @Content Keyword

@content 는 말로 설명하기 어려우니 동영상을 꼭 보세요.

 

12. If Statements

멀티불 인자를 넘겨줄수도 있습니다.

@mixin mQ($arg...){
    @if length($arg) == 1{
        @media screen and (max-width: nth($arg, 1)){
            @content;
        }
    }
    @if length($arg) == 2{
        @media screen and (max-width: nth($arg, 1) and (min-width: nth($arg, 2))){
            @content;
        }
    }
}