[Chapter 02] Sass

Sass

Variable Defaults와 global : !default, !global

!default 플래그는 value값의 끝에 쓰고 변수가 이미 할당된 경우는 재할당하지 않지만 아직 값을 갖지 않는 null인 경우에는 !defalut 플래그의 value값으로 할당됩니다. 

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

#demo {
  $width : 5em !global; // 전역변수처럼 사용합니다.
  width: $width;
}
#sidebar {
  width: $width;
}

See the Pen sass default 플래그 by jaeheekim (@jaehee) on CodePen.

위의 코드를 살펴보도록 하겠습니다.

ㆍ 이미 변수가 할당되어 있기 때문에 !default 플래그의 기본값이 아닌 변수값으로 할당됩니다.

ㆍ 변수 값이 null 값이기 때문에 !default 플래그의 기본값으로 할당되게 됩니다.

ㆍ 셀렉터내에서도 !global 플래그를 사용하면 전역 변수처럼 사용이 가능합니다.

Interpolation : #{} 보간법 사용하기

SASS 는 변수를 "" 내부에서 처리할 수 있는 보간법을 지원하고 있습니다..

다시 말해서, #{} 구문을 사용하여 선택자 및 속성 이름에 변수를 사용할 수가 있습니다.

$name: foo;
$attr: border;

p.#{$name} {
    #{$attr}-color: blue;
}

div {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

See the Pen sass 보간법 by jaeheekim (@jaehee) on CodePen.

데이터 타입

sass의 데이터 타입에는 다음과 같은 것들이 있다

- 숫자 : 1,2,3.... 10px도 숫자타입이다.

- 문자열 : ""(겹따옴표), ''(홑따옴표), 따옴표가 없는 것들 모두 문자열로 인식    ex) "foo", 'bar', baz

- 색상 : blue, #00ff00, rgba(255,0,0,0.5)불리언 : true, false

- null

- value 항목들은 콤마를 구분자로 하여 정의한다. ex) 1.5em 1em 0 2em, Helvetica, Arial, sans-serif

- map(해시) : 괄호 속에서 key:value 쌍이 괄호로 구분

Maps

맵은 키로 값을 찾는 곳에서 키와 값 사이의 관계를 나타냅니다.

동적으로 이름지어진 그룹의 values에 쉽게 접근이 가능합니다. (key들의 그룹으로 값을 수집할 수 있도록 해당 그룹에 접근이 가능)

맵은 항상 괄호로 묶어야 하며 쉼표로 구분해야 합니다. 

Map은 대부분 SassScript 기능을 사용하여 조작할 수 있습니다. 

@each 지시어를 사용하여 맵 내에서 각각의 키/값 쌍에 스타일을 정의하는데 사용됩니다.

Division /(나누기연산자 사용) 및 Color Operations (컬러 연산)

p {
    font: 10px/8px;             // 일반적인  css 로는 나누기 연산을 할 수 없다
    $width: 1000px;
    width: $width/2;            // 변수를 사용하여 나누기 연산을 실행
    width: round(1.5)/2;        // 사스함수를 사용하여 나누기 연산을 실행
    height: (500px/2);          // 괄호를 사용하여 나누기 연산을 실행
    margin-left: 5px + 8px/2px; // 플러스 연산자와 함께 나누기 연산을 실행
}

div {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

p {
  color: #010203 + #040506;
}
/*  01 + 04 = 05, 02 + 05, 03 + 06 = 09로 컴파일된다  */

// opacity(), tranparentize() 함수 사용
$translucent-red: rgba(255, 0, 0, 0.5);
div {
    color: opacify($translucent-red, 0.3);
    background-color: transparentize($translucent-red, 0.25);
}

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;

// ie-hex-str() 함수 사용
span {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

See the Pen sass 연산 by jaeheekim (@jaehee) on CodePen.

컬러값은 RGB로 각각 수행되면서 산술연산을 지원합니다.

컬러의 알파채널은 opacity와 transpentize 함수를 이용하여 적용할 수 있습니다.

IE필터는 #AABBCCDD와 같은 엄격한 포맷인 알파 계층을 포함하고 있는 모든 컬러들을 필요로 한다. Sass에서는 이를 보다 쉽게 변환할 수 있도록 ie-hex-str() 함수를 제공해 준다. 

- String Operations(문자열 연산)은 sass reference 참고.

@extend

Multiple Extends

하나의 선택자는 하나이상으로 선택자를 확장할 수 있습니다.

즉, 모든 확장된 선택자에서 스타일를 상속한다는 의미입니다.

.error {
    border: 1px #f00;
    background-color: #fdd;
}

.attention {
    font-size: 3em;
    background-color: #ff0;
}

.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

/* --------------------------------------------------------- */
.demo-01 {
    border: 1px #f00;
    background-color: #fdd;
}

.demo-02 {
    @extend .demo-01;
    border-width: 3px;
}

.demo-03 {
    @extend .demo-02;
    position: fixed;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
}

See the Pen sass extend by jaeheekim (@jaehee) on CodePen.

그리고 @extend .error; @extend .attention; 은 선택자들의 항목을 콤마로 구분하여 다음과 같이 쓸 수 있습니다.

@extend .error, attention;

Chaining Extends

- 한개의 선택자는 차례로 세번째의 확장된 다른 선택자를 확장하는 것이 가능하다.

@at-root

@at-root 지시어는 하나 이상의 규칙을 부모 선택자 아래 중첩되지 않고 document root상에 출력된다.

.parent {
  @at-root {
    .child1 {
      font-size: 12px;
    }
    .child2 {
      padding: 10px;
    }
  }
  .step-child {
    color: #c4c4c4;
  }
}

@media print {
  .page {
    width: 8in;
    color: blue;
    @at-root (without: media) {
      color: red;
    }
  }
}

See the Pen sass @at-root by jaeheekim (@jaehee) on CodePen.

@at-root (without: ...) 와 @at-root(with: ...) 

기본적으로 @at-root는 단순히 부모선택자를 제외하지만  @media와 같은 중첩된 지시어의 밖으로 옮기는 것도 가능하다.

@at-root, @content, @mixin 의 활용

@mixin element($name) {
  @at-root #{&}_#{$name} {
    @content;
  }
}

@mixin modifier($name) {
  @at-root #{&}--#{$name} {
    @content;
  }
}

.block {
  color: #000000;
  @include element(noticeWrap) {
    color: green;
    @include modifier(noticeChild) {
      padding: 10px;
    }
  }
  @include  modifier(notice2) {
    color: #0056b3;
  }
}

See the Pen sass 활용1 by jaeheekim (@jaehee) on CodePen.

Jaehee's e-room