1. SASS

1. SASS란?

• 변수, 함수, 반복문, 연산자 사용가능해서CSS를 프로그래밍스럽게 작성할 수 있게 하는 preprocessor이다.
• SASS 문법으로 작성한 스타일을 CSS로 다시 컴파일을 해야 하며 이 때, node-sass 라는 라이브러리가 처리하며 파일명은 .scss 로 해주어야 한다.

1. $변수 문법

   • 변수를 생성한 후, 생성한 변수를 원하는 곳에 적어서 사용할 수 있다.

   $메인칼라 : #ff0000;
   
   .red {
     color : $메인칼라;
   }
   

2. @import 문법

   • 자주 사용하는 스타일들 (reset)을 파일에 저장한 후, 원할 때마다  @import

    @import './파일명.css';
   

3. nesting 문법

• 셀렉터 대신 nesting 문법 사용 가능한다.

  div.container h4 {
    color : blue;
  }
  div.container p {
    color : green;
  }
  

  • 셀렉터 해석이 쉽고 관련된 class끼리 관리하기 편하다.

  div.container {
    h4 {
      color : blue;
    }
    p {
      color : green;
    }
  }
  

1. @extend 문법

   • @extend 클래스명 : 해당 클래스명에 들어있던 모든 내용을 복사 붙여넣기 해준다. 특히 재사용할 때 편하다.

     (Detail.scss 파일)
     
     .my-alert {
       background : #eeeeee;
       padding : 15px;
       border-radius : 5px;
       max-width : 500px;
       width : 100%;
       margin : auto;
     }
     .my-alert2 {
       @extend .my-alert;
       background : yellow;
     }
     
     .my-alert p {
       margin-bottom : 0;
     }
     

2. @mixin/@include

• @mixin 함수명() 문법은 함수를 만드는 문법이고, @include 함수명() 는 함수를 부를 때 사용하는 문법이다.

  @mixin 함수() {
    background : #eeeeee;
    padding : 15px;
    border-radius : 5px;
    max-width : 500px;
    width : 100%;
    margin : auto;
  }
  .my-alert {
    @include 함수()
  }
  
  .my-alert p {
    margin-bottom : 0;
  }
  

• 단, JS 문법과는 다르게 함수명이 위에 선언되어있어야 밑에서 사용가능하다.

+. 추가

• node-sass 라이브러리 설치하기
  • npm install node-sass
  • yarn add node-sass
• node-sass 설치는 되는데 미리보기 띄울 때 에러가 난다면
  • [nodejs 14버전]
    • node-sass 지웠다가 4.14버전으로 설치
  • [nodejs 16버전 이상]
    • node-sass로 6버전 설치
    • node_modules 폴더랑 yarn.lock 혹은 package-lock.json 삭제
    • node_modules 폴더 재설치
• 삭제 명령어
  • npm uninstall
  • yarn remove