[IT] SASS - SASS의 모든 것 !

SASS란 ?

구조, 기초분법, 함수, 연산자, 템플릿 , 파일 가져오기 등을 알아보자 !

---

ㅇ SASS 란 ?

ㅡ CSS의 확장 언어이다 : CSS보다 조금 더 높은 자유도를 개발자들에게 부여한다 ( CSS의 전처리 언어 )

ㅡ 변수, 반복문, 가정문  등 이 있다..

ㅡ 브라우저가 읽을 수 있는 언어 : HTML, CSS, JavaScript 가 있다.

ㅡ sass (scss) 는 webpack, node 로 컴파일 해서 쓴다 .

( VScode의 사스 확장형으로 사용가능함 )

 

ㅇ SASS에서 다루는 CSS - nesting 구조

ㅡ html 의 구조에 따라 각각의 요소로 중첩해서 적는다. (보통 2~3개 중첩함, 그 외는 클래스명 새로 지정)

ㅡ 예제로 한번 알아보자 !

 

1) 예제 scss 파일

body {

  .box {

    border: 1px solid tan;

  }

}

2) css 파일

body .box {

  border: 1px solid tan;

}/*# sourceMappingURL=main.css.map */

이런식으로 컴파일 (변환) 된다 .

 

ㅇ SASS에서 다루는 CSS기초문법

1) 주석 

ㅡ /* */ 또는 // 한줄 주석 가능 

2) 부모 요소 선택하기 : 요소에 & 연산자를 이용해서 추가 선택 가능하다.

body {

  .box {

    border: 1px solid tan;

    &:hover {

      background-color: blue($color: #000000);

    }

  }

}

/* SCSS 파일 */

body .box {

  border: 1px solid tan;

}

body .box:hover {

  background-color: 0;

}/*# sourceMappingURL=main.css.map */

/*  CSS 파일*/

 

ㅇ SASS에서 다루는 변수

ㅡ 변수 : 변하는 수 (모든 것 )  로 선언하고 변수명으로 불러와서 사용한다.

ㅡ $ +"작명" : "저장할내용";

$primary-color: #00498c;

body {

  .box {

    border: 1px solid tan;

    background-color: $primary-color;

       }

    }

 

ㅇ SASS에 내장되어 있는 색관련 함수

    darken 어둡게  ( hover 랑 같이 많이 쓴다.)

    lighten 밝게

    saturate 더 선명하게 (높은 채도)

    desaturate 더 흐리게 (낮은 채도)

    adjust-hue 명도 변경 (60deg 각도로 지정도 가능함)

    rgba : alpha 값 변경 = opacity 투명도

 /* 예시*/

   &:nth-of-type(2) {

      background-color: darken($color, 20%);

    }

   &:nth-of-type(3) {

      background-color: rgba($color, 0.5);

    }

 

ㅇ 확장 (extend) 로 CSS템플릿 구성하기

ㅡ extend : CSS 스타일을 확장시킴 (중복속성)

%클래스 로 임시 클래스를 만든다.

불러오기 @extend %클래스명;

  %btn {

    //임시 클래스

  }

  .btn {

    padding: 10px 20px;

    border: 2px solid red;

    background-color: pink;

    //   cursor: pointer;

    border-radius: 15px;

  }

  .btn_1 {

    @extend %btn;

    border: 1px solid black;

  }

 

ㅇ mixin 을 통한 CSS맞춤 템플릿 (추가속성 )

@mixin 함수명($인자:default값 , $인자:default값) { }   

불러오기 @include 함수명(인자, 인자);

 //예제1

 

   %btn {

    //임시 클래스

  }

  @mixin 버튼() {

    color: white;

    font-weight: bold;

  }

  .btn {

    @include 버튼();

    padding: 10px 20px;

    border: 2px solid red;

    background-color: pink;

    cursor: pointer;

    border-radius: 50px;

  }

   // 예제2

  @mixin 버튼($테두리, $글자색) {

    color: $글자색;

    border: 2px solid $테두리;

    font-weight: bold;

  }

 

  .btn_1 {

    @include 버튼(green, blue);

  }

 // 예제3  - 인자 중에 1개만 가져올때

  .btn_2 {

    @include 버튼($글자색:yellow);

  }

 

ㅇ SASS에서 사용할 수 있는 연산자(operator : +, - , *  )  [sass math 로 검색해보기]

ㅡ 나누기 방법 2가지 

1) 연산을 알려주기 (100px / 2);  

2) math.div(200px,2);

@use "sass:math";    //선언하

body {

  .box {

    width: math.div(300px, 2);

    height: 100px;

    border: 1px solid red;

  }

}

(  슬래시는 / 폰트사이즈나 라인헤잇 나누는걸로 사용됨 )

ㅡ calc();

calc(100px + 100px) 

 

 

ㅇ use를 통해 다른 파일 가져오기  ( _파일명으로 만들면 css파일 생성 안된다 ) 

@import url(); <<<비슷함

@use "_파일명";

@use "test";

다른 파일을 포함시킬 수 있다.

ㅡ use를 통해 해당 _파일의 $변수 가져오기도 가능하다. ( _파일에서 변수를 선언함) 

파일.$변수;

  .box {

    width: 150px;

    height: 100px;

    border: 1px solid red;

    color: test.$변수;

  }

 

ㅡ 파일이름길면 단축해서 가져하기

@use "파일명" as c ;  사용가능

@use "_test" as c;

.box {

  color: c.$변수;

}

 

---

ㅇSASS에서 사용할 수 있는 다른 기능들 

반복문,가정문(조건문), 변수(배열),오브젝트 ...이 있다. 다음번에는 심화학습도 해보자 !