연습장
요약 본문
설치
$ npm install -g sass
버전확인
$ sass --version
트랜스파일링(컴파일)
$ sass src/sass:dist/css
package.json 사용시
"scripts": {
"build:sass": "sass --style compressed src/sass:dist/css",
},
변수
$변수명
$변수명 : 값 !global // 전역변수로 바꿀때
$변수명 : 값 !default // 초기값
Interpolation
#{$변수명} // 변수의 값을 문자열로 삽입
Ampersand
&:hover // &는 부모요소를 참조하는 셀렉터이다.
Nesting // 선언을 중첩
#navbar{
ul{
li{
...
}
}
}
연산자
+ - * / % == !=
단, / 는 주의해야함.
partial : 기능에 따라 CSS 파일을 분리
_name // @import 가능, 트랜스파일링 x
@import // 가져와서 사용
@use // import 대체
@forward // 중간에서 결합하여, use 를 적게 사용
@extend // 상속
if // if(조건, 참, 거짓)
@if ... @else
@for // 반복
@each // 리스트 반복
@while // 반복
@mixin // @include으로 style 반환
@function // @return으로 값을 반환
주석
css /**/ 만 가능
scss // , /**/ 가능
기본내장함수
https://js0616.tistory.com/304
webpack 환경 사용법
https://js0616.tistory.com/305
예시
// src/sass/main.scss
@import "./partials/var";
@import "./partials/body";
@import "./partials/catImg"
// src/sass/partials/_vars.scss
$font_color: red;
$font_family: Arial, sans-serif;
$font_size: 32px;
$line_height: percentage(calc(20px / $font_size));
$box_size : 100px
// src/sass/partials/_body.scss
body {
color: $font_color ;
// Property Nesting
font: {
size: $font_size;
family: $font_family;
}
line-height: $line_height;
}
'Sass' 카테고리의 다른 글
7-1 패턴 (0) | 2024.08.31 |
---|---|
06. Live Sass Compiler (0) | 2024.08.21 |
05. Webpack 개발 환경에서 Sass 사용하기 (0) | 2024.08.08 |
04. 기본 내장 함수 (0) | 2024.08.08 |
03. Nesting, import, extend, 조건과 반복, Mixin, Function (0) | 2024.08.08 |