SASS

• SASS : CSS 내 반복되는 내용을 줄이고 효율적으로 스타일시트 관리
• SASS는 전처리기 : CSS가 만들어지기 전에 이런저런 일을 먼저 해준다 (개발자-브라우저 중간에 껴서)
• SCSS : SASS 3버전에서 좀 더 CSS 구문과 호환되도록 만듦 (SASS는 SCSS 구문을 사용하는 것을 말함)
• CSS 에서는 쓸 수 없는 변수, 반복문, 조건문 등을 쓸 수 있다.
• 컴파일 : SCSS를 브라우저가 읽을 수 있는 코드(CSS)로 바꾸기
• npm(패키지 관리해주는 매니저) 로 sass 컴파일러 설치 
• 터미널에서 sass <변환할 scss 파일명> <변환될 css 파일명> 입력 
  • sass style.scss style.css
  • css 구문으로 된 style.css 파일 생성
• SASS watch 옵션
  • --watch 플래그를 넣어 sass가 해당 파일을 감시 ( 폴더감시도 가능 )
  • style.scss 에 변화가 생기면 알아서 컴파일 하게끔 
  • sass --watch style.scss style.css
• .map 파일 역할
  • 소스맵 파일 : 원래 소스가 어디 있는지 보여주는 지도 (개발자는 원본 소스로 작업하기 때문에)
