티스토리툴바

UXUI 웹디자인 과정

SASS 톺아보기

CSS 전처리기?

다른 웹 퍼블리셔의 포트폴리오를 찾아 보다 보면 능력(어빌리티) 항목에 HTML, CSS, JS, jQuery와 함께 쓰여있는 Sass, Less, Stylus를 보신 적이 있나요? 우리는 잘 알지 못했지만, 실제로 실무에서도 많이 사용하고 있는 CSS 전처리기(Pre-Processor) 입니다. 그렇다면 전처리기는 무엇이고, 왜 사람들이 많이 사용할까요?

CSS는 쉽다. 하지만...

우리가 익혀 왔듯 CSS는 웹 언어 중에서 쉽고 간결한 편에 속합니다. 하지만 우리가 프로젝트(대표적으로 각자가 만들고 있는 개인 포트폴리오가 있겠죠)를 진행하면 할 수록, 작업량이 많아지면 많아질 수록, 그리고 작업이 고도화 될 수록 불편함 역시 같이 커지게 됩니다. 페이지의 컨텐츠와 요소의 양에 따라 선택자는 기하급수적으로 늘어나고, 코드가 쉽게 지저분해지면서 불편한 부분들이 발생할 수 밖에 없습니다. 색상코드를 일일이 기억해야 한다던지, 상속 문제로 인해 특정 class의 이름이 겹쳐서 겹치거나 깨지는 등의 문제가 발생하기도 하고 이는 결국 유지보수도 어려워 진다는 단점이 있습니다. 결국 단순해서 익히기 쉬웠던 CSS가 같은 이유로 우리의 발목을 잡는 경우가 발생합니다.

CSS 전처리기의 등장

"아, 주조색 맨날 똑같은거 쓰는데 변수같은걸로 선언해두고 꺼내쓰는 방법 없나?" 혹시 생각 해본 적 없으세요? 우리만 이런 생각을 한게 아닙니다. 필요성을 느낀 사람들이 스크립트를 이용해 만든 것이 바로 CSS 전처리기입니다. CSS를 HTML처럼 중첩화 하여 구조적으로 보기 쉽게 정리도 가능하고, 변수 사용은 물론 연산, 조건문(if)과 반복문(for), 함수와 매개변수 까지도 사용 가능합니다.

하지만 단점도 분명 존재하죠. 우리가 일반적으로 사용하는 웹브라우저에서는 이 전처리기로 작성된 파일을 CSS로 인식하지 못합니다. 그래서 꼭 거쳐야 하는 것이 바로 컴파일(트랜스파일링)인데요.

컴파일러를 통해 CSS 파일로 변환이 필요합니다

쉽게 설명하자면 컴파일은 번역이고, 컴파일러는 구글 번역기입니다. Sass나 Less로 작성한 파일을 컴파일러에 넣게 되면, CSS로 번역을 해주는 거죠. 컴파일을 해서 나온 CSS 파일을 웹으로 연결시켜주면 짜잔! 하고 우리가 원하는 결과물을 얻게 되는 것입니다. 오늘은 여러 전처리기 중 Sass를 기반으로 소개해드릴까 합니다.

SCSS로 작성된 예제(왼쪽)를 컴파일하면 CSS(오른쪽)로 변환됩니다

Sass, 문법적으로 개 쩌는 스타일시트

시작부터 극찬을 하는게 아니라, 얘 이름의 뜻이 원래 그러합니다. Syntactically Awesome Style Sheets의 줄임말이거든요. (ㅋㅋ;) CSS 전처리기 중에서는 가장 먼저 등장했고, Bootstrap에 쓰여서 많은 사용자를 보유한 Less와 함께 대표적인 전처리기입니다. 프로젝트마다 Less나 Sass를 다르게 쓰는 경우도 있다고는 하는데, 쓰는 방법이 조금 다를 뿐 기능적인 부분에서 큰 차이는 없다고 합니다.

Sass는 .scss 문법이 표준입니다. CSS와 크게 다른 점은 없고, 단순히 기능이 추가 된 수준의 문법이라 아마 처음 접한 여러분들도 손쉽게 따라할 수 있을겁니다.

일단 시작은 프로그램 세팅부터

