(CSS, SCSS) scss란? scss 사용법, 주요 기능 Nesting, Mixins, Extend, Functions 사용법

scss란?

 

기본 css를 사용해 디자인할 때, css가 복잡해질수록 유지보수가 어려워진다.

 

이때 scss를 사용하면 유지보수에 도움이 될 수 있다.

 

scss란 css 확장 스타일 시트 언어로, css의 모든 기능은 물론 고급기능이 추가되어 있다.

 

이런 고급기능들은 css코드를 간략화해서, 유지보수를 쉽게 만든다.

 

scss 파일은 .scss 확장자를 가지며, scss 코드를 css로 컴파일 할 수 있다.

 

scss의 설치 방법, 장점, 사용법은 아래 공식 사이트에서 자세히 확인할 수 있다.

 

Sass: Sass Basics

 

 

 

 

SCSS 사용법

SASS 설치

scss를 사용하기 위해서 특별한 설치가 필요한 것은 아니지만,

 

추후 scss를 css코드로 컴파일하기 위해서는 sass 프리프로세서를 설치해야 한다.

 

만약 node.js가 깔려있다면, 터미널에 아래 명령어를 입력해 설치할 수 있다.

npm install -g sass

 

 

SCSS 빌드

scss로 열심히 코드를 작성하고 나서 브라우저가 자동으로 scss를 읽을 수 있다면 좋겠지만,

 

브라우저는 scss코드를 이해할 수 없기 때문에 scss코드를 css코드로 변환하는 과정(컴파일)을 거쳐야한다.

 

이때 node.js가 있고, sass를 잘 설치 해두었다면, 아래 코드로 빌드할때, 자동으로 scss가 css로 변환된다.

npm run build

 

 

 

SCSS의 고급 기능

css에 없고 scss에 있는 고급기능은 크게 4가지이다.

 

변수의 개념도 있지만, css에서 변수를 지원하기에 변수의 설명은 제외했다.

 

• Nestind(중첩) : html의 계층 구조와 유사하게 css를 중첩하는 기능
• Mixins(믹스인) : css 코드를 정의하고, 이를 호출해 재사용하는 기능
• Extend(확장) : css 코드를 정의하고, 이를 확장(상속)해서 사용하는 기능
• Functions(함수) : 사용자 정의 함수를 통해 스타일을 동적으로 생성하는 기능

 

 

Nesting(중첩)

nesting 기능을 사용하면, html에서 하는 것과 유사하게 css에도 계층 구조를 줄 수 있다.

 

예를 들어 아래 구조에 해당하는 html을 스타일링한다고 한다고 하면

<div class="container">
    <div class="child">
    	<button></button>
    </div>
    <div class="child">
    	<button></button>
    </div>
</div>

 

scss로 아래와 같이 계층을 나타낼 수 있다.

 

계층을 두면 선택자가 짧아지고, 구조가 직관적으로 보인다는 장점이 있다.

.container{
    height: 500px;
    width: 500px;
    background-color: orange;
    
    .child{
    	width: 100px;
    	height: 100px;
    	background-color: red;
    
    	button{
        	background-color: pink;
        }
    }
}

 

 

 

Mixins(믹스인)

믹스인을 사용하면 중복되는 코드를 정의하고 이를 호출해 재활용을 할 수 있다.

 

이를 통해 코드의 양을 크게 줄일 수 있다. 

 

예를 들어 스타일이 유사한 버튼을 만든다고 할때 아래와 같이 믹스인을 활용할 수 있다.

@mixin button-style {
  background-color: black;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.btn-small {
  @include button-style;
  width: 50px;
  height: 20px;
}

.btn-big {
  @include button-style;
  width: 100px;
  height: 40px;
}

 

 

 

Extend(익스텐드)

익스텐드는 믹스인과 상당히 유사하지만 차이점이 있다.

 

익스텐드는 기존에 있는 스타일 규칙을 참조하고, 그것을 확장(상속)하는 것에 더 가깝다.

 

믹스인의 예시를 동일하게 익스텐드로 나타내면 아래와 같다.

.button {
  background-color: black;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  width: 70px;
  height: 30px;
}

.btn-small {
  @extend .button;
  width: 50px;
  height: 20px;
}

.btn-big {
  @extend .button;
  width: 100px;
  height: 40px;
}

 

 

 

Function(함수)

함수는 자바스크립트 함수와 상당히 유사하다.

 

함수를 이용하면 코드 재사용성을 높일 수 있고, 동적으로 생성할 수도 있다.

 

앞선 예시를 함수를 사용하면 다음과 같이 나타낼 수 있다.

 

@function button-styles($background, $color, $width, $height) {
  @return (
    padding: 10px 20px,
    border: none,
    border-radius: 5px,
    background-color: $background,
    color: $color,
    width: $width,
    height: $height
  );
}

.btn-small {
  @include button-styles(pink, white, 50px, 20px);
}

.btn-big {
  @include button-styles(red, black, 100px, 40px);
}