SCSS 기본 문법 실습 따라해보기

 

SCSS 기본 실습 

 

1. 선택자, 결합자

 

* 그룹 선택자 : ,

* 기본선택자 : *(전체),.(class), #(id), div(요소), [attr](속성)

 

- 자식 결합자 : >  (부모의 가장 아래에 있는 자식)

- 자손 결합자 : v (띄어쓰기)

- 일반 형제 결합자 : ~ (첫 번째 요소를 뒤따르면서 같은 부모를 공유함)

- 인접 형제 결합자 : + (첫번째 요소 바로 뒤에 있으면서 같은 부모를 공유함)

 

- 가상 클래스 선택자 : :hover, :focus, :checked, :disabled, :not() 등

- 가상 요소 선택자 : ::before, ::after, ::placeholder 등

 

ex) 기본선택자 class 적용하기

ex) 자손결합자 사용하기 SCSS와 CSS비교

 

ex) 자식 결합자 사용하기(div 바로 아래에 있는 span 사용하기)

ex) 일반 형제 결합자 사용하기 (자식 결합자도 함께 사용해 보기)

 

ex) 인접 형제 결합자 사용하기

ex) 인접 형제 결합자 사용하기 (살짝 심화)

 

ex) 가상 클래스 사용자 (checked)

ex) 가상 클래스 사용자 사용하기 (first-child,... 등)

 

ex) 가상 요소 선택자 사용하기

ex) 가상 요소 선택자 사용하기 (살짝 심화)

 

 

2. 변수 사용하기

* $태그-속성 : 값 

ex) 변수를 만들면 여러 태그에서 간단하게 사용할 수 있다.

 

 

3. mixin

- 자주 쓰는 코드 집합 (함께 자주 쓰이는 조건들을 묶어서 간단하게 사용하는 것)

- @mixin name {... }에 사용하고 싶은 조건들을 작성 / @include name을 사용해서  css 적용

 

 

4. function 

- 마음대로 재가공하고 싶은 기능을 지정하여, 그때그때 값을 받아 재가공해서 되돌려주는 것 (=적용하는 것)

- @function function name (변수명)