문서:Sass

[목차]

[[https://sass-lang.com/|공식 홈페이지]]

{{{+3 '''S'''yntactically '''A'''wesome '''S'''tyle'''S'''heets }}}

== 개요 ==
[[CSS]]의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전히 해소시켜주는 [[프로그래밍 언어]]다. SASS에는 Sass와 SCSS가 있다.

또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다.

비슷한 CSS 전처리기 언어로는 LESS, Stylus 등이 있다.

이 형식을 사용한 파일의 확장자는 .sass, .scss이다. Sass는 SCSS에서 중괄호를 없애서 용량을 줄일 수 있지만 실수로 인해 컴파일 에러가 뜰 확률이 꽤 크다. 따라서 일반적인 교육 사이트에서는 SCSS를 기준으로 설명한다.

=== SCSS ===
'''S'''assy '''CSS'''

말그대로 Sass한 [[CSS]]라는 뜻이다. 실제 뜻을 생각해보면 CSS한 Sass가 더 맞는 것 같다.

가장 큰 특징은 기존 Sass의 문법에서, CSS의 원래 문법에서 사용되는 [[중괄호]]를 사용하여 CSS만 알던 사람들이 처음 접해도 직관적으로 의미를 이해할 수가 있다.

단순히 가독성만이 아니라 Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일에러가 발생할 확률히 현저히 적다. 따라서 대부분의 사용자들이 SCSS 문법을 사용하여 Sass의 공식 문법으로 사용되고 있다.

== 개발 환경 ==
여러 편집기와 [[https://sass-lang.com/install|여기]]에 명시된 컴파일러를 통해 사용이 가능하다. 본래 컴파일러가 [[Ruby]]로 되어 있어서 Ruby 인터프리터도 설치해야 했지만, [[C++]]로 제작된 libsass 컴파일러가 나오면서 이쪽이 더 많이 사용되고 있다. [[npm]]에서도 libsass 컴파일러를 패키지 형태로 설치할 수 있어서 CUI 환경에서는 이 방법이 가장 많이 사용된다.

그 외에도 [[비주얼 스튜디오 코드]]에서 Live Sass Compiler라는 확장 기능을 사용하여 편집기에서 편집하고 저장만 하면 자동으로 CSS로 컴파일해주는 기능도 있다.

[[React(라이브러리)|React]]에서는 터미널에서 프로젝트 디렉터리로 들어가 npm install node-sass 를 입력하면 SCSS 파일을 프로젝트에서 직접 불러올 수 있게 된다.

== 기능 ==
 * 네스팅 - 계층적으로 상속되는 CSS를 더욱 계층적으로 보이게 만드는 기능이다. 선택자에서 상위 계층을 적던 것을 정리하고 관련 요소들을 그룹으로 묶을 수 있게 되어 더욱 깔끔해진다.

 '''CSS'''
{{{#!syntax css
ul {
    list-style:none;
    width:1000px;
    margin:0 auto
    }
ul li {
    float:left;
    }
ul li a {
     color:black;
     padding:20px;
     display:block;
    }
}}}

 '''SCSS'''
{{{#!syntax css
ul {
    list-style:none;
    width:1000px;
    margin:0 auto;
    li {
        float:left;
        a {
            color:black;
            padding:20px;
            display:block;
        }
    }
}
}}}


 * 확장
 * 특수 [[선택자]]
 * SassScript
  * 변수 - $를 사용하여 변수를 지정한다. 중복된 단어를 변수로 치환하여 유지 보수가 쉬워진다.

 '''CSS'''
{{{#!syntax css
.dv1 {width:1000px;margin:0 auto;border:1px solid black}
.dv2 {width:200px;border:1px solid black}
.dv3 {width:500px;float:left;border:1px solid black}
.dv4 {width:700px;position:relative;border:1px solid black}
.dv5 {width:100px;position:absolute;border:1px solid black}
}}}

 '''SCSS'''
{{{#!syntax css
$bLine:1px solid black; /* 여기만 바꾸면 5개의 클래스 값을 전부 바꿀 수 있다.  */
 
.dv1 {width:1000px;margin:0 auto;border:$bLine}
.dv2 {width:200px;border:$bLine}
.dv3 {width:500px;float:left;border:$bLine}
.dv4 {width:700px;position:relative;border:$bLine}
.dv5 {width:100px;position:absolute;border:$bLine}
}}}



  * 연산 - 간단한 연산을 할 수 있어서 팀프로젝트 등을 할 때 왜 이런 수치가 나왔는지 의도를 파악할 수 있도록 작성할 수 있다.

 '''CSS'''
{{{#!syntax css
.dv1 {float:left;width:101.11111px;margin-right:10px}
}}}

 '''SCSS'''
{{{#!syntax css
.dv1 {float:left;width:(1000px/9)-10px;margin-right:10px}
}}}




  * 함수 - 동일한 기능을 가진 코드를 그룹화하여 중복을 제거하거나 기능을 명시하여 유지관리에 도움을 준다.

 '''CSS'''
{{{#!syntax css
.dv1 {width:1000px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv2 {width:200px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv3 {width:500px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv4 {width:700px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv5 {width:100px;position:absolute;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

}}}

 '''SCSS'''
{{{#!syntax css
@mixin centering(){
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}

.dv1 {width:1000px;@include centering()}
.dv2 {width:200px;@include centering()}
.dv3 {width:500px;@include centering()}
.dv4 {width:700px;@include centering()}
.dv5 {width:100px;@include centering()}
}}}




 '''CSS'''
{{{#!syntax css
.dv1 {width:225px}
.dv2 {width:525px}
.dv3 {width:150px}

}}}

 '''SCSS'''
{{{#!syntax css
@function width-cal($a, $b){
  @return $a * $b;
}

.dv1 {width:width-cal(900px, 3/12)}
.dv2 {width:width-cal(900px, 7/12)}
.dv3 {width:width-cal(900px, 2/12)}
}}}



 * 반복문 - 비슷한 구문의 반복 작성을 편하게 할 수 있다.

 '''CSS'''
{{{#!syntax css
div:nth-child(1) {
  top: 10px;
}
div:nth-child(2) {
  top: 20px;
}
div:nth-child(3) {
  top: 30px;
}

...

div:nth-child(60) {
  top: 600px;
}
}}}

 '''SCSS'''
{{{#!syntax css
@for $i from 1 through 60 {
    div:nth-child(#{$i}){
        top:10px * $i;
    }
}
}}}
 

  * 조건문 - 조건에 따라 속성의 값을 다르게 할 수 있다.

 '''CSS'''
{{{#!syntax css
.container *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: 1/1;
}

.container *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: 1/2;
}

.container *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: 1/3;
}

.container *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: 1/4;
}

.container *:nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: 2/1;
}

...

.container *:nth-child(60) {
  -ms-grid-row: 15;
  -ms-grid-column: 4;
  grid-area: 15/4;
}
}}}

 '''SCSS'''
{{{#!syntax css
  .container{
    *{
      @for $i from 1 through 60 { 
        &:nth-child(#{$i}){ /* #{}는 숫자를 문자로 변환해준다. 또한 &는 부모를 선택하게 하는 선택자이다. */
          @if ($i%4 == 0) {
            grid-area:#{floor($i/4+0.9)}/4
          }
          @else {
            grid-area:#{floor($i/4+0.9)}/#{$i%4}
          }
        }
      }
    }
  }
}}}
 

  * Vendor Prefix - webkit 코드나 ms 코드를 일일이 적지 않아도 webkit이나 IE 등에서 인식할 수 있게 해 준다.

 '''CSS'''
{{{#!syntax css
.dv1 {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(255,245,0,.9)));
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9));
  display: -ms-grid;
  display: grid;
  }
}}}

 '''SCSS'''
{{{#!syntax css
.dv1 {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9));
  display: grid;
  }
}}}

== 참조 ==
[[https://sass-lang.com/guide|SASS 공식 가이드 (영어)]]
[[https://www.w3schools.com/sass|W3 Schools SASS 강좌 (영어)]]
[[https://opentutorials.org/module/237/2488|생활코딩 SASS 강좌 (한국어)]]

[[분류:프로그래밍 언어]][[분류:파일 형식]]