연산 (Operation)
Sass는 기본적인 연산 기능을 지원합니다. 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용합니다. 다음은 Sass에서 사용 가능한 연산자의 종류입니다.
- 산술 연산자
| 종류 | 설명 | 주의사항 |
|---|---|---|
| + | 더하기 | |
| - | 빼기 | |
| * | 곱하기 | 하나 이상의 값이 반드시 순수한 숫자 |
| / | 나누기 | 오른쪽 피연산자가 반드시 순수한 숫자 |
| % | 나머지 |
곱하기의 경우 10px * 10px은 에러가 발생합니다. 여기서 순수한 숫자란 단위가 붙지 않은 순수한 숫자를 의미합니다. 즉, 10px * 10으로 작성해야 합니다.
누나기의 경우 오른쪽 값이 반드시 순수한 숫자(단위가 붙지 않은 숫자)이어야 합니다. 즉, 10px / 2px은 에러가 발생하빈다. 10px / 2로 작성해주어야 합니다.
- 비교 연산자
| 종류 | 설명 |
|---|---|
| == | 동등 |
| != | 부등 |
| < | 대소 / 보다 작은 |
| > | 대소 / 보다 큰 |
| <= | 대소 및 동등 / 보다 작거나 같은 |
| >= | 대소 및 동등 / 보다 크거나 같은 |
- 논리(불린, Boolean) 연산자
| 종류 | 설명 |
|---|---|
| and | 그리고 |
| or | 또는 |
| not | 부정 |
숫자(Numbers)
상대적인 단위 연산
일반적으로 절댓값을 나타내는 px 단위로 연산을 합니다만, 상대적인 단위(%, em, vw 등)의 연산은 CSS calc( )로 연산해야 합니다.
width: 50% - 20px;은 단위 모순 에러가 발생합니다.
width: calc(50% - 20px);로 작성해야 연산이 가능합니다. calc( )함수는 순수한 CSS의 문법으로 단위가 다르더라도 연산이 가능합니다.
나누기 연산의 주의사항
CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있습니다.
예를 들어, font: 16px / 22px serif;같은 경우 font-size와 line-hieght의 속성값 분리를 위해서 /를 사용합니다.
아래 예제에서는 나누기 연산자만 연산되지 않고 그대로 컴파일이 됩니다.
// SCSS
div {
width: 20px + 20px;
heigth: 40px - 19px;
font-size: 10px * 2;
margin: 30px / 2;
}
// CSS
div {
width: 40px;
heigth: 21px;
font-size: 20px;
maring: 30px / 2; // 나누기 연산자로 연산이 되지 않고 그대로 컴파일됨
}따라서 /를 나누기 연산자로 사용하려면 다음과 같은 조건을 충족해야 합니다.
-
값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
-
값이
( )로 묶여있는 경우 -
값이 다른 산술 표현식의 일부로 사용되는 경우
// SCSS
div {
$w: 100px;
width: $w / 2; // 1. 변수에 저장된 값 나누기
height: (100px / 2); // 2. 괄호로 묶어서 나누기
font-size: 10px + 12px / 3; // 3. 다른 산술 표현식의 일부로 작성
}
// CSS
div {
width: 50px;
heigth: 50px;
font-size: 14px;
}문자 (String)
문자 연산에서는 +가 사용됩니다. 문자 연산의 결과는 첫 번째 피연산자를 기준으로 합니다. 첫 번째 피연산자에 따옴표가 붙어있다면 연산 결과에는 따옴표가 붙여 나오고, 반대로 첫 번째 피연산자에 따옵표가 없다면 연산 결과에도 따옴표가 없습니다.
// SCSS
div::after {
content: "Hello, " + world;
flex-flow: row + "-reverse" + " " + wrap;
}
// CSS
div::after {
content: "Hello, world";
flex-flow: row-reverse wrap;
}색상 (Color)
색상도 연산이 가능합니다.
// SCSS
div {
color: #123456 + #345678;
// R: 12 + 34 = 46
// G: 34 + 56 = 8a
// B: 56 + 78 = ce
background-color: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5);
// R: 50 + 10 = 60
// G: 100 + 20 = 120
// B: 150 + 30 = 180
// A: Alpa channels must be eaual
// 알파 부분의 값이 동일해야만 연산이 가능합니다. 알파값이 다르면 연산이 되지 않습니다
}
// CSS
div {
color: #468ace;
background-color: rgba(60, 120, 180, .5);
}rgba에서 Alpa 값은 연산되지 않습니다. 서로 동일한 값이어야 다른 값이 연산됩니다. Alpa 값을 연산하기 위해서는 다음과 같은 색상 함수(Color Function)을 사용해야 합니다.
opacity( ) : 첫 번째 인수로 rgba값을 전달하고, 두 번째 값으로 추가할 Alpa 값을 전달합니다.
transparentize( ) : 첫 번째 인수로 rgba값을 전달하고, 두 번째 값으로 뺄 Alpa 값을 전달합니다.
// SCSS
$color: rgba(10, 20, 30, .5);
div {
color: opacity($color, 0.3);
background-color: transparentize($color, 0.3);
}
// CSS
div {
color: rgba(10, 20, 30, 0.8);
background-color: rgba(10, 20, 30, 0.2);
}논리 (Boolean)
Sass의 @if 조건문에서 사용되는 논리 연산에는 '그리고', '또는', '부정'이 있습니다. 자바스크립트 문법의 &&, ||, !과 같은 기능입니다.
// SCSS
$width: 90px;
div {
@if not ($width > 100px) {
heigth: 300px;
}
}
// CSS
div {
heigth: 300px;
}