[Web] SASS(SCSS)를 사용해보자(예제, 연습문제)

Sass 홈페이지에 들어가보게 되면 이렇게 나와있다.

 

"Sass is the most mature, stable, and powerful professional grade CSS extension language in the world"

대충 번역하자면 짱 좋은 CSS 확장 언어 정도이다.

 

기존의 CSS 언어가 사용하기 구렸다면 SASS를 통해 프로그래밍적으로 쓸 수 있게 되었다.

즉, CSS를 이용하는건 동일하다. SASS를 컴파일하면 CSS 파일이 나온다.

 

SASS, SCSS가 크게 다른건 아니고, 몇가지 문법적으로 다른게 있다.

전 세계적으로 .scss 확장자를 많이 사용하고 자료도 많다.

그렇지만 보통 SASS,SCSS를 SASS로 일컬어 부른다.

 

C언어 같은것에 비하면 굉장히 쉽게 배울 수 있다.

사용하는 문법이 있다면 해당 포스팅에 전부 추가할 것이다.

 

공식적인 문서는 https://sass-lang.com/guide 여기서 볼 수 있다.

 

목차

• SASS 설치 및 사용법
• SASS 변수 사용법
• Nesting 사용법
• Use 사용법
• Mixin 사용법
• Extend 사용법
• 예제문제 및 풀이

 

 

 

 

---

 

SASS 설치 및 사용법

우선 나는 Visual Studio Code를 사용하고 있다.

Extension에서 "Live Sass Compiler"를 입력하고, v5.x 버전을 설치하면 된다.

 

내가 설치한거

 

그리고 .scss 파일을 하나 생성해보면 하단 메뉴바에서 Watch Sass가 뜨는것을 확인할 수 있다.

 

대충 아무 스타일이나 CSS 작성하는것 처럼 입력하고, Watch Sass 버튼 눌러보면 터미널 나타나면서 새로운 파일이 생성된다.

이렇게까지 되면, 아주 성공적으로 설치됐다고 볼 수 있다.

왼쪽은 터미널에 뜨는거, 오른쪽은 자동으로 생성된 css, map 파일

 

---

 

SASS 변수 사용법

$변수 : 값;

이러한 형태로 선언을 하고,

 

$변수

이러한 형태로 사용할 수 있다.

 

/* test.scss */
$my-size : 16px;
$my-color: #eee;

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


/* test.css */
body {
  font-size: 16px;
  color: #eee;
 }

 

---

 

Nesting 사용법

nest는 둥지라는 뜻인데, 기존에 프로그래밍에서 if문이나 for문을 2중으로 사용하는 느낌이다.

 

원래는 스페이스바로 클래스를 구분했다면,

중괄호를 이용하여 직관적으로 보이게끔 쓸 수 있다.

 

/* test.scss */
.box{
    .box-item{
        color: aqua;
        font-size: 16px;
    }

    .box-content{
        color: black;
        font-size: 25px;
    }
}


/* test.css */
.box .box-item {
  color: aqua;
  font-size: 16px;
}
.box .box-content {
  color: black;
  font-size: 25px;
}

 

---

Use 사용법

제작하는 홈페이지의 크기가 커질수록 모듈화는 정말 중요하다.

모듈화를 하면 유지보수에 용이하고 확장에도 유리하기 때문이다.

 

Sass에서는 대표적으로 Use라는 문법을 이용한다.

만약 styles.scss라는 파일에는 $my-size라는 변수가 있다면 아래와 같이 불러오고 사용할 수 있다.

 

/* styles.scss */
$my-size : 16px;


/* test.scss */
@use 'style';

.box {
  font-size: style.$my-size;
}


/* test.css */
.box {
  font-size: 16px;
}

---

 

Mixin 사용법

C언어에서의 함수라고 생각하면 된다.

mixin의 기본 형식은 아래와 같다.

 

@mixin 함수명(파라메타){

}

 

그리고  파라메타를 값으로 쓸 때에는 변수 사용법과 똑같이 $파라메타  이렇게 하면 되지만,

속성으로 사용하려고 하면 #{$파라메타} 형식을 지켜야한다.

 

/* test.scss */
@mixin background($bg) {
    background-color: $bg;
}

@mixin f1($f, $s) {
    #{$f}: $s;
}

.greenBox{
    @include background(green);
    @include f1(font-size, 16px);
}

.redBox{
    @include background(red);
    @include f1(font-size, 32px);
}

.blueBox{
    @include background(blue);
    @include f1(font-size, 59px);
}


/* test.css */
.greenBox {
  background-color: green;
  font-size: 16px;
}

.redBox {
  background-color: red;
  font-size: 32px;
}

.blueBox {
  background-color: blue;
  font-size: 59px;
}

 

---

Extend 사용법

mixin이랑 전체적으로 비슷한 문법이다.

하지만 mixin보다 단순하고, 파라메타를 입력으로 받을 수 없다.

그냥 문장 쉽게 붙혀넣기위한 문법이라고 생각하면 될 듯하다.

 

%를 통해 extend 명을 선언하고, 클래스 작성하듯 똑같이 작성하면 된다.

호출할때는 @extend %이름 으로 사용하면 된다.

또한 %가 아닌 클래스도 호출할 수 있다.(@extend .클래스명)

 

/* test.scss */
%my-color {
    color: aqua;
}

.my-size {
    font-size: 16px;
}

.box {
    @extend %my-color;
    @extend .my-size;
}


/* test.css */
.box {
  color: aqua;
}

.my-size, .box {
  font-size: 16px;
}

 

---

예제문제 및 풀이

1. Nesting, ul, li 활용해서 리스트 만들기(active 클래스를 주면 선택된것 같은 디자인)

/* test.scss */
ul{
    list-style: none;

    li{
        width: 300px;
        padding: 10px;
        border: solid 1px gray;
    }
    
    .active{
        background-color: aqua;
        color: white;
    }
}

 

2. extend, mixin을 활용하여 이런거를 만들어보자.

 

답안 :

/* test.scss */
@mixin background($bg) {
    background-color: $bg;
}

%box-size {
    width: 300px;
    padding: 10px;
    color: white
}

.greenBox {
    @extend %box-size;
    @include background(green);
}

.redBox {
    @extend %box-size;
    @include background(red);
}

.blueBox {
    @extend %box-size;
    @include background(blue);
}

 

3. Bootstrap의 row, col 기능을 구현해보자

Bootstrap에서는 화면의 넓이를 12개로 구분했으니 마찬가지로

col-6이면 화면의 50%

col-4이면 화면의 33.33%

col-3이면 화면의 25%

가 될 수 있도록 구현해오자.

 

 

이거 쉽게 만드는 방법 : emmet

    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
    </div>

    <div class="row">
        <div class="col-2">2</div>
        <div class="col-2">2</div>
        <div class="col-2">2</div>
        <div class="col-2">2</div>
        <div class="col-2">2</div>
        <div class="col-2">2</div>
    </div>

    <div class="row">
        <div class="col-3">3</div>
        <div class="col-3">3</div>
        <div class="col-3">3</div>
        <div class="col-3">3</div>
    </div>

    <div class="row">
        <div class="col-4">4</div>
        <div class="col-4">4</div>
        <div class="col-4">4</div>
    </div>

    <div class="row">
        <div class="col-6">6</div>
        <div class="col-6">6</div>
    </div>

/* test.scss */
.row {
    @for $i from 1 to 12 {
        .col-#{$i} {
            width: (100% / (12 / $i));
            float: left;
            border: solid 1px gray;
            box-sizing: border-box;
        }
    }
}