[SASS(SCSS)] SASS(SCSS) 설치
2024.01.10
북마크 작성자 정보
작성일/수정일
2024-01-10 22:35:47 / 2024-01-10 22:35:47
1 Sass 설치.
1) node.js 설치
2) 글로벌로 node-sass 설치
> $ npm install -g node-sass
> $ npm-sass -v (버젼확인)
1 Sass visual studio code 설치.
1) vscode 확장기능
- live Server 추가
- Sass 추가
- Live Sass compiler
2. 명령어
> $ node-sass [옵션] <인풋파일> <아웃파일>
> $ node-sass -w scss/style.scss css/style.css --output-style compressed
//원본
https://okayoon.tistory.com/entry/VSCode-extension%EC%9C%BC%EB%A1%9C-SASSSCSS%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90
https://webclub.tistory.com/56?category=541910
** 변수설정
/*
$변수 : 속성값;
$변수 : 속성값 !default;
*/
$fsize : 14px;
$bsWith : 100%;
.ls_area {
width:$bsWidth;
.ls {
poisotion:relative; width:$bsWith; font-size:$fsize; margin-right:10px;
&:last-child { margin-right:0px; }
}
}
@mixin, @include
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(20px); }