SASS 개념정리

설치

• 루비 설치 http://rubyinstaller.org/
• cmd에 gem install sass를 입력해서 sass 컴파일러를 설치

사용법

• cmd에서 sass폴더가 있는 폴더로 경로 이동
• sass --wath sass파일이 있는 폴더:css파일이 있는 폴더
  

기본 문법

1. 중첩(Nesting)

  SASS

.wrap{
    width: 100px;
    height: 20px;
    ul{
    	list-style-type: none;
        li{
            float: left;
        }
    }
}

  CSS

.wrap{
    width: 100px;
    height: 20px;
}
.wrap ul{
    list-style-type: none;
}
.wrap ul li{
    float: left;
}

2. 부모 엘리먼트를 참조(Parent References)

  SASS

.wrap{
    width: 100px;
    height: 20px;
    & > ul{
    	list-style-type: none;
        li{
            float: left;
            &:nth-of-type(1){
                color: red;
            }
        }
    }
}

  CSS

.wrap{
    width: 100px;
    height: 20px;
}
.wrap > ul{
    list-style-type: none;
}
.wrap > ul li{
    float: left;
}
.wrap > ul li:nth-of-type(1){
    color: red;
}

3. 변수(Variables)

  SASS

$color_01: #f1f1f1;
$color_02: #007b5a;
.nav{
    background: $color_01;
}
.nav ul li{
    color: $color_02;
}

  CSS

.nav{
    background: #f1f1f1;
}
.nav ul li{
    color: #007b5a;
}

4. 보간법(Interpolation)

  SASS

$name : myClass;
$attr : border;
.#{$name}{ 
    #{$attr}-color : blue;
}

  CSS

.myClass{ 
    border-color : blue;
}

5. 믹스인(Mixin)

  SASS

@mixin position_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div{
    @include position_center;
}
span{
    @include position_center;
}

  CSS

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

6. 인자 (Arguments)

  SASS

@mixin position_center($top, $left: 50%){
    position: absolute;
    top: $top;
    left: $left;
    transform: translate(-50%, -50%);
}
div{
    @include position_center(20%);
}
span{
    @include position_center(40%, 10%);
}

  CSS

div{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}
span{
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translate(-50%, -50%);
}

7. 내용 (Content)

  SASS

@mixin tablet{
    @media screen and (max-width: 768px){
        @content;
    }
}
@include tablet{
    p{color: red;}
}

  CSS

@media screen and (max-width: 768px){
    p{color: red;}
}

8. 불러오기 (Import)

  _myMixin.scss

@mixin position_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

  SASS

@import 'myMixin';
div{
    @include position_center;
}
span{
    @include position_center;
}

  CSS

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

9. Extend

  SASS

.myClass{
    border: none;
}

.button{
    @extend .myClass;
    background-color: red;
}

  CSS

.myClass{
    border: none;
}

.button{
    border: none;
    background-color: red;
}

10. Placeholder

  SASS

%myClass{
    border: none;
}

.button{
    @extend %myClass;
    background-color: red;
}

  CSS

.button{
    border: none;
    background-color: red;
}

예제

• https://drive.google.com/file/d/1WNnYd-g_mP0eTc9WYP25hnx_-f_aaGVZ/view?usp=sharing