SCSS & SASS

Sass (Synthetically Awesome StyleSheets)

• CSS 전처리기
• 변수, 상속, 혼합, 중첩 등의 다양한 기능 제공
• 다만 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행 가능
• CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램

---

SCSS == Sass

• SCSS는 Sass의 모든 기능을 지원하는 Superset

Sass와 SCSS의 차이점

• Sass : 중괄호가 아닌 들여 쓰기를 사용 (like Python)
• SCSS : CSS처럼 {}와 ;을 사용 (like Javascript)

---

1. Data Types

• 다양한 데이터 타입을 정의하고 있기 때문에 이를 변수처럼 활용 가능

Numbers	숫자	1, .82, 20px, 2em…
Strings	문자	bold, relative, "/images/a.png", "dotum"
Colors	색상 표현	red, blue, #FFFF00, rgba(255,0,0,.5)
Booleans	논리	true, false
Nulls	아무것도 없음	null
Lists	공백이나 ,로 구분된 값의 목록	(apple, orange, banana), apple orange
Maps	Lists와 유사하나 값이 Key: Value 형태 (객체와 비슷)	(apple: a, orange: o, banana: b)

$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
  l: light,
  d: dark,
);

---

2. Nesting (중첩)

• 상위 선택자의 반복 감소 가능
• 복잡한 구조를 더 편리하게 개선

/* SCSS */
.section {
  width: 100%;

  .list {
    padding: 20px;

    li {
      float: left;
    }
  }
}

/* Compile to CSS */
.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

---

3. & (상위 선택자 참조)

• Nesting(중첩) 내부에서 & 키워드는 상위(부모) 선택자로 치환

/* SCSS */
.btn {
  position: absolute;
  &.active {
    color: red;
  }
}
.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

/* Compile to CSS */
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

• 치환의 원리이기 때문에 다음과 같이 응용 가능

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

/* Compile to CSS */

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

---

4. 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");
}

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

Variable Scope

• 변수는 선언된 블록 내에서만 유효 범위를 보유

.box1 {
  $color: #111;
  background: $color;
}

/* Error */
.box2 {
  background: $color;
}

#{ }

• **#{ }**를 이용하면 JavaScript의 템플릿 리터럴처럼 코드의 어디든지 변수 값 삽입 가능

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

/* Compile to CSS */
@import url("<http://fonts.googleapis.com/css?family=Droid+Sans>");

---

5. Operations (연산)

• 연산자는 레이아웃을 디테일하게 디자인할 때 유용하게 사용 가능

 

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

---

6. Mixins (재활용)

• Mixin은 재사용할 CSS 스타일을 정의할 수 있는 유용한 기능
• @mixin을 통해 스타일을 선언하고 @include을 통해 사용

/* 선언 - @mixin */

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

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

/* 사용 - @include */

h1 {
  @include large-text;
}

div {
  @include large-text;
}

---

7. Functions (함수)

• 함수를 정의하여 사용 가능

Mixin과 함수의 차이점

• Mixin : 지정한 스타일(Style)을 반환
• 함수 : 계산된 특정 값을 @return 지시어를 통해 반환

/* SCSS */

$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns);
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns(); // 1
  }

  .box2 {
    width: columns(8);
  }

  .box3 {
    width: columns(3);
  }
}

/* Compile to CSS */

.box_group {
  /* 총 너비 */
  width: 980px;
}

.box_group .box1 {
  /* 총 너비의 약 8.3% */
  width: 81.66667px;
}

.box_group .box2 {
  /* 총 너비의 약 66.7% */
  width: 653.33333px;
}

.box_group .box3 {
  /* 총 너비의 25% */
  width: 245px;
}

---

8. Condition (조건)

if (조건문, 참, 거짓)

• 조건의 참 거짓에 따라 하나의 값 반환
• == JavaScript의 삼항 연산자

/* SCSS */
$width: 555px;

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

/* Compile to CSS */

div {
  width: 555px;
}

@if, @else, @else if

• 조건에 따른 분기 처리 가능
• == JavaScript의 if-else문

/* SCSS */

$color: orange;

div {
  @if $color == strawberry {
    color: #fe2e2e;
  } @else if $color == orange {
    color: #fe9a2e;
  } @else if $color == banana {
    color: #ffff00;
  } @else {
    color: #2a1b0a;
  }
}

/* Compile to CSS */

div {
  color: #fe9a2e;
}

---

9. Loop (반복)

@for

• 스타일을 반복적으로 출력
• == JavaScript의 for문
• through와 to 종료 조건
  • from a **through** b : a부터 b까지 반복 (b 포함)
  • from a **to** b : a부터 b 직전까지 반복

/* SCSS */

/* 1부터 3까지 반복 (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;
  }
}

/* Compile to CSS */
.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

• List 또는 Map 데이터를 반복할 때 사용
• == JavaScript의 for-in / for-of문

/* SCSS */

// List
@each $animal in puma, sea-slug, egret, salamander {

  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// Map
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

/* Compile to CSS */
.puma-icon {
  background-image: url("/images/puma.png");
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}
.egret-icon {
  background-image: url("/images/egret.png");
}
.salamander-icon {
  background-image: url("/images/salamander.png");
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

---

10. Built-in Functions (내장 함수)

• Sass에선 기본적으로 다양한 내장 함수를 제공
• 종류가 다양하니 필요에 따라 찾아보면서 사용 권장

.item:nth-child(1) {
  background-color: $color;
}
.item:nth-child(2) {
  background-color: lighten($color, 20%);
}
.item:nth-child(3) {
  color: white;
  background-color: darken($color, 20%);
}
.item:nth-child(4) {
  background-color: grayscale($color);
}
.item:nth-child(5) {
  background-color: rgba($color, 0.3);
}
.item:nth-child(6) {
  background-color: invert($color);
}