Sass 문법 1 : 값을 저장해놓고 쓰는 '변수'
width, font-size등 자주 쓰지만 기억하기 어려운 값들을 넣으면 매우 편리하다
많은 곳에서 공톡적으로 사용되는 값을 넣으면 좋다
1-1. 사칙연산도 가능하다
덧셈 뺼셈은 px 단위는 px 단위끼리, %단위는 %단위끼리 이렇게 맞춰야한다
곱셉 나눗셈은 보통 뒤에 단위를 쓰지않는다. () 안에 작성해야 잘 작동한다.
Sass 문법 2 : 셀렉터 대신 쓰는 Nesting
셀렉터를 많이 사용하다보면 코드가 복잡해진다.
ex)div.container>div p.first>span::after
셀렉터 조금만 복잡해지만 무슨요소인지 제대로 파악조차 어려운데
셀렉터의 외모를 개선할 수 있는 Nesting이라는 문법이 존재한다.
위 두개의 코드는 같은 기능을 하는 코드이다.
중괄호 안에 또 셀렉터를 쓰면 그것은 셀렉터상의 스페이스바 문법과 동일하게 작성 가능하다.
Sass 문법 3 : 이미 있는 클래스를 확장하는 @extend
이미 존재하는 속성들을 복붙하지 않고 사용할 수 있다.
@extend 그리고 복붙해야할 클래스 명을 뒤에 적어주면 끝!
@extend를 사용 한 후 복붙할 클래스명을 뒤에 적으면 클래스명에 있던 모든 내용이 복붙된다.
보통 비슷한 디자인의 요소들을 양산할 때 많이 사용한다.
Sass 문법 4 : 코드를 한 단어로 축약하는 @mixin
변수랑 매우 유사하지만
변수는 짧은 값 하나만 저장해서 쓸수있는 문법인 반면
@mixin은 스타일 여러줄을 한 단어로 치환해서 사용 가능하다.
1.@mixin 이라고 쓰고,
2.이름을 하나 지어주고 (){}붙이고
3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열하면 된다.
@include mixin이름으로 사용 하면 mixin안에있던 코드가 복붙된다.
얼핏보면 mixin과 extend 문법은 유사하지만,
mixin 만의 장점이 하나 있는데, 내부에 묶어둔 속성들에 구멍을 하나 뚫어줄 수 있다는거다.
소괄호의 역할이 바로 '구멍'인데,
소괄호 구멍안에 아무거나 값을 집어 넣을수 있다.
1. 긴 코드를 한 단어로 축약할 수도 있고
2.코드내부에 구멍을 뚫어 사용할 때마다 각각 다른 내용을 집어넣을 수 있다.
4-1 @mixin 과 @extend의 장단점
@mixin
-인자를 넣을수 있다.
-선택자 관리가 쉬워서 전역으로 쓰기 편하다.
-컴파일된 Css가 길어진다.
@extend
-연관성 있는 셀렉터들을 묶어서 관리할 수 있다.
-미디어쿼리 등으로 셀렉터가 묶일 수 없다면 쓸 수 없다.
선택자끼리 의미론적 관계가 있다면 @extend를,
그렇지 않고 단순히 속성만 겹치는 거라면 @mixin을 쓰는 것이 좋겠다.
Sass 문법 5 : @use와 언더바 파일
이렇게 하면 reset.scss 파일을 해당 scss파일에 전부 복붙 할 수 있다.
scss 파일명을 작명할 때 언더바를 파일명 맨 앞에 붙이는 경우가 있는데
'이 파일은 css파일로 컴파일하지 말아주세요'라는 뜻이다.
