Sass(SCSS)

Monday. June 03, 2019 - 12 mins

Sass(SCSS)

Sass란?

Sass(Syntactically Awesome Style Sheets)는 CSS pre-processor로서 CSS 문법과 유사하지만 변수(variables), 중첩(nesting), 믹스인(mixin), 상속(inheritance) 기능을 사용해서 편리하게 작성할 수 있습니다.

CSS pre-processor 란?

CSS 를 확장하는 스크립팅 언어로서, 컴파일러를 통하여 브라우저에서 사용 할 수 있는 일반 CSS 문법 형태로 변환합니다

단, 웹에서는 직접 동작하지 않아 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)합니다.

Sass 혹은 SCSS

Sass는 두 가지 다른 구문을 제공하고 있습니다. Sass는 들여쓰기 구문으로 SCSS 둘은 동등한 기능을 갖고 있지만 미관상의 차이가 있습니다.

쉽고 간단한 차이로는 {} (중괄호)와 ; (세미콜론)의 유무입니다.

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px
    }
  }
}

Sass는 들여쓰기로, SCSS는 {} (중괄호)로 구분

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Sass는 =와 + 기호로 Mixins 기능을 사용했고, SCSS는 @mixin과 @include로 기능을 사용했습니다.

문법(Syntax)

중첩(Nesting)
변수(Variables)
상속(Extend)
가져오기(Import)
믹스인(Mixin)
연산(Operations)
조건과 반복(Control Directives / Expressions)

1. 중첩(Nesting)

CSS의 문법을 응용하여, 선택자나 속성의 관계를 중첩 형태로 풀어낸 문법입니다.

규칙 중첩

규칙중첩은 부모 선택자를 계속 반복하지 않게 해주어 하위 선택자를 많이 사용하는 CSS 규칙을 간단하게 작성 할 수 있으며, 구조를 한눈에 볼 수 있습니다.
```
body {
  background-color: #eee;
  p {
  color: #333;
  }
}
```
```
body {
  background-color: #eee;
}
body p {
    background-color: #eee;
    color: #333;
}
```
속성 중첩

속성 중첩은 네임스페이스로 묶인 요소를 이용해 중첩하여 작성할 수 있습니다.
- font- 로 시작하는 모든 속성
```
p {
  font: {
    family: arial;
    size: 30em;
    weight: bold;
  }
}
```
특수 선택자

부모 참조 선택자 &

중첩 규칙에서 &를 사용하여 부모 선택자를 참조할 수 있습니다.

가상 클래스 &:active, &:empty, &:first-child 등
가상 요소 &::after, &::selection, &::first-letter 등
아이디, 클래스, 속성 선택자 &#movie, &.active, &[type=radio] 등

접미사 &-sidebar, &--default:hover 등

