[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.
$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};
}데이터 타입
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)}');
}컬러값은 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;
}
}