[Scss] Scss 사용하기

https://www.sassmeister.com/

SassMeister | The Sass Playground!

간단한 scss를 css로 바로 변환해서 볼 수 있는 테스트기 (실시간으로 변환되어 편리하다)

 

---

NESTING(중첩)

자식 선택자를 부모 선택자 블럭 안에 중첩하여 사용할 수 있는 확장된 문법
부모 선택자를 반복하지 않아도 되고 가독성이 뛰어나며, 구조화된 느낌의 코드를 작성할 수 있다.

 

css로 변환하면 아래와 같다.

 

BAD CASE

위처럼 3댑스의 중첩을 사용하는 것은 가독성면에서 좋지 않다.

 

GOOD CASE

---

& (앰퍼샌트, 부모참조 셀렉터)

블럭 안에 앰퍼샌트를 추가해 차상위 셀렉터(부모)를 참조하는 형태의 셀렉터

---

가상클래스, 가상요소, 속성선택자, 클래스 선택자, 아이디 선택자에도 사용 할 수 있다.

---

반대로 앰퍼샌트 앞에 샐렉터를 넣게 되면 부모 샐렉터 앞에 해당 샐렉터를 추가한것과 동일하다.

 

 

---

$Variables (변수 선언)

sass는 변수명 앞에 $ 를 붙여서 선언한다.

변수를 선언하고 해당 값에 변수를 기입하면 css에서 아래와 같이 나온다.

---

전역변수

 

$display_default를  .link에 지역변수로 넣고 .btn에도 해당 변수를 다시 사용하려고 하면 오류가 난다.

---

지역변수

샐렉터 스코프 안에 변수를 선언하게 되면 해당 스코프안에서만 변수사용이 가능하다.

 

.latte 의 스코프 안에 선언된 $size라는 변수가 적용되어 .americano의 width도 12px이다. (지역변수)

그러나 .latte 의 스코프 밖에 있는 .cappuccino는 10px의 size가 적용된다. (전역변수)

지역변수의 우선도가 전역변수보다 더 높다.

 

 

---

!global flag

변수뒤에 붙이면 스코프 안에서도 전역변수로 선언한다.

.cappuccino는 전역변수의 10px이었으나 !global을 선언한 뒤 12px로 변경되었다.

 

---

interpolation #{}

interpolation  : 보간 (끼어들다, 끼어넣다)
반복문, 조건문, 이미지URL삽입 등에 주로 사용한다.

 

 

---

@Mixin 과 @include

자주 사용하는 css패턴, 재사용을 위한 css 구문은 mixin으로 작성하고
작성된 mixin은 include를 이용해 불러온다.

 

다른 mixin을 포함해서 include할 수도 있다.

---

Arguments (인자값 전달)

mixin 뒤에 괄호안애 인자값 전달이 가능

인자의 개수는 같지 않아도 된다.

---

@content

컨텐츠 블록을 mixin에 전달한다.
미디어쿼리문 작성시 유용하다.

 

---

@extend 

이미 정의된 css 룰셋을 가져와서 확장한다.

 

셀렉트부분에 추가가 된다.

 

extend하게 되면 ,(콤마)로 선택자가 뭉치게 된다.

 

 

자식선택자나 인접선택자는 extend할 수 없다. 또한 css의 우선순위를 예측하기 어려울 수도 있다.

 

스코프 안에 있는 선택자는 extend할 수 있으나 스코프 밖에 있는 선택자는 extend할 수 없다

 

 

---

%placeholder

extend를 위한 가상의 룰셋 생성을 위한 셀렉터.
CSS에서는 존재하지 않는 셀렉터의 종류이기 때문에, 컴파일시 노출되지 않는다.