프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[SASS(SCSS)] SASS(SCSS) 설치

2024.01.10
북마크 작성자 정보
첨부이미지(0/1)
 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); }
 

이 포스트 공유하기

전체목록