SCSS가 뭐지?

SCSS란?

CSS 전처리기로 CSS 구조를 가독성있고 더 유지보수 하기 좋게 하는 도구

Sass vs Scss

나는 Sass가 Scss랑 거의 같이 쓰이는 말인줄 알았는데 차이가 있었다.

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

  li { display: inline-block; }

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

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

  li
    display: inline-block

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

바로 Sass에서는 중괄호와 세미콜론이 없고 들여쓰기로 코드를 작성해야 한다는 점이다.
그 외에는 scss의 @mixin 은 =로 @include는 +로 사용해야 한다는 점이다.

들여쓰기보다는 중괄호로 구분해서 코드를 작성하는 것이 실수를 방지하기 쉬워서 Sass보다는 Scss를 쓰는 것이 더 좋다.

Scss 특징

주석

• /* */ : 우리가 일반적으로 사용하는 주석으로 컴파일 시 css파일에서도 똑같이 적용된다.

• // : 추가적으로 한줄짜리 주석을 사용할 수 있는데 css파일에서 적용이 되지 않는다.

Nesting

선택자안에 선택자를 입력해서 편하게 작성 가능하다. scss를 쓰는 제일 중요한 이유!

.container{
    display:flex;
    .item{
        flex-grow:1;
        > span{
            color:red;
            &:hover{
                color:blue;
            }
        }
    }
}

&

상위 선택자를 참조할 수 있다.

.fs{
    &-sm{font-size:12px;}
    &-md{font-size:14px;}
    &-lg{font-size:16px;}
}

.fs-sm {
  font-size: 12px;
}
.fs-md {
  font-size: 14px;
}
.fs-lg {
  font-size: 16px;
}

공통 속성

.container{
    .item{
        $size:100px;
        
        width:$size;
        height:$size;
        margin:$size;
        position:absolute;
        left:$size;
    }
}

겹치는 100px 값을 따로 변수로 할당해 재활용하여 사용할 수 있다.

$w:100px;

.box-a{
    $h:200px !global;
    width:$w;
    height:$w;
    marign:$w;
}

.box-b{
	$h=300px;
    height:$h;
}

선언한 곳에서부터 하위 태그까지 사용할 수 있도록 유효범위가 존재한다. 재할당이 가능하며 유효범위가 존재하는데 유효범위는 !global로 전역으로 바꿀 수 있다.

$primary:blue;

.box{
    $primary: orange !default;
    background:$primary;
}

!default를 통해서 $primary속성이 있으면 할당하고, 없으면 기본속성을 할당할 수 있는 기능도 있다.

중첩 속성

.container{
    display:flex;
    .item{
      flex-grow:1;
      flex-shrink:0;
      flex-basis:auto;
      flex:{
          grow:1;
          shrink:0;
          basis:auto;
      };
    }
}

중첩되는 flex 속성들을 묶어서 사용할 수 있다. 이건 그렇게 유용하진 않아보인다.

다중 선택자

ul, ol{
    li, span{
        width:100px;
        color:red;
    }
}

쉼표로 구분하여 다중 선택자를 통해 여러 선택자의 제어를 한번에 할 수 있다.

보간

$name: 'github';

$path:'~assets/images';

.box{
    background-image:url("#{$path}/#{$name}.png");
}

css
.box {
  background-image: url("~assets/images/github.png");
}

js에서 백틱 기호를 이용해서 변수를 집어넣듯이 위와 같이 #을 이용하여 동일한 기능을 구현할 수 있다.

Mixin(재활용)

@mixin large-text($size:30px){
    font-size:$size;
    font-weight:bold;
    font-family:sans-serif;
    color:blue;
}

.box-a{
    width:100px;
    height:200px;
    @include large-text;
}

.box-b{
	width: 200px;
	@include large-text(40px);
}

.box-a {
  width: 100px;
  height: 200px;
  font-size: 30px;
  font-weight: bold;
  font-family: sans-serif;
  color: blue;
}

.box-b {
  width: 200px;
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
  color: blue;
}

미리 만들어놓은 속성 덩어리들을 재활용하여 사용 가능

확장

.btn{
    display:inline-block;
    font-weight:bold;
    padding:10px 20px;
    border-radius:4px;
    background:gray;
}

.btn-primary{
    @extend .btn;
    background:blue;
}

.btn, .btn-primary {
  display: inline-block;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 4px;
  background: gray;
}

.btn-primary {
  background: blue;
}

