TSL : 2020-03-25

요약

sass 공부하기 (https://poiemaweb.com/sass-script)

Sass 공부하기

• sass에는 css에서 불가능한 연산, 변수 사용, 함수 등의 기능이 가능하다

1. data type

   • 숫자형(ex. 1.5em, 10%, 200px, 900)

   • 문자열(ex. "http://sass-lang.com", bold, sans-serif)

   • 컬러(ex. blue, #ffffff, rgba(255,0,0,0.5))

   • boolean(ex. true, false)

   • null(프로퍼티 값이 null인 변수가 사용되면 해당 룰셋은 출력되지 않는다)

   • list(공백 또는 콤마로 구분된 list. ex. margin: 0 auto; font-family: Helvetica, Arial, sans-serif)

   • map(JSON과 유사한 방식으로 map-get함수를 사용하여 원하는 값을 추출할 수 있다)

     // map
     $foundation-palette: (
       primary: #E44347,
       mars: #D7525C,
       saturn: #E4B884,
       neptune: #5147D7
     );
     
     .mars {
       color: map-get($foundation-palette, mars);
     }
     
     // => .mars { color: #D7525C; }
     // data type은 type-of로 얻어낼 수 있다.

2. 변수

   • //$variable_name: value;
     
     $font_color: #333;
     
     body {
         color: $font_color;
     }

   • 변수에는 scope가 존재한다.

     $width: 960px;  //전역변수
     
     #main {
         $color: blue; // #main과 그 하위 범위에서만 사용가능한 지역변수
         $height: 100px !global; //원래 지역변수인 $height를 전역변수화 하는 방법
     }

3. 연산자

   • 숫자 연산자( + - * / % == !=)

     $width: 100px;
     $height: 100px;
     $font-size: 15px;
     $line-height: 30px;
     
     #foo {
         width: $width + 10; // 110px
         height: $height + 10in; //1060px
     }
     #bar {
         width: $width + 10em; // error--> 고정적인 값과 상대적인 값끼리는 연산불가
         height: 5% + 10%; // 상대적인 값은 동일한 단위끼리만 연산 가능
         width: calc(25% - 5px); // 단 css3를 지원한다면 calc함수를 써서 연산 가능
     }
     /*
     css에서 "/"는 값을 분리하는 용도로 쓰인다. 그렇기 때문에 Sass에서 "/"를 나눗셈 연산자로 사용하려면 아래 3 조건 중 하나를 충족해야 가능하다.
     */
     #hello {
         width: $width / 2; // 변수에 대해 사용
         width: (100px / 4); // 괄호 안에서 사용
         width: 100px + 500px / 2px // 다른 연산의 일부로 사용
         font-size: #{$font-size}/#{$line-hieght} // 변수끼리의 나눗셈은 이렇게
     }

   • 컬러 연산자

     p {
         color: #000000 + #333333; //모든 산술 연산자는 컬러 값에도 사용할 수 있다.
         //두자리씩 계산하여 join(), R, G, B
         color: rgba(255, 0, 0, 0.84) + rgba(0, 255, 0, 0.25);
         //alpha값은 연산되지 않는다.
         //결과 = rgba(255, 2555, 0, 0.84)
         //alpha값을 바꾸고 싶으면 opacify 또는 transparentize함수를 써야 한다
     }

   • 문자열 연산자

     // + 연산자는 js처럼 문자열 연결이 가능하다. 따옴표가 있는 것, 없는 것 둘 다 처리 가능하다. 단, 두가지가 혼용되어 있을 경우 왼쪽의 형식을 따른다.
     p:before {
         content: "foo" + bar; //"foobar"
         font-family: sans- + "serif"; //sans-serif
     }

   • boolean 연산자

     : && || ! 이 있고, if 또는 @if에서 쓰인다.

   • 리스트 연산자

     : 별도의 연산자는 없지만 리스트 함수를 사용하여 연산처리를 한다.

4. Interpolation(#{variable_name})

   • 변수의 값을 마치 JSON.stringify하듯 문자열로 넣는 방법을 말한다. 따라서 연산의 대상이 되지 않는다. 이 방법을 통해 div.#{name}, ${font}-size 등 selector , property name에도 사용한다.

5. Ampersand (&)

   • &는 부모요소를 뜻하는 selector이다.

     #main {
         &.title {
             color: #ffffff;
         }
         //& > span이 아니라 그냥 >이다
         > span {
             color: blue;
         }
     }

6. !default

   //!default 는 할당되지 않은 변수의 초기값을 설정한다.
   // 만약 !default를 가진 변수명으로 새로이 변수 선언이 되지 않은 채 그 변수를 사용하면 default값이 적용된다.
   //후에 같은 변수명으로 변수가 선언되면 default값은 적용되지 않는다.
   
   $font-size: 30px !default;
   
   p {
       font-size: $font-size; // default값 적용됨
   }
   
   span {
       $font-size: 15px;
       font-size: $font-size; // default값 적용 안됨, 15px.
   }
   

