CSS에서는 불가능한 연산, 변수, 함수 등의 확장 기능을 의미한다.
1. 데이터 타입
프로퍼티 값으로 사용할 수 있는 값에는 각각의 데이터 타입(Data type)이 존재한다.
SassScript는 7가지의 데이터 타입을 제공한다.
// 숫자형(Number)
$font-size: 16px;
$line-height: 1.5;
// 문자열(String)
$font-family: 'Arial', sans-serif;
// 컬러(Color)
$primary-color: #3498db;
$secondary-color: rgba(255, 0, 0, 0.5);
// 부울(Boolean)
$is-active: true;
$is-disabled: false;
// 널(Null)
$no-value: null;
// 리스트(List)
$colors: red, green, blue;
$sizes: (10px, 20px, 30px);
// 맵(Map)
$breakpoints: (
small: 480px,
medium: 768px,
large: 1024px
);
데이터 타입을 확인하려면 빌트인 함수인 type-of를 사용한다.
2. 변수
문자열, 숫자, 컬러(#aa443f) 등을 사전에 변수에 저장하고 필요할 때 불러 사용할 수 있다.
변수명은 $ 로 시작한다.
3. 변수의 Scope
변수에는 유효범위(scope)가 존재한다. 코드 블록 내에서 선언된 변수는 지역변수가 된다.
$width: 960px; // 전역 변수
header {
width: $width;
margin: 0 auto;
}
#main {
$color: #333; // 지역 변수
width: $width;
margin: 20px auto;
section {
p {
color: $color;
a:link {
color: $color;
}
}
}
}
footer {
width: $width;
margin: 0 auto;
color: $color; // Error: Undefined variable: "$color".
}
코드 블록 내에서 선언한 변수를 전역 변수로 지정하는 방법은 아래와 같다.
!global
#main {
$color: #333 !global; // 전역 변수
width: $width;
...
4. 연산자
4.1 숫자연산자
| 연산자 |
설명 |
| + |
덧셈 |
| - |
뺄셈 |
| * |
곱셈 |
| / |
나눗셈 |
| % |
나머지 |
| == |
동등 |
| != |
부등 |
$width: 100px;
#foo {
width: $width + 10; // 110px
}
#bar {
width: $width + 10in; // 1060px
}
변수 $width의 값 100px에 10 또는 10em과 같이 다른 단위의 값을 연산하여도 에러없이 연산이 수행된다.
이때 연산자의 왼쪽 값을 기준으로 단위가 설정된다.
$width: 100px;
#foo {
width: $width + 10em; // 100px + 10em => Error: Incompatible units em and px.
}
트랜스파일링 결과 Error: Incompatible units em and px.이라는 에러를 출력한다.
Sass 연산은 대상을 변환하여 연산할 수 없는 경우 에러를 출력한다.
%, em, rem, vh, vw, vmin, vmax과 같이 상대적인 값을 Sass는 알지 못한다.
상대적인 값의 결과값은 브라우저만이 알 수 있기 때문이다.
따라서 상대적인 값을 갖는 단위의 연산은 동일한 단위를 갖는 값과의 연산만이 유효하다.
CSS3의 calc 함수(IE9 이상 사용가능)를 사용하면 이런 문제를 해결할 수 있다.
CSS에서의 /는 나눗셈의 의미가 아니라 값을 구분하는 의미를 갖는다.
p {
/*
font: font-style font-variant font-weight font-size/line-height font-family
*/
font: italic bold 12px/30px Georgia, serif;
}
- font-size: 12px
- line-height: 30px
따라서 Sass의 / 연산자를 사용하기 위해서는 몇가지 조건이 필요하다.
- 변수에 대해 사용
- 괄호 내에서 사용
- 다른 연산의 일부로서 사용
p {
// font와 border-radius의 '/'는 CSS문법에 맞는 표현이므로 연산되지 않는다.
font: italic bold 12px/30px Georgia, serif;
// 타원형 둥근 모서리
border-radius: 10px 20px/20px;
/*
border-top-left-radius: 10px 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 20px;
*/
$width: 1000px;
width: $width / 2; // 변수에 대해 사용 → width: 500px;
height: (500px / 2); // 괄호 내에서 사용 → height: 250px;
margin-left: 5px + 8px / 2px; // 다른 연산의 일부로서 사용 → margin-left: 9px;
}
변수를 CSS의 /와 함께 사용하고자 하는 경우 #{}(Interpolation)를 사용한다.
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height}; // 12px/30px
}
4.2 컬러 연산자
모든 산술 연산자는 컬러값에도 사용할 수 있다.
p {
color: #010203 + #040506;
// R: 01 + 04 = 05
// G: 02 + 05 = 07
// B: 03 + 06 = 09
// => #050709
}
p {
color: #010203 * 2;
// R: 01 * 2 = 02
// G: 02 * 2 = 04
// B: 03 * 2 = 06
// => #020406
}
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
// alpha(투명도)는 연산되지 않는다
// color: rgba(255, 255, 0, 0.75);
}
rgba의 alpha값은 연산되지 않는다. alpha값의 연산을 위해서는 opacify 함수 또는 transparentize 함수를 사용한다.
- opacify 함수: 첫번째 인수로 전달받은 alpha값에 두번째 인수를 더해 불투명도를 증가시킨다.(더 불투명해진다)
- transparentize 함수: 첫번째 인수로 전달받은 alpha값에 두번째 인수를 빼서 불투명도를 감소시킨다.(더 투명해진다)
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3);
// => color: rgba(255, 0, 0, 0.8);
background-color: transparentize($translucent-red, 0.25);
// => background-color: rgba(255, 0, 0, 0.25);
}
4.3 문자열 연산자
+ 연산자는 자바스크립트와 같이 문자열을 연결할 수 있다.
p {
cursor: e + -resize; // e-resize
}
p:before {
content: "Foo " + Bar; // "Foo Bar"
font-family: sans- + "serif"; // sans-serif
}
4.4 불린 연산자
| 연산자 |
설명 |
| && |
and |
| || |
or |
| ! |
not |
4.5 리스트 연산자
리스트를 위한 별도의 연산자는 제공되지 않지만 리스트 함수를 사용하여 필요한 처리를 수행할 수 있다.
5. 함수
6. Interpolation:#{}
인터폴레이션은 변수의 값을 문자열 그대로 삽입한다.
인터폴레이션에 의해 삽입된 문자열은 연산의 대상으로 취급되지 않는다.
변수는 프로퍼티값으로만 사용할 수 있으나 #{}을 사용하면 프로퍼티값은 물론 셀렉터와 프로퍼티명에도 사용할 수 있다.
$name: foo;
$attr: border;
p.#{$name} { // p.foo
#{$attr}-color: blue; // border-color: blue;
}
.someclass {
$font-size: 12px;
$line-height: 30px;
// 연산의 대상으로 취급되지 않도록
font: #{$font-size} / #{$line-height}; // 12px / 30px
}
7. Ampersand(&)
&는 부모요소를 참조하는 셀렉터이다.
a {
color: #ccc;
&.home {
color: #f0f;
}
&:hover {
text-decoration: none;
}
// & > span (X)
> span {
color: blue;
}
span {
color: red;
}
}
위 Sass의 트랜스파일링 결과는 아래와 같다.
a {
color: #ccc;
}
a.home {
color: #f0f;
}
a:hover {
text-decoration: none;
}
a > span {
color: blue;
}
a span {
color: red;
}
8. !default
!default flag는 할당되지 않은 변수의 초기값을 설정한다.
이미 값이 할당되어 있는 변수에 !default flag를 사용하면 적용되지 않는다.
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content; // "First content"
new-content: $new_content; // "First time reference"
}
이러한 특성은 partial에 매우 유용하다.
https://chatgpt.com/
