[반응형 웹] SCSS(Sass)란? - 03

css를 사용할 때에 필수로 활용해야 할 SCSS에 대하여 알아보겠습니다!

 

- SCSS란 무엇일까? 왜 사용할까?

CSS의 슈퍼셋으로 CSS에서는 불가능한 문법과 기능들을 사용할 수 있습니다!

변수, 함수, mixin, nesting 등을 사용하여 더욱 효율적으로 코드를 작성할 수 있답니다!

.scss 확장자로 사용하며, 실제로 사용하기 위해서는 css파일로 컴파일을 해야합니다!

일반적인 CSS 문법과 동일하게 작성할 수 있으며, 추가적인 기능과 문법을 사용하여 더 강력한 스타일시트를 작성할 수 있습니다.

 

- SCSS 사용법

많은 분들이 사용 중인 vscode를 통해 사용방법을 차근차근 알려드리겠습니다!

우선, Live Sass Compiler 확장자를 설치해주세요!

기존에 css파일을 생성해 코드를 작성했다면,

대신해서 .scss파일을 생성해 scss의 기능들을 이용해 코드를 작성한 뒤에!

Command + shift + P

Live Sass Compile Current Sass File

이걸 클릭하여 sass파일을 컴파일 해주면, 자동으로

style.css , style.css.map 파일이 생성됩니다!

 

물론, css와 같이 html파일에

        <link rel="stylesheet" type="text/css" href="./scss/style.css">

를 삽입해야 한다는 것은 잊지말아야겠죠 !!!

 

***만약, scss파일을 수정한다면 재컴파일 한 뒤에 새로고침하면 .css파일도 그에 맞춰 자동으로 변경된 것을 확인할 수 있습니다!

 

SCSS의 사용법을 익혀보았으니, 본격적으로 어떻게 .scss파일을 작성하는지 확인해보겠습니다!

 

- SCSS 변수 사용법

$primary-color: #007bff;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;
}

SCSS에서는 $ 기호를 이용하여 변수를 정의해두고 쉽게 재사용합니다!

 

- SCSS 함수 사용법

@function 이 형식으로 rem함수를 정의하여 사용할 수 있습니다!

함수 안에 리턴문 또한 @return의 형식으로 작성하여 줍니다!

11번째 줄 코드를 보시면, rem(20px)에 rem함수가 사용된 것을 확인할 수 있습니다!

***참고 : rem에 대한 내용은 https://zooooss.tistory.com/5 를 통해 확인하실 수 있습니다***

이 scss파일을 컴파일하여 css파일을 확인해보면!

픽셀 값이 함수를 통해 rem값으로 변경된 것을 볼 수 있습니다!

 

- SCSS 믹스인(mixin) 사용법

코드블럭을 재사용하고 싶을 때에 사용되는 도구입니다!

함수처럼 파라미터를 받아 사용할 수도 있습니다!

@mixin theme($theme: DarkGrey){
    background: $theme;
    color:#fff;
}

//파라미터 여러 개는 ($theme: - , $fontcolor: - ) 으로 사용

.info{
    @include theme;
}

.alert{
    @include theme($theme: DarkRed);
}

.success2{
    @include theme($theme: DarkGreen);
}

이렇게 작성된 scss파일은

.info {
  background: DarkGrey;
  color: #fff;
}

.alert {
  background: DarkRed;
  color: #fff;
}

.success2 {
  background: DarkGreen;
  color: #fff;
}

이렇게 css파일로 컴파일 될 것입니다!

 

- SCSS 네스팅(nesting)

& 이 기호를 이용하는 네스팅은 SCSS에서 중첩된 선택자의 부모 선택자를 참조하는 데 사용되는 특별한 기호입니다!

.btn {
  background-color: blue;
  &:hover {
    background-color: lightblue;
  }
}

scss파일에서 이렇게 작성된 코드는

.btn {
  background-color: blue;
}
.btn:hover {
  background-color: lightblue;
}

이러한 css파일로 컴파일됩니다!

 

효과적인 css파일을 생성하는 데에 사용되는 것이죠!

가독성이 좋고 중첩된 스타일을 유지하면서 작성할 때 굉장히 유용합니다!

 

- 여러가지 SCSS 파일

이러한 기능들을 하나의 scss파일에 넣어두기도 하지만, 효율을 위해서 여러가지 .scss파일을 만들어두고 사용할 수도 있답니다!

목적에 따라 재사용하고싶은 소스코드 블록이 있을 때 유용하게 사용 가능! 하다는 큰 장점을 가지고 있죠!

_util.scss와 같이 _파일명.scss로 파일명 앞에 언더바를 넣어 추가적인 scss파일을 만들고!

.scss 파일에서 @use "언더바 뒤의 파일명"을 작성하여 사용할 수 있습니다!

@use "파일명" 뒤에 as 새파일명

이를 이용해 자유롭게 함수명 또한 변경이 가능합니다 ㅎㅎ

 

여기까지 css의 슈퍼셋! SCSS에 대해 알아보았습니다!

 

이외에도 @extend 등 유용한 기능이 참 많은데요!

더 많은 SCSS의 기능을 알아보고 싶으시다면,

Sass-lang.com 의 documents를 통해 공부하는 것을 추천드립니다 ! ㅎㅎ

 

관련 코드는 아래 깃허브를 통해 확인해주세요 !

 

https://github.com/zooooss/ResponsiveWeb.git

GitHub - zooooss/ResponsiveWeb