Visual Studio Code를 이용해 Sass를 처음 만나봅시다.

  1. VSCode에서 확장 프로그램을 설치합니다.
    • Sass
    • Live Sass Compiler
  1. 설정창 오픈(Ctrl+,) 후 최상단 검색창에 Live Sass Compile Map 을 입력합니다. 그 다음 "settings.json에서 편집" 을 클릭하세요.
  1. settings.json 파일에서 "liveSassCompile~"로 시작하는 설정값에 false 가 들어가 있는지 확인 후 저장합니다.
  1. index.html 파일을 만들고, css 폴더를 만들고, css 폴더 안에 style.scss 파일을 생성한 후 index.html에 link 태그를 이용하여 style.css를 연결해둡시다. style.css를 만들 필요는 없습니다. 확장프로그램이 알아서 생성해주니까요.
  1. 마지막으로 index.html를 열고, 최하단에 있는 "Watch Sass" 버튼과 "Go Live"(없을 시 Ctrl+L, O) 버튼을 눌러주면 준비가 끝났습니다.

Sass 기능 소개

앞서 소개해드렸듯 Sass에는 기존 CSS에서 제공하지 않았던 많은 기능을 제공합니다. 오늘은 그 중에서 가장 기초적인 기능들을 소개합니다.

주석

Sass에서는 기존 CSS의 주석(/* */) 말고도 JS에서 사용하던 한 줄 주석(//) 도 사용 가능합니다. 한 줄 주석은 CSS로 컴파일 되었을 때 나타나지 않습니다.

/* You can See me */

// You can't see me

/* You
   Can
   See
   Mee
*/
/* You can See me */
/* You
   Can
   See
   Mee
*/

변수 (Variable)

Sass에서는 변수 개념을 사용할 수 있습니다. 변수 안에는 숫자, 문자, 폰트, 색상, null 등이 들어갈 수 있고, 선언은 $ 문자를 사용합니다. 변수 선언은 CSS로 컴파일이 되더라도 나타나지 않습니다.

$mainColor: #333333; // 주조색
$subColor: #aaaaaa; // 보조색

#header{
	background-color: $subColor;
	color: $mainColor;
}
#header {
  background-color: #aaaaaa;
  color: #333333;
}

또한, JS와 마찬가지로 전역변수와 지역변수의 개념이 존재합니다. 변수를 특정 선택자 안에서 선언하면 해당 선택자에서만 사용이 가능합니다. 위치와 관계 없이 전역 변수로 설정 할 때는 !global; 플래그를 붙이면 됩니다.

$mainColor: #333333 !global; // 주조색
$subColor: #aaaaaa !global; // 보조색

#header{
  $subColor: #ffffff;
	// 헤더 내 보조색은 흰색 사용 
	background-color: $subColor;
	color: $mainColor;
}

#nav{
  background-color: $subColor;
	color: $mainColor;
}
#header {
  background-color: #ffffff;
  color: #333333;
}

#nav {
  background-color: #aaaaaa;
  color: #333333;
}

수학 연산자 (Math Operators)

Sass에서 수학 연산자들을 사용할 수 있습니다. 지원되는 연산자들은 다음과 같습니다.

단, + 와 - 의 경우 단위를 항상 통일시켜 줘야 합니다. 예를 들어, $box-width: 100% - 20px; 는 동작하지 않습니다. 

.container { width: 100%; }


section.contents {
  float: left;
  width: 600px / 960px * 100%;
}

aside.sidebar {
  float: right;
  width: 300px / 960px * 100%;
}
.container {
  width: 100%;
}

section.contents {
  float: left;
  width: 62.5%;
}

aside.sidebar {
  float: right;
  width: 31.25%;
}

내장 함수 (Built-in Functions)

Sass에서 기본적으로 제공하는 함수들이 존재합니다. jQuery의 메소드와 비슷한 역할이라고 보시면 되고, 아래에는 색깔을 어둡게 만들어주는 darken 이라는 내장 함수를 사용한 모습입니다. 내장 함수의 종류는 정말 많기에 이 곳에서 모두 소개해드리는 것은 무리이고, 대신 사용 빈도수가 높은 내장 함수를 정리한 블로그를 소개해드립니다. https://m-veloper.github.io/devlog/2020/03/22/sass-15/

$mainColor: #2ecc71;
$mainDark: darken($mainColor, 10%);

#header{
    background-color: $mainDark;
}
#header {
  background-color: #25a25a;
}

중첩 (Nesting)

저는 사실 다른 기능보다 이걸 처음 봤을때 와 개쩐다! 하는 생각이 들었습니다. Sass에서는 CSS를 HTML처럼 구조화 하여 사용이 가능합니다. 또한 부모 선택자를 다시 들고 와야 하는 경우(가상 요소, 가상 선택자 등) 내부에 & 만 입력하면 바로 적용됩니다. 

ul {
  li {
    float: left;
    a {
      display: block;
      width: 10%;
      height: 60px;
      color: black;
      &:hover {
        text-decoration: underline;
        color: gray;
      }
      &::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 14px;
        background-color: #333;
      }
      @at-root .active{
        color: red;
      }
    }
  }
}
ul li {
  float: left;
}
ul li a {
  display: block;
  width: 10%;
  height: 60px;
  color: black;
}
ul li a:hover {
  text-decoration: underline;
  color: gray;
}
ul li a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #333;
}
.active {
  color: red;
}

