TSL : 2020-03-25

swimmingkiim·2020년 3월 25일
0

Today Swimming Learned

목록 보기
5/5
post-thumbnail

요약

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 : 검정색 첨가
profile
Enjoy my coding

0개의 댓글