extend를 이용하여.btn과 .btn-primary 에 동일한 속성을 적용할 수 있다.
새로운 속성을 추가할 때 번거롭게 .btn 과 .btn-primary에 각각 속성을 적용해줄 필요가 없다.
하지만, 중첩해서 사용할 경우 선택자 폭발이라는 현상등 제한 사항이 있기 때문에 비슷하지만 부작용이 없는 mixin 규칙을 이용하자.

함수

$columns-width:1200px;

@function grid($col:1, $total:12){
    @return $columns-width * $col / $total;
}

.box1{
    width:grid();
}

.box2{
    width:grid(4);
}

.box3{
    width:grid(11);
}

.box1 {
  width: 100px;
}

.box2 {
  width: 400px;
}

.box3 {
  width: 1100px;
}

위와 같이 return 문을 포함한 함수도 사용이 가능하다.

조건문

@mixin avatar($size, $circle:false){
    width:$size;
    height:$size;
    
    @if($circle){
        border-radius:$size/2;
    }
}

.square-av{
    @include avatar (100px, $circle:false);
}

.cricle-av{
    @include avatar (100px, $circle:true);
}

.square-av {
  width: 100px;
  height: 100px;
}

.cricle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

조건문도 사용이 가능하다.

import, 모듈

1. 기본 사용법

@import "./variable.scss";
.main {
    background: $primary;
    border: 4px solid $success;
}

$primary: orange;
$danger: red;
$success: yellowgreen;

main에서 variable.css의 색상을 import 해서 적용시킨 모습이다.

잘 작동되는듯 하지만 variable.scss는 색상을 선언만 했기 때문에 따로 css파일에 아무것도 없는 모습이다. 이 경우 css 파일이 만들어지는 것 자체가 낭비가 된다.

파일명 앞에 _가 있는 경우 별도로 css 파일로 컴파일 하지 않는다. 따라서 _variable.scss로 바꿔보자.

variable.css 파일이 보이지 않는다.

따라서, 따로 색상을 정의하는 scss파일들은 앞에 언더바를 붙여서 파일명을 짓자.

• 주의할 점
  • @import url(), @import "./variable.css", http:~~~ 와 같은 경우는 컴파일결과로 출력이 되기 때문에 주의를 해야 한다.
  • @use와 다르게 @import는 통째로 가져와 통합해서 사용하겠다는 의미를 가진다.

2. namespace 사용

@use "./variable";

.main {
    background: variable.$primary;
    border: 4px solid variable.$success;
}

위와 같이 @use를 사용하면 namespace로 변수에 접근이 가능하여 중복되는 키워드들을 구분하여 사용이 가능하다.
모듈화의 의미를 가진다

@use "./variable" as var;

.main {
    background: var.$primary;
    border: 4px solid var.$success;
}

namespace를 커스텀해서 사용하려면 as 키워드를 이용하면 된다.

3. 내보내기

scss 파일 안에서 정의된 변수들을 바깥에서 사용하려면 @forward를 이용해서 내보내야 한다.

@mixin square($size: 100px) {
    width: $size;
    height: $size;
}

$primary: orange;
$error: red;
$success: yellowgreen;

@use "./variables" as var;
@use "./mixins" as mix;

.your-style {
    background: var.$primary;
    color: var.$success;
    @include mix.square;
}

현재 main.scss에서 mixin과 variable을 가져와서 모듈형식으로 이용을 하고 있다. 그런데 위와 같은 파일구조에서 my-style 안의 main.scss에서 는 mixin과 variable을 지금과 같은 방식으로는 정상적으로 불러올 수 없다.

@use "./variable" as var;
@use "./mixin" as mix;
@forward "./variable";
@forward "./mixin";

.your-style {
	background: var.$primary;
	color: var.$success;
	@include mix.square;
}

@forward 키워드를 이용하여 밖으로 내보내고,

@use "../your-style/main";

.my-style {
	position: relative;
	border: 4px solid main.$primary;
	@include main.square(400px);
}

외부에서 받아서 사용하면 정상적으로 문제가 해결된다. 참고로 forward시에도 as 키워드를 붙여 모듈화가 가능하다.

마치며

본문에서 설명하지 않은 내용이 매우 많은데 정리하는데 시간이 너무 오래걸릴 것 같기도 하고, 사용하지 않을 기능들이 너무 많아보여서 가장 대표적인 예제와 사용법, 개념 위주로 정리하였다. 지금 당장 scss를 사용하여 프로젝트를 해야하는데 Nested와 mixin정도만 적극적으로 사용해보려고 한다.