SCSS/SASS 이해하기

 

Sass(Syntactically Awesome Style Sheets)의 3 버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합입니다. SCSS는 CSS에서 사용하던 비슷한 문법으로 Sass 기능을 사용할 수 있습니다.

Sass와 Scss의 눈에 보이는 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.

 

sass

.list  
  float: left
  li
    color: red    
    &:first-child
      margin-right: -10px

scss

.list {  
  float: left;
  li {
    color: red;    
    &:first-child {
      margin-right: -10px;
    }
  }
}

Sass는 선택자의 유효 범위를 ‘들여 쓰기’로 구분하고, SCSS는 {}로 범위를 구분합니다. 저는 개인적으로 Scss가 괄호를 적용하니 가독성이 더욱 좋다고 생각합니다.  그 외에도 Mixins 기능을 사용할 때 Sass는 =와 + 기호로 Mixins 기능을 사용하고 Scss는 @mixin과 @include로 기능을 사용합니다.

 

둘은 차이점도 보이지만 전체적으로는 상당히 유사하니 상황에 맞게 사용하면 되지만 개인적으로는 Scss가 좀 더 좋다고 생각합니다.

 

문법(Syntax)

---

주석(Comment)

Sass(SCSS) 주석은 JavaScript처럼 두 가지 스타일의 주석을 사용합니다.

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고, 중요한 것은 *의 라인을 맞춰줘야 합니다.

 

sass

/* 컴파일되는
 * 여러 줄
 * 주석 */

// Error
/* 컴파일되는
* 여러 줄
    * 주석 */

scss

/*
컴파일되는
여러 줄
주석
*/

중첩(Nesting)

scss

.section {
  width: 100%;
  .children {
    padding: 20px;
    li {
      float: left;
    }
  }
}

Compiled :

.section { width: 100%; }
.section .children { padding: 20px; }
.section .children li { float: left; }

상위 선택자 참조(Ampersand)

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

a {
  text-decoration: none
  &:hover { text-decroation: underline; }
}

Compiled :

a { text-decoration: none; }
a:hover { text-decoratino: underline; }

scss

.widget {
   font-weight: 400;
   &-area { font-weight: 600; }
   &-top_posts { font-weight: 1000; }
}

Compiled :

.widget { font-weight: 400; }
.widget-area { font-weight: 600; }
.widget-top_posts { font-weight: 1000; }

중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있습니다.

 

scss

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

Compiled :

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

변수(Variables)

반복적으로 사용되는 값을 변수로 지정할 수 있습니다. 색상이나 선 스타일, 폰트 패밀리등은 대체로 사이트 내에서 공통적으로 정의해놓은 값을 적용해서 사용하면 편리하고 수정 시 변수값만 수정하여 값이 적용되어 있는 곳을 일괄적으로 변경도 가능합니다.
변수 이름 앞에는 항상 $를 붙입니다.

$변수이름: 속성값;

scss

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

Compiled :

.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

#{} (문자 보간)

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

 

scss

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

Compiled :

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

가져오기(Import)

@import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다.
또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다.

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

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

위의 경우 CSS @import 규칙대로 컴파일됩니다.

 

scss

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

연산(Operations)

Sass는 기본적인 연산 기능을 지원합니다.
레이아웃 작업 시 상황에 맞게 크기를 계산을 하거나 정해진 값을 나눠서 작성할 경우 유용합니다.
다음은 Sass에서 사용 가능한 연산자 종류입니다.

 

산술 연산자:

종류	설명	주의사항
+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자(Number)
/	나누기	오른쪽 값이 반드시 숫자(Number)
%	나머지

비교 연산자:

종류	설명
==	동등
!=	부등
<	대소 / 보다 작은
>	대소 / 보다 큰
<=	대소 및 동등 / 보다 작거나 같은
>=	대소 및 동등 / 보다 크거나 같은

논리(Boolean) 연산자:

종류	설명
and	그리고
or	또는
not	부정

 

scss

div {
  width: 20px + 20px;  // 더하기
  height: 40px - 10px;  // 빼기
  font-size: 10px * 2;  // 곱하기
  margin: 30px / 2;  // 나누기
}

Compiled to:

div {
  width: 40px;  /* OK */
  height: 30px;  /* OK */
  font-size: 20px;  /* OK */
  margin: 30px / 2;  /* ?? */
}

/를 나누기 연산 기능으로 사용하려면 다음과 같은 조건을 충족해야 합니다.

• 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
• 값이 ()로 묶여있는 경우
• 값이 다른 산술 표현식의 일부로 사용되는 경우

scss

div {
  $x: 100px;
  width: $x / 2;  // 변수에 저장된 값을 나누기
  height: (100px / 2);  // 괄호로 묶어서 나누기
  font-size: 10px + 12px / 3;  // 더하기 연산과 같이 사용
}

 