• 문법
  • SASS 와 SCSS의 차이 : {} 와 ; 의 유무
    • SASS는 선택자의 유효범위를 들여쓰기로 구분
    • SCSS는 {}의 범위로 구분 
  • 주석
    • SASS 

      • /* 컴파일 되는
         * 여러 줄
         * 주석 */  //*의 라인을 맞춰줘야함(얘는 컴파일 되지 않는 주석)

    • SCSS

      • /* 컴파일 되는
        여러 줄
        주석 
        */	//각 줄에 *이 없어도 됨.

  • 데이터 종류
    • Number : 숫자에 단위가 있거나 없다.
    • Strings : 문자에 "가 있거나 없다.
    • Colors
    • Booleans
    • Nulls : 속성 값으로 null이 사용되면 컴파일하지 않는다.
    • Lists : ()을 붙이거나 붙이지 않는다.
    • Maps : ()을 꼭 붙여야 한다.
  • 중첩(Nesting) 
    • 상위 선택자의 반복을 피할 수 있다.

    • .section {
        width: 100%;
          .list {
            padding: 20px;
              li {
                float: left;
              }
          }
      }

    • .section {
        width: 100%;
      }
      .section .list {
        padding: 20px;
      }
      .section .list li {
        float: left;
      }

  • 상위 선택자 참조
    • 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환한다.

    • .btn {
        position: absolute;
        &.active {
          color: red;
        }
      }

    • .btn {
        position: absolute;
      }
      .btn.active {
        color: red;
      }

    • @at-root : 중첩 벗어나기 ( 중첩 안에서 생성, 밖에서 사용할 경우에 유용 )

    • .list {
        $w: 100px;
        $h: 50px;
        li {
          width: $w;
          height: $h
        }
        @at-root .box{
          width: $w;
          height: $h;
        }
      }

    • .list li {
        width: 100px;
        height: 50px;
      }
      .box {
        width: 100px;
        height: 50px;
      }

    • w와 h를 .list 안에서 선언했기 때문에 .box에 사용하기 위해서는 list 안에서 정의해주어야 함. 하지만 중첩으로 사용할 것이 아니므로 @at-root를 사용해야 한다.
  • 중복되는 속성
    

    • .box{
        font: {
          weight: bold;
          size: 10px;
          family: sans-serif 
        }; 
        margin: {
          top: 10px;
          left: 20px;
        };
      }

  • 변수(Variables)
    • 변수 이름 앞에는 항상 $를 붙인다.
    • 유효 범위 : 선언된 블록( {} ) 내에서만 유효범위를 가진다.
    • 변수에 변수를 할당할 수 있다. 
    • 전역 변수로 설정하는 플래그 : !global
    • 초깃값 설정  플래그 : !default 

    • $color: #000;
      
      .box1 {
        $color: #111 !global	//변수의 유효범위를 전역으로 설정
        background: $color;
      }
      
      $color-primary: red;
      
      .box {
        $color-primary: blue !default;	//할당되지 않은 변수의 초깃값을 설정함. 변수와 값을 설정하지만, 기존 변수가 있을 경우에는 현재 설정하는 변수의 값은 사용하지 않겠다.
        background: $color-primary;
      }

  • #{} (문자 보간)
    • #{}을 사용해서 코드의 어디든지 변수 값을 넣을 수 있다.

    • $family: unquote("Droid+Sans");	//unquote()는 문자에서 따옴표 제거
      @import url("http://fonts.googleapis.com/css?family-#{$family}");

  • 가져오기 (import) 
    • @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다.
    • 기본적으로는 Sass 파일을 가져오는데, CSS 규칙으로 컴파일 되는 경우도 있음
      • 파일 확장자가 .css일 때
      • 파일 이름이 http:// 로 시작
      • url() 이 붙었을 경우
      • 미디어쿼리가 있는 경우
  • 연산
    • 산술 연산자 : '+',  '-',  '*',  '/',  '%'
    • 비교연산자 : '==',  '!=',  '<',  '>',  '<=',  '>='
    • 논리 연산자 : and, or, not
    • 기본 단위는 px
    • 상대적 단위 연산 calc()사용 - calc(50% - 20px)
    • " / " 연산 조건 (css가 속성 값의 숫자를 분리하는 방법으로 " / "를 허용하므로 연산이 안될수도 있음)
      • 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
      • 값이 ()로 묶여있는 경우
      • 값이 다른 산술 표현식의 일부로 사용되는 경우

      • div {
          $x: 100px;
          width: $x / 2;	// 변수에 저장된 값을 나누기
          height: (100px / 2);	// ()로 묶어서 나누기
          font-size: 10px + 12px / 3; 	// 더하기 연산과 같이 사용
        }

    • 문자 연산 : "Hello" + World -> "Hello World" ( 첫 번쨰 피연산자에 "가 붙어있다면 연산 결과를 따옴표로 묶고 붙어있지 않다면 연산 결과도 따옴표 처리를 하지 않는다.
    • 색상 연산 : #123456 + # 345678 (RGB 따로 연산)
  • 재활용(Mixins)
    • 재사용 할 CSS 선언 그룹을 정의
    • 선언하기 (@mixin)
      • 함수처럼 인수(Arguments) 를 가질 수 있다.
      • 인수에 기본값 지정 가능
      • 가변 인수 ($매개변수...)
        

        • //  SCSS
          @mixin 믹스인이름 {
            스타일;
          }
          
          // Sass
          =믹스인이름
            스타일

        • @mixin large-text{
            font: {
              size: 22px;
              weight: bold;
              family: sans-serif;
            }
            color: orange;
            
            &::after {
              content: "!!";
            }
            
            span.icon {
              background: url("/images/icon.png");
            }
          }

    • 포함하기(include) 
      • 선언된 Mixin을 사용하기 

      • // SCSS
        @include 믹스인이름;
        
        // Sass
        +믹스인이름

      • // SCSS
        h1 {
          @include large-text;
        }
        div {
          @include large-text;
        }
        
        // Sass
        h1
          +large-text
        div
          +large-text

      • 인수 : Mixin은 함수처럼 인수를 가질 수 있다.
      • 인수의 default 값을 설정 할 수 있다.

      • @mixin dash-line($width: 1px, $color) {
          border: $width dashed $color;
        }
        
        .box { @include dash-line(1px, red); }

      • 키워드 인수도 줄 수 있다.

      • @mixin position{
          $p: absolute,
          $t: null,
          $b: null,
          $l: null,
          $r: null	// 인수 5개 default값 줌
        ) {
          position: $p;
          top: $t;
          bottom: $b;
          left: $l;
          right: $r;
        }
        
        .absolute {	// 키워드 인수로 설정할 값만 전달
          @include position($b: 10px, $r: 20px);
        }
        .fixed {
          @include position(
            fixed,
            $t: 30px;
            $r: 40px
          );
        }

      • .absolute {
          position: absolute;
          bottom: 10px;
          right: 20px;
        }
        
        .fixed {
          position: fixed;
          top: 30px;
          right: 40px;
        }

      • 가변 인수 ( 인수의 개수가 불확실할 때 )
      • 인수를 받는 매개변수에 ...을 사용

        • @mixin bg($width, $height, $bg-values...){
            width: $width;
            height: $height;
            background: $bg-values;
          }
          
          div {	// 위 인수에 맞게 순서대로 전달하다가 ...부분에서는 개수와 상관없이 전달
            @include bg(
              100px,
              200px,
              url("/images/a.png") no-repeat 10px 20px,
              url("/images/b.png") no-repeat,
              url("/images/c.png")
            );
          }

      • 전달할 값으로 가변 인수를 사용

        • @mixin font(
            $style: normal,
            $weight: normal,
            $size: 16px;
            %family: sans-serif
          ) {
            font: {
              style: $style;
              weight: $weight;
              size: $size;
              family: $family;
            }
          }
          div {
            $font-values: italic, bold, 16px, sans-serif;
            @include font($font-values...);
          }
          span {	//필요한 값만 키워드 인수로 전달
            $font-values: (style: italic, size: 22px);
            @include font($font-values...);
          }
          a {
            @include font((weight: 900, family: monospace)...);
          }

    • @content
      • 선언된 Mixin에 @content 가 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달 할 수 있다.
      • 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있다.
      • Mixin의 매개변수는 전역 값으로 해석된다.

      • @mixin icon($url) {
          $::after {
            content: $url;
            @content;
            }
        }
        
        .icon1 {
          @include icon("/images/icon.png") {
            position: absolute;
            };
        }

    • 확장(Extend)
      • 특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우
      • @extend 선택자
      • ,로 구분하는 다중 선택자가 만들어진다.
      • 부작용이 많아 사용을 권장하진 않는다.

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

         

      • .btn, .btn-danger {
          padding: 10px;
          margin: 10px;
          background: blue;
        }
        .btn-danger {
          background: red;
        }

    • 함수(Functions)
      • Mixin과 거의 유사하지만 반환되는 내용이 다르다.
      • Mixin은 스타일을 반환, 함수는 특정 값을 @return 을 통해 반환한다.
      • 함수 사용에는 @include 를 사용하지 않고 함수이름으로 바로 사용한다.

      • $max-width: 980px;
        
        @function columns($number: 1, $columns: 12) {
          @return $max-width * ($number / $columns)
        }
        
        .box_group {
          width: $max-width;
          
          .box1 {
          	width: columns();	
          }
          .box2 {
            width: columns(8);
          }

    • 조건과 반복
      • if(조건, 표현식1, 표현식2)
        • 조건의 값이 true 이면 표현식1 을, false 이면 표현식2 를 실행한다. 

        • $width: 555px;
          div {
            width: if(width > 300px, $width, null);
          }

        • div {
            width: 555px;
          }

        • @if ( 조건 ) {} @else if {} @else {} 로도 가능하다.
        • 조건에는 ()이 생략 가능하다.
        • 조건에는 논리 연산자 and, or, not 을 사용할 수 있다.

        • $color: orange;
          div {
            @if $color == strawberry {
                color: red;
              } @else if $color == orange {
             	  color: orange;
              } @else if $color == banana {
                color: yellow;
              } @else {
                color: black;
              }
          }

      • @for
        • @for $변수 from 시작 through 종료 {} //종료 만큼 반복
        • @for $변수 from 시작 to 종료 {} //종료 직전까지 반복

        • @for $i from 1 through 3 {	// 1부터 3까지 반복 (3번)
            .through:nth-chilrd(#{$i}) {
              width: 20px * $i
            }
          }
          
          @for $i from 1 to 3 {	// 1부터 3전까지 반복 (2번)
            .to:nth-child(#{$i}) {
              width: 20px * $i
            }
          }

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

      • @each
        • List 데이터 반복 
          • @each $변수 in 데이터{}
          • for in 문과 비슷하다.

          • $fruits: (apple, orange, banana, mango);
            
            .fruits {
              @each $fruit in $fruits {
                li.#{$fruit} {
                  background: url("images/#{$fruit}.png");
                }
              }
            }

          • .fruits li.apple {
              background: url("/images/apple.png");
            }
            .fruits li.orange {
              background: url("/images/orange.png");
            }
            .fruits li.banana {
              background: url("/images/banana.png");
            }
            .fruits li.mango {
              background: url("/images/mango.png");
            }

          • 동시에 여러 개의 List 데이터를 반복 처리 할 수 있으나 각 데이터의 length가 같아야 한다.
        • Map 데이터 반복
          • @each $key변수, $value변수 in 데이터{}
          • 하나의 데이터에 두 개의 변수가 필요하다.

          • $fruits-data: (
              apple: korea,
              orange: china,
              banana: japan
            );
            
            @each $fruit, $country in $fruits-data {
              .box-#{$fruit} {
                background: url("/images/#{$country}.png");
              }
            }

            
            
            

          • .box-apple {
              background: url("/images/korea.png");
            }
            .box-orange {
              background: url("/images/china.png");
            }
            .box-banana {
              background: url("/images/japan.png");
            }

      • @while
        • while 조건 {}
        • 조건이 false로 평가될 때까지 내용을 반복한다.

        • $i: 6;
          
          @while $i > 0 {
            .item-#{$i} {
              width: 2px * $i;
            }
            $i: $i - 2;
          }

        • .item-6 { width: 12px; }
          .item-4 { width: 8px; }
          .item-2 { width: 4px; }