li {
    background: #222;
    a {
        color: #333;
        &:hover {color: #999}
        &:after {content:'';}
      	&[type="text"] {background:#fff}
    }
}

.section {
  width:100%;
  background-color:#fff;
  &-01 {
    background-color:#000;
  }
  .sub &-01 {
    background-color:#555;
  }
}

.section {width:100%;background-color:#fff;}
.section-01 {width:100%;background-color:#000;}
.sub .section-01 {width:100%;background-color:#555;}

2. 변수(Variables)

반복적으로 사용되는 코드를 변수에 저장하여 사용할 수 있습니다.

$width: 5em;
#main {
  width: $width;
}

변수이름은 $ 달러 기호로 시작하며, CSS와 같이 변수 이름: 값 형태를 띱니다.

#main {
  width: 5em; }

Sass의 변수엔 변수범위가 있습니다. 변수를 특정 선택자에서 선언하면 해당 선택자에서만 접근이 가능합니다.

전역 변수

문서 최상위에 바로 작성한 변수는 전역 변수입니다. 어떠한 규칙에도 포함되지 않고 문서 어디에서나 사용 할 수 있습니다.

단, 지역 범위에서 변수를 정의할때 !global 플래그를 함께 사용하면 전역 변수로 사용할 수 있습니다.
```
$primary-color: #333;
   
body {
  $primary-color: #eee !global;
  background-color: $primary-color;
}
p {
  color: $primary-color;
}
```
```
body {
  background-color: #eee;
}
p {
  color: #eee;
}
```
지역 변수

문서 최상위가 아닌 규칙 내부에 변수를 정의하여 사용하면 지역 변수 입니다. 중첩 수준에 따라 사용할 수 있는 지역의 범위가 한정됩니다.

   body {
     $primary-color: #333; // 지역 변수 정의
     background: $primary-color;
   }
   
   div {
     background: $primary-color; // 지역 변수의 범위를 벗어났습니다. 에러발생
   }

!default(초깃값 설정)플래그는 할당되지 않은 변수의 초깃값을 설정합니다.

   $content: "Hello World!";
   $content: "환영합니다";
   $content: "안녕하세요" !default; // 재할당 무시
   
   #main {
     content: $content; // "환영합니다"
   }

$content 에 해당 변수가 설정되지 않았거나 값이 null 일때 값을 설정합니다. CSS의 !important 플래그와 비슷하지만 정의의 우선순위가 가장 낮아지는 것 입니다.

일반적으로 많이 사용하는 플래그는 아니지만, 부트스트랩과 같은 라이브러리에는 필수로, 라이브러리를 가져와 사용하여도 원본을 망가트리지 않고 사용자화 할 수 있습니다.

3. 상속(Extend)

기존 스타일을 상속하고자 할 경우 @extend 를 사용한다.

.btn {
  border: 1px #f00;
  background-color: blue;
}

.btn-basic {
  @extend .btn;
  border-width: 3px;
  border-color: darkblue;
}

.btn {
  border: 1px #f00;
  background-color: blue;
}

.btn .btn-basic {
  border: 1px #f00;
  background-color: blue;
  border-width: 3px;
  border-color: darkblue;
}

4. 가져오기(Import)

import 기능은 스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용하는 기능입니다.

@import "foo.scss"; // 확장자는 생략 가능하다
@import "foo";

5. 믹스인(Mixin)

믹스인은 재사용 할 CSS 선언 그룹을 정의하는 기능입니다. 상속과 비슷하지만 argument를 이용해 속성값을 원하는 대로 쓸 수 있는 점이 다르다.

//기본사용법
@mixin 믹스인이름 ($argument변수명) {
    속성 : 속성값;
    속성n : $argument변수명;
}

@include 믹스인이름($argument변수속성값);

@mixin colorbox ($bg-color) {
    width: 100px;
    heigh: 50px;
    background: $bg-color;
}
.box1 {
    @include colorbox(red);
}
.box2 {
    @include colorbox(blue);
}

.box1 {width: 100px;heigh: 50px;background:red;}
.box2 {width: 100px;heigh: 50px;background:blue;}

인자를 이용한 예제

@mixin jb( $margin, $color ) {
  margin: $margin;
  color: $color;
}
p {
  @include jb( 20px 0px, red );
}

p {margin:20px 0;color:red;}

@mixin jb( $margin, $color:blue ) { //특정 인자에 기본값을 설정한 예
  margin: $margin;
  color: $color;
}
p {
  @include jb( 20px 0px); //인자에 대한 값을 정해주지않으면 기본 값을 사용함
}

p {margin: 20px 0;color:blue;}

@mixin mg( $margin... ) { //인자가 1개이상일경우 ...추가하여 여러개를 받아올수있다
  margin: $margin;
}
p {
  @include mg( 20px 10px 5px 1px);
}

6. 연산 (Operations)

Sass는 기본적인 연산기능을 지원합니다.

종류	설명	주의사항
+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자(Number)
/	나누기	오른쪽 값이 반드시 숫자(Number)
%	나머지
==	동등
!=	부등
<	보다 작은
>	보다 큰
<=	보다 작거나 같은
>==	보다 크거나 같은

주의사항

+,- 연산자를 사용 할 때는 항상 단위를 통일 시켜야 한다. (단, css의 calc()함수를 사용하면 오류 없이 작동한다.)
나누기 연산은 괄호로 둘러싸거나, 변수를 쓰거나, 덧셈이 함께 쓰이거나 할 경우에 나눗셈 연산을 한다.
색상 값을 산술연산(+,-,*,/)이 가능하다.
문자열은 기본적으로 합쳐지며, -하이픈 기호를 쓸 경우에는 하이픈기호를 포함한다.

7. 조건과 반복(Control Directives / Expressions)

조건문 @if

지시어

@if 로 시작하여 @else if 로 추가하고 @else 로 빠져나온다.

$color: orange;
div {
  @if $color == strawberry {
    color: #FE2E2E;
  } @else if $color == orange {
    color: #FE9A2E;
  } @else {
    color: #2A1B0A;
  }
}

div {
  color: #FE9A2E;
}

함수

조건의 값 true,false 에 따라 두개의 표현식 중 하나만 반환됩니다.

$width: 555px;
div {
  width: if($width > 300px, $width, null);
}

div {
  width: 555px;
}

반복문 @for

@for 는 스타일을 반복적으로 출력합니다 through를 사용하는 형식과 to를 사용하는 형식으로 나뉩니다.

through : 크거나 같다(이상), 작거나 같다(이하)

to : 크다(초과), 작다(미만)

// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}
   
// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
  // 반복 내용
}

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}
   
// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

.through:nth-child(1) { width: 20px; }
.through:nth-child(2) { width: 40px; }
.through:nth-child(3) { width: 60px; }
   
.to:nth-child(1) { width: 20px; }
.to:nth-child(2) { width: 40px; }

참고 Sass Guidelines Sass 정의하고 사용하기 Sass 완전 정복

Sass(SCSS)

Sass(SCSS)

Sass란?

CSS pre-processor 란?

Sass 혹은 SCSS

문법(Syntax)

1. 중첩(Nesting)

2. 변수(Variables)

3. 상속(Extend)

4. 가져오기(Import)

5. 믹스인(Mixin)

6. 연산 (Operations)

7. 조건과 반복(Control Directives / Expressions)

Related Posts