&
부모를 그대로 가져온다. (네스팅된 부모 선택)
변수
$ + "작명" : "저장할 내용";
내장되어 있는 색관련 함수
darken: 어둡게
lighten: 밝게
saturate: 높은 채도(선명하게)
desaturate: 낮은 채도(흐리게)
adjust-hue: 명도 변경
rgba: alpha값 변경
@extend
css 스타일 확장
%
임시 클래스
@mixin
@extend와 비슷하지만 매개 변수를 활용할 수 있는 점에서 다르다.
@function
재사용성을 위해 함수를 사용하면 좋다.
연산자
Sass에서는 calc함수를 이용하지 않아도 +, -, *, / 연산자를 사용할 수 있다.
/ 나누기는 연산이 필요한 수식인지 알아야 사용 가능하므로 () 괄호 안에 나누기를 넣거나 다른 연산자와 함께 사용할 수 있다.
혹은 math.div() 함수를 사용한다. [ width: math.div(200px, 2); ]
https://sass-lang.com/documentation/modules/math
@use
다른 파일에 import 되는 용도로 _test.scss 의 변수를 사용할 수 있다.
sass/
|
|– abstracts/
| |– _variables.scss # Sass 변수
| |– _functions.scss # Sass 함수
| |– _mixins.scss # Sass 믹스인
| |– _placeholders.scss # Sass 플레이스홀더
|
|– base/
| |– _reset.scss # 리셋/정규화
| |– _typography.scss # 타이포그래피 규칙
| … # 기타.
|
|– components/
| |– _buttons.scss # 버튼
| |– _carousel.scss # 캐러셀
| |– _cover.scss # 커버
| |– _dropdown.scss # 드롭다운
| … # 기타.
|
|– layout/
| |– _navigation.scss # 네비게이션
| |– _grid.scss # 그리드 시스템
| |– _header.scss # 헤더
| |– _footer.scss # 푸터
| |– _sidebar.scss # 사이드바
| |– _forms.scss # 폼
| … # 기타.
|
|– pages/
| |– _home.scss # 홈 한정 스타일
| |– _contact.scss # 연락처 한정 스타일
| … # 기타.
|
|– themes/
| |– _theme.scss # 디폴트 테마
| |– _admin.scss # 관리자 테마
| … # 기타.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # 기타.
|
`– main.scss # 메인 Sass 파일