J-Web

Visual Studio Code에서 SCSS 셋팅하기

Visual Studio Code에서 SCSS compiler를 적용하기 위해 테스트를 진행했다.
extension은 Live Sass Compiler와 Easy Sass를 비교했고, 최종적으로 Live Sass Compiler를 선택했다.

Live Sass Compiler

• css format
  • expanded
    • 계층 구조로 정리

        .selector	{
            width:100px;
            height:100px;
        }
      

  • compressed
    • min 버전처럼 공백을 모두 제거
    • @charset이 제거되지만 인코딩 문제 없도록 자동으로 변경(dart-sass 참고, 개발자 답변)

        /* 컴파일 전 */
        .selector:after	{content:"\4F60\597D";}
      
        /* 컴파일 후 */
        .selector:after	{content:"你好";}
      

• 설정(settings.json)

    "liveSassCompile.settings.generateMap": false,	//css map파일 생성
    "liveSassCompile.settings.autoprefix": false,	//벤더프리픽스
    "liveSassCompile.settings.compileOnWatch": false,	//Watch Sass 실행 시 모든 .scss 컴파일
    "liveSassCompile.settings.watchOnLaunch": true,	//Watch Sass 자동 실행
    "liveSassCompile.settings.formats": [	//포맷 설정(복수 설정 가능)
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        },
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": null
        }
    ],
    "liveSassCompile.settings.excludeList": [	//컴파일 제외 파일
        "/**/node_modules/**",
        "/.vscode/**"
    ]
  

자주 쓸만한 SCSS 기능 정리

//rgba
.test_1	{color:rgba(0, 0, 0, 0.5);}
.test_2	{color:rgba(#000, 0.5);}	//매개변수 2개(#16 진수 색상 코드, opacity)로 가능

//연산
.test_3	{line-height:calc(26 / 20);}	//line-height:1.3;
.test_4	{width:percentage(480 / 960);}	//width:50%;

//변수 사용
$width: 960;
$main_color: #d33;
.test_5	{
	width:percentage(300 / $width);	//width:31.25%;
	background-color:$main_color;	//background-color:#d33;
}

//변수 삽입하는 경우 #{$변수명}
$path: 'test';
.test_6	{background-image:url("#{$path}/img.png");}	//background-image:url("test/img.png");

//조건문
$i: 10;
@if($i == 10){
	//참인 경우 실행
	.test_7	{width:100px;}
}

mixin과 function

• mixin: 스타일 묶음을 반환

    @mixin my-mixin($w, $h){
        width: $w;
        height: $h;
    }
  
    .test_mixin	{@include my-mixin(100px, 200px);}
  
    //컴파일 후
    .test_mixin	{
        width:100px;
        height:100px;
    }
  

• function: 하나의 값을 반환

    @function my-func($num1, $num2){
        @return percentage($num1 / $num2);
    }
  
    .test_func	{width:my-func(100, 200);}
  
    //컴파일 후
    .test_func	{width:50%;}