Sass
Variable Defaults와 global : !default, !global
!default 플래그는 value값의 끝에 쓰고 변수가 이미 할당된 경우는 재할당하지 않지만 아직 값을 갖지 않는 null인 경우에는 !defalut 플래그의 value값으로 할당됩니다.
위의 코드를 살펴보도록 하겠습니다.
ㆍ 이미 변수가 할당되어 있기 때문에 !default 플래그의 기본값이 아닌 변수값으로 할당됩니다.
ㆍ 변수 값이 null 값이기 때문에 !default 플래그의 기본값으로 할당되게 됩니다.
ㆍ 셀렉터내에서도 !global 플래그를 사용하면 전역 변수처럼 사용이 가능합니다.
Interpolation : #{} 보간법 사용하기
SASS 는 변수를 "" 내부에서 처리할 수 있는 보간법을 지원하고 있습니다..
다시 말해서, #{} 구문을 사용하여 선택자 및 속성 이름에 변수를 사용할 수가 있습니다.
데이터 타입
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 (컬러 연산)
컬러값은 RGB로 각각 수행되면서 산술연산을 지원합니다.
컬러의 알파채널은 opacity와 transpentize 함수를 이용하여 적용할 수 있습니다.
IE필터는 #AABBCCDD와 같은 엄격한 포맷인 알파 계층을 포함하고 있는 모든 컬러들을 필요로 한다. Sass에서는 이를 보다 쉽게 변환할 수 있도록 ie-hex-str() 함수를 제공해 준다.
- String Operations(문자열 연산)은 sass reference 참고.
@extend
Multiple Extends
하나의 선택자는 하나이상으로 선택자를 확장할 수 있습니다.
즉, 모든 확장된 선택자에서 스타일를 상속한다는 의미입니다.
그리고 @extend .error; @extend .attention; 은 선택자들의 항목을 콤마로 구분하여 다음과 같이 쓸 수 있습니다.
@extend .error, attention;
Chaining Extends
- 한개의 선택자는 차례로 세번째의 확장된 다른 선택자를 확장하는 것이 가능하다.
@at-root
@at-root 지시어는 하나 이상의 규칙을 부모 선택자 아래 중첩되지 않고 document root상에 출력된다.
@at-root (without: ...) 와 @at-root(with: ...)
기본적으로 @at-root는 단순히 부모선택자를 제외하지만 @media와 같은 중첩된 지시어의 밖으로 옮기는 것도 가능하다.
@at-root, @content, @mixin 의 활용
