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

** 변수설정
-- PHP처럼 $변수명 변수의 설정 가능값 문자열, 숫자, 불표현식, 리스트, null

/*
$변수 : 속성값; 
$변수 : 속성값 !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; }
   }
}

$color : red, green, blue

h3:nth-child(1) {color: nth($color, 1); }
h3:nth-child(2) {color: nth($color, 2); }
h3:nth-child(3) {color: nth($color, 3); )

//변수  map-get($fnt_weight, 'bold')
$fnt_weight : ("regular":400, "medium":500, "bold":600);

//적용
h3:nth-child(1) { font-weight: map-get($fnt-weight,"regular") }
h3:nth-child(2) { font-weight: map-get($fnt-weight,"medium") }
h3:nth-child(3) { font-weight: map-get($fnt-weight,"big")}

@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); }

//기본값 지정
@mixin border-style ($px:1px, $style:solid, $color:red){
  border: $px $style $color;
}

** import
_파일명.scss 파일은 별도 파일을 생성하지 않는다  import용 파일

//파일명은 _header.scss, _footer.scss   layout.scss 파일에 import
import "header", "footer";