[SASS/SCSS] CSS전처리기 SASS, SCSS에 대해 알아보자~

SASS?

SASS는 CSS Pre-processor로서 CSS의 단점을 보완하여 보다 가독성이 높고 코드의 재사용성에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

 

SCSS?

SASS 세번째 버전에서 추가되었는데 SASS의 모든 기능을 지원하면서 CSS구문과 완전히 호환되도록 만들어졌다.

 

SASS vs SCSS

// SASS
.wrapper
  width: 100px
  height: 200px
  .content
    color: white
    float: left
// SCSS
.wrapper{
    width: 100px;
    height: 200px;
    .content{
        color: white;
        float: left;
    }
}

가장 큰 차이는 중괄호{}와, 세미콜론;의 유무차이로, SCSS구문이 훨씬 익숙하고 코드를 다루기에도 편하다.

 

CSS의 한계와 단점?

간결한 문법과 명확한 사용법은 사용하기에 편리하지만, 프로젝트의 규모가 커지고 수정이 빈번하게 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점이 있다.

 

SCSS의 장점?

• CSS보다 심플한 표기법, CSS를 구조화하여 표현할 수 있다.
• CSS에는 존재하지 않는 Mixin등의 강력한 기능을 활용하여 CSS유지보수 편의성을 향상시킨다.

SCSS의 유용한 기능들

- {}와 ;의 사용

 

- $ 변수의 사용

$변수를 사용해서 공통된 속성을 재활용할 수 있다.

$font-color: red;
.content{
    color: $font-color;
    float:left;
    .title{
        color: $font-color;
        font-size: 18px;
    }
}

- #{} 문자보간

#{}을 이용해서 코드의 어디든지 변수값을 넣을 수 있다.

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

*SASS의 내장 함수 unquote()는 문자에서 따옴표를 제거합니다.

 

- 조건문, 반복문 사용

@if

// .scss
$num: two;
div {
  @if $num == one {
    color: blue;
  } @else if $num == two {
    color: red;
  } @else {
    color: black;
  }
}

// .css (..compile)
div{
    color: red;
}

@for

@for $i from 1 through 3 {
  .item-#{$i} { 
    width: 2em * $i; 
  }
}

 

- @import

하나의 파일로 모든 CSS를 관리하는 것은 가독성을 해치면서 유지보수에도 어려움이 있다. 임포트 기능을 활용하면 코드의 재활용, 유지보수에 도움이 된다.

@import './경로/파일명.scss'
@import '파일명' //확장자 생략 가능

 

SASS @import는 기본적으로  SASS파일을 가져오는데, CSS @import규칙으로 컴파일되는 몇 가지 상황이 있다.

• 파일 확장자가 .css일 때
• 파일 이름이 http://로 시작하는 경우
• url()이 붙었을 경우
• 미디어쿼리가 있는 경우

 

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

 

- 중첩(nesting)

부모요소를 반복적으로 기술하지 않고 사용할 수 있다.

// CSS
.wrapper{
    width: 100%;
    height: 100%;
}
.wrapper div{
    width: 500px;
    height: 200px;
}
.wrapper div span{
    background-color: blue;
}
// SCSS
.wrapper{
    width: 100%;
    height: 100%;
    div{
        width: 500px;
        height: 200px;
        span{
            background-color: blue;
        }
    }
}

 

- Ampersand(상위 선택자 참조)

중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다.

.s_box {	
	&:hover {
	background-color: $yl;
	}
}

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

 

- @at-root(중첩 벗어나기)

중첩 안에서 생성하되 중첩 밖에서 사용해야 경우에 유용하다.

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

엥 그러면 밖에서 따로 선언하면 되지않을까?

=> 위 예제처럼 변수를 사용해야하는 경우에 list안에서 생성해주어야하기때문에 at-root를 활용!

 

- 중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 사용할 때

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

Compiled to:

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

 

- @mixin (재활용)

@mixin, @include로 공통된 속성의 묶음을 재활용할 수 있다.

@mixin box-style{
    width: 100px;
    height: 50px;
    background-color: red;
}
.section{
    position: absolute;
    top: 0;
    .box{
        @include box-style;
    }
}

 

- 연산가능

* 산술연산 (+ , - , * , / , %)

* 숫자연산(+,-의 경우 같은 단위에서만 사용이 가능하다.)

* 문자연산 (+)

* 색상연산 (RGBA에서 Alpha값은 연산되지 않으며 서로 동일해야 연산이 가능하다)

Alpha값을 연산하기 위해서는 다음과 같은 함수(opacify(), transparentize())를 사용해야한다.

$color: rgba(10, 20, 30, .5);
div {
  color: opacify($color, .3);  // 30% 더 불투명하게 / 0.5 + 0.3
  background-color: transparentize($color, .2);  // 20% 더 투명하게 / 0.5 - 0.2
}

 

* 논리연산 ( and , or , not )

* 비교연산 ( == , != , < , > , <= , >= )

---

사용

....?

---

참고

heropy.blog/2018/01/31/sass/

jinminkim-50502.medium.com/css-preprocessor-sass-scss-25dc8329f867