Compiled to:

div {
  width: 50px;
  height: 50px;
  font-size: 14px;
}

논리(Boolean)

Sass의 @if 조건문에서 사용되는 논리(Boolean) 연산에는 ‘그리고’,’ 또는’, ‘부정’이 있습니다.
자바스크립트 문법에 익숙하다면 &&, ||, !와 같은 기능으로 생각하면 됩니다.

 

scss

$width: 90px;
div {
  @if not ($width > 100px) {
    height: 300px;
  }
}

Compiled to:

div {
  height: 300px;
}

Mixins

Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 아주 훌륭한 기능입니다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다.

우선, Mixin은 두 가지만 기억하면 됩니다. 선언하기(@mixin)와 포함하기(@include)입니다. 만들어서(선언), 사용(포함)합니다.

@mixin 지시어를 이용하여 스타일을 정의합니다.

// SCSS
@mixin 믹스인이름 {
  스타일;
}

// Sass
=믹스인이름
  스타일

// SCSS
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

// Sass
=large-text
  font-size: 22px
  font-weight: bold
  font-family: sans-serif
  color: orange

@include

선언된 Mixin을 사용(포함) 하기 위해서는 @include가 필요합니다.
위에서 선언한 Mixin을 사용해 보겠습니다.

// SCSS
@include 믹스인이름;

// Sass
+믹스인이름

// SCSS
h1 {
  @include large-text;
}
div {
  @include large-text;
}

// Sass
h1
  +large-text
div
  +large-text

Compiled to:

h1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
h1::after {
  content: "!!";
}
h1 span.icon {
  background: url("/images/icon.png");
}

div {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
div::after {
  content: "!!";
}
div span.icon {
  background: url("/images/icon.png");
}

인수(Arguments)

Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다.
하나의 Mixin으로 다양한 결과를 만들 수 있습니다.

// SCSS
@mixin 믹스인이름($매개변수) {
  스타일;
}
@include 믹스인이름(인수);

// Sass
=믹스인이름($매개변수)
  스타일

+믹스인이름(인수)

scss

@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, red); }
.box2 { @include dash-line(4px, blue); }

Compiled to:

.box1 {
  border: 1px dashed red;
}
.box2 {
  border: 4px dashed blue;
}

scss

@mixin position(
  $p: absolute,
  $t: null,
  $b: null,
  $l: null,
  $r: null
) {
  position: $p;
  top: $t;
  bottom: $b;
  left: $l;
  right: $r;
}

.absolute {
  // 키워드 인수로 설정할 값만 전달
  @include position($b: 10px, $r: 20px);
}
.fixed {
  // 인수가 많아짐에 따라 가독성을 확보하기 위해 줄바꿈
  @include position(
    fixed,
    $t: 30px,
    $r: 40px
  );
}

Compiled to:

