[Sass] Sass 사용법

HongDuHyeon·2022년 3월 15일

한번 쓰면 못 끊는 그 맛.... sass....

Sass에 대한 지극히 개인적인 소감

sass 너무 좋다.

예전부터 사용하며 개인적으로 느낀 점을 잠시 얘기해보면 일단 상속 받는 부모 선택자를 계속 써주지 않아도 된다는 점이 굉장히 매력적으로 다가온다. 깊은 곳에 있는 요소까지 들어가고 들어가고 들어가버리면 나만 헷갈리는게 아니라 협업을 하는, 내 코드를 보는 그 누구라도 코드를 보며 시간과 정신의 방에 갇히게 될 것이다.
~~죽어도 싫다~~

그럼 내 소감은 둘째 치고 앞에서 그렇게 닳도록 얘기했던 Sass님을 영접해보자.

Sass 란 ?

CSS 전처리기 중의 하나로, CSS 작성을 더 편하게 만들어주는 도구

CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다.

이에 Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.

Sass 문법

1. 변수

global 변수와 local 변수

global변수 : 모든 영역에서 사용 가능
local변수 : 해당 소괄호 안에서만 사용가능

$font-color: red;

.container {
	$font-color: green;
    color:$font-color /* green */
}
.contents {
	color:$font-color; /* red */
}

2. 연산

일반적인 .css에서는 calc를 사용하고 엄격한 띄어쓰기를 바탕으로 작성해야한다. 하지만 sass에서는 변수에 연산을 넣을 수 있다.

$box-width: (500px - 200px) / 2;
$box-height: 1500px % 500px;

.square {
	width: $box-width;
    height: $box-height;
}

3. 중첩

원래는 작성을 할 때마다 부모 요소를 항상 써주면서 작업을 했어야했다. 물론 :after :before :first-child :last-child등 :(콜론)이 붙는 스타일도 하나하나 전부 다 적어줘야했지만 sass를 사용하면 아래 코드처럼 작성한 코드 안에 자식 요소의 스타일을 지정해주기만 한다면 문제없다.

ex.1
.square {
	width: 500px;
    height: 500px;
    inner {
        width: 100%;
        height: 100%
    }
}
ex.2
.square {
	width: 700px;
    height: 500px;
    &:first-child {
    	width: 500px;
        height: 400px;
    }
}

4. mixin

mixins는 스타일시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능입니다. @mixin은 재사용할 내용을 선언하는 부분이며 @include는 @mixin에서 정의된 내용을 삽입,적용되는 부분입니다
재활용이라는 키워드가 가장 적절할 것 같다.

자주쓰는 스타일 코드 블럭을 mixin으로 지정을 해주고 그 안에 내가 원하는, 내가 자주 사용하는 스타일 코드 블럭을 넣게 된다면 지정한대로 그 코드를 사용할 수 있게 된다.

// SCSS문법
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

// 함수 선언 / 인자 전달 / 기본값 설정
@mixin circle($size){
	width: $size;
    height: $size * 2;
    border-radius: 50%;
}
.box {
	@include circle(100px);
}

// 인수가 전달되지 않으면 초기값을 이용한다.
@mixin circle($size : 10px){
	width: $size;
    height: $size * 2;
    border-radius: 50%;
}
.box {
	@include circle(100px);
}

5. include

선언된 Mixin을 사용(포함)하기 위해서는 @include가 필요하다.
작성법은 아래와 같이 @include를 작성해주고 내가 작성해놓은 mixin을 불러와서 사용하면 된다.

h1 {
	@include large-text;
}

6. Nesting

nest는 번역하면 둥지이다.
말 그대로 분기마다 기준이 되는 코드를 바깥에 두고 감싸주는 형식으로 작성된다.

Not Nesting

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Use Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

      li {
        display: inline-block;
      }
    }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}