이 글은 패스트캠퍼스 오늘 복습으로 [프론트엔드 개발 올인원 패키지 with React Online] 강의와 HEROPY 블로그의 Sass(SCSS)완전 정복!을 보고 정리한 글입니다.
02. 문법
10. 변수 - 초깃값 설정, 문자 보간
초깃값 설정
!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다.
$color-primary: red;
.box {
$color-primary: blue !default;
background: $color-primary;
}.box {
background: red;
}이 경우 $color-primary의 변수가 red로 설정되어 있기 때문에 그대로 background가 red가 나온 모습을 확인할 수 있다.
이 !default가 유용하게 쓰이는 경우에는 외부 Sass 라이브러리를 연결 했더니 변수 이름이 같아 내가 작성한 코드의 변수들이 Overwrite되는 경우 방지할 수 있다.
#{} (문자 보간)
#{} 를 이용해서 변수의 값을 어디에든 넣을 수 있다.
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");여기서 unquote는 Sass의 내장함수로, 문자에서 따옴표를 제거한다.
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");11. 가져오기
Sass에서 @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일 되는 몇 가지 상황이 있다고 한다.
- 파일 확장자가
.css인 경우 - 파일 이름이
http://또는https://로 시작하는 경우 url()이 붙었을 경우- 미디어쿼리가 있는 경우
위의 경우에, CSS @import 규칙대로 컴파일 된다고 한다.
@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;Sass 에서
@import로 가져온 Sass파일은 모두 단일 CSS 출력 파일로 병합된다.
12. 가져오기 - 여러 파일 가져오기, 파일 분할
여러 파일 가져오기
하나의 @import로 여러 파일을 가져올 수 있다.
파일 이름은 ,로 구분한다.
@import "header", "footer";파일 분할
프로젝트 규모가 커서 다음과 같은 파일 구조로 되어 있다고 가정해보자.
Sass-App
# ...
├─scss
│ ├─header.scss
│ ├─side-menu.scss
│ └─main.scss
# ...다음과 같은 파일 구조가 있을 때, 컴파일을 하게 되면
header.css,side-menu.css,main.css와 같이 3가지의 파일이 생긴다. 그러나 이러한 경우 scss의 파일이 많다면 그만큼 css파일이 생기기 때문에,main.scss로 나머지~.scss파일을 가져오려면 파일들을_(언더바)를 붙여서 관리하면 된다.
Sass-App
# ...
├─scss
│ ├─_header.scss
│ ├─_side-menu.scss
│ └─main.scss
# ...13. 연산
Sass는 기본적인 연산 기능을 지우너한다.
산술 연산자 : +, -, *, /, %
곱하기는 하나 이상의 값이 반드시 숫자여야 하며, 나누기는 오른쪽 값이 반드시 숫자이어야 한다.
비교 연산자: ==, !=, <, >, <=< >=
논리 연산자: and, or, not
14. 연산 - 숫자
상대적 단위 연산
일반적으로 절댓값을 나타내는 px단위와 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산을 해야한다.
width: 50% - 20px; // 단위 모순 에러(Incompatible units error)
width: calc(50% - 20px); // 연산 가능나누기 연산의 주의 사항
css는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다.
따라서 /를 나누기 연산 기능으로 사용하려면 다음과 같은 조건을 충족해야 한다.
- 그 값이 변수에 저장되어 있거나 함수에 의해 반환된 경우
- 값이 ()안에 있는 경우
- 값이 다른 산술식의 일부인 경우
div {
$x: 100px;
width: $x / 2; // 변수에 저장된 값을 나누기
height: (100px / 2); // 괄호로 묶어서 나누기
font-size: 10px + 12px / 3; // 더하기 연산과 같이 사용
}div {
width: 50px;
height: 50px;
font-size: 14px;
}15. 연산 - 문자
문자 연산에는 +가 사용된다.
문자 연산의 결과는 첫 번재 피연산자를 기준으로 하는데, 첫 번째 피연산자에 따옴표가 붙어있으면 결과도 따옴표로 묶여서 나오고 그렇지 않은 경우 따옴표 없이 결과가 나온다.
div::after {
content: "Hello " + World;
flex-flow: row + "-reverse" + " " + wrap
}div::after {
content: "Hello World";
flex-flow: row-reverse wrap;
}content의 첫 번째 피연산자:
"Hello"--> 결과는 따옴표 있음
flex-flow의 첫 번째 피연산자:row--> 결과는 따옴표 없음
16. 연산 - 색상
색상도 연산이 가능하다.
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
}RGBA의 Alpha 값을 연산하기 위해서는 다음과 같은 색상 함수를 사용해야 한다.
opacify, transparentize
$color: rgba(10, 20, 30, .5);
div {
color: opacify($color, .3); // 30% 더 불투명하게 / 0.5 + 0.3
background-color: transparentize($color, .2); // 20% 더 투명하게 / 0.5 - 0.2
}17. 연산 - 논리
Sass는 CSS와 다르게 @if 조건문을 사용할 수 있는데, 이 조건문에서 사용되는 논리 연산에는 and, or, not이 있다.
간단하 예제
$w: 100px;
.item {
display: block;
@if ($w > 50px or $w < 90px) {
height: 400px;
}
@if not ($w > 50px) {
width: 400px;
}
}.item {
display: block;
height: 400px;
}