7. @import

8. @extend(되도록이면 사용 자제할 것)

9. Placeholder selectors(%, @extend 전용)

10. if(condition, if_true, if_false) //--> 삼항 연산자와 비슷

11. @if condition {
        //content
    } @else if condition {
        //content
    } @else {
        //content
    }

12. @for $i from 1 through 3 {
        [use $i] 
    }

13. //list
    @each $item in list1, list2, list3 {
        [use $item]
    }
    
    //map
    @each $key, $val in (key1:val1, key2:val2, key3:val3) {
        [use $key, $val]
    }

14. $i: 1;
    @while $i < 6 {
        [use $i]
        $i: $i + 1;
    }

15. @mixin test {
        [define frequently used setting]
    }
    
    @mixin parameter($width: 100%) {
        [use $width]
    }
    
    .box {
        @include test;
       	@include parameter(); // 인자를 넘겨주지 않으면 초깃값으로 설정됨.
        [define extray property]
    }

16. Sass Framework Library 사용하기

    • Bourbon
    • Compass
    • Susy

17. @function it_returns_value_not_style($parameter) {
        @return [value];
    }
    
    #container {
        width: it_returns_value_not_style(100);
    }

18. 주석은 /* */ 과 // 모두 사용가능하나 //은 컴파일 후 사라진다.

• Built-in Functions

1. Number Functions

   percentage(100px/50px) //=> result : 200%
   
   round(10.4px) //=> result : 10px
   round(10.7px) //=> result : 11px
   
   floor(10.4px) //=> result : 10px
   floor(10.7px) //=> result : 10px
   
   abs(10px) //=> result : 10px
   abs(-10px) //=> result : 10px

2. Introspection Functions

   type-of(1px) //=> result : number
   type-of(#ffffff) //=> result : color
   type-of(hello) //=> result : string
   
   unit(100) //=> result : ""
   unit(100px) //=> result : "px"
   unit(10px * 5em) //=> result : "em*px"
   
   unitless(100) //=> result : true(단위가 있는가, 없는가)
   unitless(100px) //=> result: false
   
   comparable(2px, 1px) //=> result : true(2개의 값이 +, -, 비교 가능한지 확인)
   comparable(2px, 3em) //=> result : false
   comparable(2cm, 1mm) //=> result : true

3. String Functions

   quote("foo") //=> result : "foo"
   quote(foo) //=> result : "foo"
   
   unquote("foo") //=> result : foo
   unquote(foo) //=> result : foo

4. List Functions

   //scss의 인덱스는 1부터 시작
   length(11px) //=> result : 1
   length(11px, 3px, 5px) //=> result : 3
   length((width: 10px, height: 20px)) //=> result : 2
   
   nth(11px, 1) //=> result : 1
   nth(11px, 3px, 5px, 3) //=> result : 5px
   nth((width: 10px, height: 20px), 2) //=> result : height 20px
   
   index(1px solid red, solid) //=> result : 2
   index(1px solid red, dashed) //=> result : null
   index((width: 1px, height: 5px), (height 5px)) //=> result : 2
   
   append(1px 2px 3px, 4px) //=> result : 1px 2px 3px 4px
   append((blue, red), black) //=> result : blue, red, black
   append(1px 2px, 3px, 4px) //=> result : 1px 2px (3px 4px)
   append(1px 2px 3px, comma) //=> result : 1px, 2px, 3px
   append((blue, red), black, space) //=> result : blue red black
   
   join(10px 20px, 30px 40px) //=> result : 10px 20px 30px 40px
   join(10px, 20px, comma) //=> result : 10px, 20px
   join(10px, 20px) //=> result : 10px 20px
   join((blue, red), (#abc, #def), space) //=> result : blue red #abc #def
   
   zip(1px 1px 3px, solid dashed solid, red green blue) //=> result : 1px solid red, 1px dashed green, 3px solid blue (복수의 리스트를 각자의 순서에 맞추어 재결합)

5. Map Functions

   //key로 value 취득
   map-get(("foo":1, "bar":2), "bar") // result : 2
   map-get(("foo":1, "bar":2), "foo") // result : 1
   map-get(("foo":1, "bar":2), "baaaam") // result : null

6. Color Functions

   //색상 변경
   color: adjust-hue(#303030, 20%);
   
   //채도 변경
   color: saturate(#303030, 20%);
   color: desaturate(#303030, 20%);
   
   //휘도 변경
   color: lighten(#303030, 10%);
   color: darken(#303030, 20%);
   
   //투명도 변경
   color: rgba($303030, .7);
   
   //alpha 변경
   color: opacify(#303030, 0.3); //=> result : 0.3만큼 더 불투명해짐
   color: transparentize(#303030, 0.3); //=> result : 0.3만큼 더 투명해짐
   
   //Tint & Shade
   color: tint(#303030, 10%); //=> result : 흰색 첨가
   color: shade(#303030, 10%); //=> result : 검정색 첨가