.absolute {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.fixed {
  position: fixed;
  top: 30px;
  right: 40px;
}

@content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있습니다.
이 방식을 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있습니다.

@mixin 믹스인이름() {
  스타일;
  @content;
}

@include 믹스인이름() {
  // 스타일 블록
  스타일;
}

scss

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

Compiled to:

.icon1::after {
  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

확장(Extend)

특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우가 종종 있습니다.
이럴 경우 선택자의 확장 기능을 사용할 수 있습니다.

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}

조건과 반복(Control Directives / Expressions)

조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환합니다. 조건부 삼항 연산자(conditional ternary operator)와 비슷합니다. 조건의 값이 true이면 표현식1을, 조건의 값이 false이면 표현식2를 실행합니다.

if(조건, 표현식1, 표현식2)

scss

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

Compiled to:

div {
  width: 555px;
}

@if (지시어)

@if 지시어는 조건에 따른 분기 처리가 가능하며, if 문(if statements)과 유사합니다.
같이 사용할 수 있는 지시어는 @else, if가 있습니다.
추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있습니다.

 

scss

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

Compiled to:

div {
  color: #FE9A2E;
}

 

조건에는 논리 연산자 and, or, not을 사용할 수 있습니다.

 

scss

@function limitSize($size) {
  @if $size >= 0 and $size <= 200px {
    @return 200px;
  } @else {
    @return 800px;
  }
}

div {
  width: limitSize(180px);
  height: limitSize(340px);
}

Compiled to:

div {
  width: 200px;
  height: 800px;
}

scss

@mixin pCenter($w, $h, $p: absolute) {
  @if
    $p == absolute
    or $p == fixed
    or not $p == relative
    or not $p == static
  {
    width: if(unitless($w), #{$w}px, $w);
    height: if(unitless($h), #{$h}px, $h);
    position: $p;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

.box1 {
  @include pCenter(10px, 20px);
}
.box2 {
  @include pCenter(50, 50, fixed);
}
.box3 {
  @include pCenter(100, 200, relative);
}

Compiled to:

.box1 {
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.box2 {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

@for

@for는 스타일을 반복적으로 출력합니다. for 문과 유사합니다. @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉩니다. 두 형식은 종료 조건이 해석되는 방식이 다릅니다.

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

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

scss

// 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
  }
}

Compiled to:

.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; }

@each

@each는 List와 Map 데이터를 반복할 때 사용합니다.
for in 문과 유사합니다.

@each $변수 in 데이터 {
  // 반복 내용
}

scss

// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}

Compiled to:

.fruits li.apple {
  background: url("/images/apple.png");
}
.fruits li.orange {
  background: url("/images/orange.png");
}
.fruits li.banana {
  background: url("/images/banana.png");
}
.fruits li.mango {
  background: url("/images/mango.png");
}

내장 함수(Built-in Functions)

Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있습니다.
모두 소개하지 않고, 주관적 경험에 의거해 필요하거나 필요할 수 있는 함수만 정리했습니다.

Sass Built-in Functions에서 모든 내장 함수를 확인할 수 있습니다.

• []는 선택 가능한 인수(argument)입니다.
• Zero-based numbering을 사용하지 않습니다.

색상(RGB / HSL / Opacity) 함수

mix($color1, $color2) : 두 개의 색을 섞습니다.

lighten($color, $amount) : 더 밝은색을 만듭니다.

darken($color, $amount) : 더 어두운색을 만듭니다.

saturate($color, $amount) : 색상의 채도를 올립니다.

desaturate($color, $amount) : 색상의 채도를 낮춥니다.

grayscale($color) : 색상을 회색으로 변환합니다.

invert($color) : 색상을 반전시킵니다.

rgba($color, $alpha) : 색상의 투명도를 변경합니다.

opacify($color, $amount) / fade-in($color, $amount) : 색상을 더 불투명하게 만듭니다.

transparentize($color, $amount) / fade-out($color, $amount) : 색상을 더 투명하게 만듭니다.

문자(String) 함수

unquote($string) : 문자에서 따옴표를 제거합니다.

quote($string) : 문자에 따옴표를 추가합니다.

str-insert($string, $insert, $index) : 문자의 index번째에 특정 문자를 삽입합니다.

str-index($string, $substring) : 문자에서 특정 문자의 첫 index를 반환합니다.

str-slice($string, $start-at, [$end-at]) : 문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출합니다.

to-upper-case($string) : 문자를 대문자를 변환합니다.

to-lower-case($string) : 문자를 소문자로 변환합니다.

숫자(Number) 함수

percentage($number) : 숫자(단위 무시)를 백분율로 변환합니다.

round($number) : 정수로 반올림합니다.

ceil($number) : 정수로 올림합니다.

floor($number) : 정수로 내림(버림)합니다.

abs($number) : 숫자의 절대 값을 반환합니다.

min($numbers…) : 숫자 중 최소 값을 찾습니다.

max($numbers…) : 숫자 중 최대 값을 찾습니다.

random() : 0 부터 1 사이의 난수를 반환합니다.

List 함수

모든 List 내장 함수는 기존 List 데이터를 갱신하지 않고 새 List 데이터를 반환합니다.
모든 List 내장 함수는 Map 데이터에서도 사용할 수 있습니다.

length($list) : List의 개수를 반환합니다.

nth($list, $n) : List에서 n번째 값을 반환합니다.

set-nth($list, $n, $value) : List에서 n번째 값을 다른 값으로 변경합니다.

join($list1, $list2, [$separator]) : 두 개의 List를 하나로 결합합니다.

zip($lists…) : 여러 List들을 하나의 다차원 List로 결합합니다.

index($list, $value) : List에서 특정 값의 index를 반환합니다.

Map 함수

모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map 데이터를 반환합니다.

map-get($map, $key) : Map에서 특정 key의 value를 반환합니다.

map-merge($map1, $map2) : 두 개의 Map을 병합하여 새로운 Map를 만듭니다.

map-keys($map) : Map에서 모든 key를 List로 반환합니다.

map-values($map) : Map에서 모든 value를 List로 반환합니다.

관리(Introspection) 함수

variable-exists(name) : 변수가 현재 범위에 존재하는지 여부를 반환합니다.(인수는 $없이 변수의 이름만 사용합니다.)

unit($number) : 숫자의 단위를 반환합니다.

unitless($number) : 숫자에 단위가 있는지 여부를 반환합니다.

comparable($number1, $number2) : 두 개의 숫자가 연산 가능한지 여부를 반환합니다.

 

 

 

출처 : heropy.blog/2018/01/31/sass/