appmaster

Sass의 @if 조건문에서 사용되는 논리(Boolean) 연산에는 ‘그리고’,’ 또는’, ‘부정’이 있다. 자바스크립트 문법에 익숙하다면 &&, ||, !와 같은 기능으로 생각하면 된다. and 그리고 or 또는 not 부정(반대) $width: 90px; div { @if not ($width > 100px) { height: 300px; } } div { height: 300px; }

색상도 연산할 수 있다. div { color: #123456 + #345678; // R: 12 + 34 = 46 // G: 34 + 56 = 8a // B: 56 + 78 = ce background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5); // R: 50 + 10 = 60 // G: 100 + 20 = 120 // B: 150 + 30 = 180 // A: Alpha channels must be equal } div { color: #468ace; background: rgba(60, 120, 180, 0.5); }

문자 연산에는 +가 사용된다. 문자 연산의 결과는 첫 번째 피연산자를 기준으로 한다. 첫 번째 피연산자에 따옴표가 붙어있다면 연산 결과를 따옴표로 묶는다. 반대로 첫 번째 피연산자에 따옴표가 붙어있지 않다면 연산 결과도 따옴표를 처리하지 않는다. div::after { content: "Hello " + World; flex-flow: row + "-reverse" + " " + wrap } div::after { content: "Hello World"; flex-flow: row-reverse wrap; }

상대적 단위 연산 일반적으론 절댓값을 나타내는 px 단위로 연산을 한다 하지만, 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야 한다. calc()는 sass뿐만이 아니라 순수 css에서도 사용이 가능하다. width: 50% - 20px; // 단위 모순 에러(Incompatible units error) width: calc(50% - 20px); // 연산 가능 나누기 연산의 주의사항 CSS는 속성 값의 숫자를 분리하는 방법으로 "/" 를 허용하기 때문에 "/" 가 나누기 연산으로 사용되지 않을 수 있다. 예) font: 16px / 22px serif; 같은 경우 font-size: 16px와 line-height: 22px의 속성값 분리를 위해서 "/" 를 사용한..

연산(Operations) Sass는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산을 하거나 정해진 값을 나눠서 작성할 경우 유용하다. 다음은 Sass에서 사용 가능한 연산자 종류 이다. 산술 연산자 종류 설명 주의사항 + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 숫자(Number) --> 단위가 붙어있는 숫자끼리는 계산이 안됨 (예_ 10px * 10px 은 오류) (예_ 10px * 10 = 100px 오류아님) / 나누기 오른쪽 값이 반드시 숫자(Number) --> 단위가 붙어있는 숫자끼리는 계산이 안됨 (예_ 10px / 10px 은 오류) (예_ 10px / 10 = 1px 오류아님) % 나머지 비교 연산자 종류 설명 == 동등 != 부등 대소 / 보다 큰..