Sass는 CSS 확장언어이다.
까먹지 않기 위해 scss 사용법을 정리 해보려 한다.
1. 중첩과 선택자
중첩(Nesting)
- 선택자나 속성의 관계를 중첩 형태로 표현하는 문법이다.
- 상위 선택자의 반복을 피할 수 있다.
- 선택자를 중첩:
규칙 중첩, css 속성 중첩:속성 중첩
- 규칙중첩
- 구조를 한눈에 보기 쉽다.
- depth를 3 이상 사용할 경우, 재활용성이 제한적이다. => 별개의 클래스를 만드는 것을 추천
SASS 코드
#gnb { background-color: #fff; width: 200px; ul { display: flex; color: #111; } }
css 컴파일 코드
#gnb { background-color: #fff; width: 200px; } #gnb ul { display: flex; color: #111; }
- 속성 중첩
- css의 공통된 네임 스페이스 속성을 중첩하는 문법
ex)font-family,font-size,font-style,font-weight
SASS 코드
h1 { font: { family: 'Malgun Gothic'; size: 25px; style: normal; weight: bold; } line-height: 1; }
css 컴파일 코드
h1 { font-family: 'Malgun Gothic'; font-size: 25px; font-style: normal; font-weight: bold; line-height: 1; }
특수 선택자
CSS 문법과 동일한 선택자 외에 특수 선택자 2가지 기능을 제공
부모 참조 선택자, 플레이스홀더 선택자
부모 참조 선택자
중첩 안에서 '&(Ampersand)'를 사용해 상위 엘리먼트를 참조
1. 부모 참조 선택자를 부모 엘리먼트와 결합하여 사용하는 방법
SASS 코드
.btn { color: #000; &.active { color:coral; } } .list_gnb { li { &:first-child { margin-left: 0; } } } div { &[class^='section_'] { background-color: #ccc; } }
css 컴파일 코드
.btn { color: #000; } .btn.active { color: coral; } .list_gnb li:first-child { margin-left: 0; } div[class^='section_'] { background-color: #ccc; }
- 부모 참조 선택자를 하위 자식 선택자로 이동하여 사용하는 방법
SASS 코드
.list_gnb { li { &:first-child { margin-left: 0; } div.section & { margin-left: 20px; } } }
css 컴파일 코드
.list_gnb li:first-child { margin-left: 0; } div.section .list_gnb li { margin-left: 20px; }
플레이스홀더 선택자
@extend로 호출하며 %(Percent)를 사용해 함수나 변수를 사용하듯이 내가 원하는 요소에 불러와 사용할 수 있음
SASS 코드
h1, %title-type { color: #000; } h2 { @extend %title-type; }
css 컴파일 코드
h1, h2 { color: #000; }
2. 주석과 연산자
주석
CSS 표준 문법과 동일하게 // 인라인(한 줄) 주석과 /* */ 블록(여러 줄) 주석을 기능을 지원
인라인 주석
컴파일된 CSS 파일에 출력되지 않음.
블록 주석
컴파일하는 스타일에 따라 다르게 나타남.
nested, expanded는 주석 그대로 컴파일
compact는 여러 줄로 주석을 작성하였더라도 주석이 한 줄로 컴파일
compressed는 CSS 파일에 주석이 노출되지 않지만 /*! */ 문법으로 작성하면 주석이 삭제되지 않고 노출 가능
- 주석에 변수를 삽입할 수 있다.
$author_n1: 'SHE'; $author_n2: 'CJW'; $author_n3: 'PKL'; /* Malgun Communication Web Standard Team Author #{$author_n1}, #{$author_n2}, #{$author_n3} */
연산자
사칙 연산자, 비교 연산자, 논리 연산자 사용 가능
사칙 연산자(+, -, *, /)
- /(나누기) 사용 시 괄호로 감싸야한다.
=> 감싸지 않으면 연산이 되지 않고 연산자만 컴파일
width: 500px + 500px;
비교 연산자(>, ==, !== 등)
논리 연산자(and, or, not)
$width: 50px; .box { @if not ($width > 100px) { height: 200px; } }
3. 변수
문자열, 숫자, 색상, 불리언(true, false), 리스트(Array), null 을 $변수명 : 값; 의 문법 형태로 작성하여 사용
$color-red: #ff0000;
변수의 유효 범위( Variables Scope)
- 전역 변수: 문서의 최상위 위치. => 어떠한 규칙에도 포함되지 않으며, 문서 어디서나 사용 가능
- 지역 변수: 선언된 블록 코드 { } 내에서만 유효 범위를 가짐
=> BUT 지역 변수에 !global 플래그를 사용하면 전역 변수로 사용 가능
div { $color-red: #ff0000; //지역 변수 $width: 50% !global; // !global 전역 변수 color: $color-red; } p { width: $width; }
변수는 재할당 가능
$width: 100%; $box-width: $width; .box-width { width: $box-width; }
!default
할당되지 않은 변수의 초기값을 설정 가능
SASS 코드
$color-base: pink; .box { $color-base: orange !default; color: $color-base; }
css 컴파일 코드
.box { color: pink; }
#{ } (변수 문자 보간)
#{ } 를 이용하여 어디서든 변수값을 문자열로 넣을 수 있음
$value25: 25; $value77: 77; // 숫자값인 변수를 + 연결하면 연산되어 102 값이 나옴 .box-variables { width: $value25 + $value77 + px; } // 문자 보간으로 변수를 + 연결하면 문자값인 2577 값이 나옴 .box-string_v2 { width: #{$value25} + #{$value77} + px; }
