1 Sass 설치
1) node.js 설치
2) 글로벌로 node-sass 설치
 > $ npm install -g node-sass
 > $ npm-sass -v (버젼확인)


1 Sass visual studio code 설치.
1) vscode Extenstion 확장기능 sass 검색 
- Sass 추가
- Live Sass compiler
- live Server 추가 (선택)

2. 환경설정. 
vscode > 파일 > 기본설정 > 설정 > "sass" 입력. > settings.json에서 편집

    \"liveSassCompile.settings.formats\": [
        {
            \"format\": \"expanded\", //\"format\": \"expanded\",\"format\": \"compressed\"
            \"extensionName\": \".css\",
            //\"savePath\": \"~/css\"
            \"savePath\": \"~/../sys_css_js\" // \"savePath\": \"~/css\"
            
        }
    ],

3. 명령어
 > $ 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


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

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

https://sass-lang.com/documentation 
https://poiemaweb.com/


 ** 변수설정
-- 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\")}