본문으로 바로가기

[Chapter 02] Sass

category StyleSheet/SASSㆍSCSS 2015.10.27 12:21


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


'StyleSheet > SASSㆍSCSS' 카테고리의 다른 글

[Chapter 04] Sass  (0) 2015.10.27
[Chapter 03] Sass  (0) 2015.10.27
[Chapter 02] Sass  (0) 2015.10.27
[Chapter 01] Sass  (0) 2015.10.27
Sass 활용(웹폰트,PX2EM, accessivility )  (0) 2015.09.14
[Chapter 07] Sass 조건문, 반복문  (1) 2015.09.08

댓글을 달아 주세요