단, 위의 예시처럼 중첩해서 넣어 둔 속성(.active)이 바깥에서도 사용되는 경우도 있을텐데요. 이 땐 해당 선택자 앞에 @at-root를 넣어주면 됩니다...만, 사실 이 경우는 코드를 잘라서 밖에다 꺼내 놓는게 맞습니다. 다만 이런 기능도 있다~ 정도로 알아두시면 됩니다.

불러오기 (Import)

@import를 사용해 다른 특정 .scss 파일을 불러올 수도 있습니다. 이 때 확장자를 붙이지 않아도 되며, .scss 파일 이름의 시작이 언더바(_)로 시작하면 CSS 파일로 컴파일 되지 않습니다.

@import "reset.scss";
@import "laysout";

상속 (Extend)

Sass에서 특정 선택자를 상속하는 기능입니다. @extend 선택자; 를 입력하면 해당 속성을 모두 가져올 수 있습니다.

.box {
  border: 1px solid gray;
  padding: 10px;
  display: inline-block;
}

.success-box {
  @extend .box;
  border: 1px solid green;
}
.box, .success-box {
  border: 1px solid gray;
  padding: 10px;
  display: inline-block;
}

.success-box {
  border: 1px solid green;
}

만약, 상속 시킬 선택자가 컴파일이 되지 않는 것을 원하는 경우에는 %(Placeholder) 선택자; 를 만들어 쓰면 됩니다. 프리셋 느낌으로 사용이 가능합니다.

%title_text{
  font-family: 'Noto Sans KR';
  font-size: 24px;
  font-weight: bold;
}

%cont_text{
  font-family: 'Noto Serif KR';
  font-size: 16px;
  font-weight: normal;
}

section{
  h3{
    @extend %title_text;
  }
  p{
    @extend %cont_text;
  }
}
section h3 {
  font-family: "Noto Sans KR";
  font-size: 24px;
  font-weight: bold;
}

section p {
  font-family: "Noto Serif KR";
  font-size: 16px;
  font-weight: normal;
}

믹스인 (Mixin)

Mixin은 Sass의 가장 유용한 기능 중 하나입니다. Placeholder를 이용한 extend와 비슷하지만, Mixin은 매개변수를 받을 수 있어서 코드를 간결하게 만들어주는 일등 공신입니다. 선언은 @mixin 으로, 사용 할 땐 @include 로 사용합니다.

@mixin notosans {
  font-family: 'Noto Sans KR';
}

@mixin text-set ($color, $size, $weight) {
  color: $color;
  font-size: $size;
  font-weight: $weight;
}

section{
  h3{
    @include notosans;
    @include text-set(#000, 24px, bold);
  }
  p{
    @include notosans;
    @include text-set(#333, 16px, normal);
  }
}
section h3 {
  font-family: "Noto Sans KR";
  color: #000;
  font-size: 24px;
  font-weight: bold;
}
section p {
  font-family: "Noto Sans KR";
  color: #333;
  font-size: 16px;
  font-weight: normal;
}

🤔
그럼 프리셋을 만들 땐 extend와 mixin 중 뭘 쓰는게 좋을까요? - extend와 mixin 모두 유사한 기능을 제공하지만 extend의 경우 자신의 셀렉터가 어디에 첨부 될 것인지 예상이 어렵다는 단점이 있고, 상속 개념이기 때문에 부작용이 발생할 수도 있습니다. 가급적 mixin을 사용하는 것이 좋습니다.

함수 (Function)

내장 함수가 아닌 직접 함수를 만들어서 쓸 수도 있습니다. 방금 전 알려드린 Mixin과 비슷하게 생겼지만 Mixin은 속성들을 반환하는 반면 Function은 값을 반환합니다. 선언은 @function, 리턴은 @return 입니다.

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

.my-module {
  width: calc-percent(650px, 1000px);
}
.my-module {
  width: 65%;
}

출처

Sass 강좌 - 한 눈에 보기
이전부터 Sass 의 존재를 알고있었고,배우고싶었는데, 미뤄오셨나요? 그렇다면 잘 오셨습니다. 이 포스트에서는 Sass 의 특징에 대하여 알아보고, Sass 로 할 수 있는 멋진 것들을 알아볼테니까요. Sass (Syntactically Awesome Style Sheets : 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다.
https://velopert.com/1712
Sass - Basics | PoiemaWeb
Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.
https://poiemaweb.com/sass-basics


Uploaded by N2T

티스토리툴바