scss php 사용하려면 Live sass Compiler 플러인 추천

scss sass 등 css 스타일을 간단하게 사용 할수 있는 코드를 사용 하려면 react 나 vue 에서는 설치만 하면 바로 사용이 가능하지만 php 에서는 css 파일로 컴파일을 해줘야 한다.

vscode 에서 작업 중 이라면 Live sass Compiler 플러그인을 설치하면 저장할때 자동 컴파일 설정을 해두면 자동으로 컴파일이 되고 css 파일도 생성이 된다. 

 

 

이때 별도로 설정을 하지 않는다면 scss 파일이 있는 폴더 내에 동일한 이름으로 생성이 되는데 css 폴더만 별도로 분리해서 관리 하고 싶다면 설정을 아래와 같이 주면 된다. 

 

savePath 에 경로를 설정해주고 한참 찾았는데 "liveSassCompile.settings.autoprefix"  이 부분도 빈 배열로 넣어 주어야 아이폰등에서 적용 되는 코드가 같이 생성이 된다. 이 값이 없을 경우는 아이폰 파이어폭스 등에서만 적용이 되는 코드는 생성이 되지 않는다. 요즘 버전 업이 많이 되어서 그거 불필요한 코드 이긴 하지만 다양하 브라우저에서 대응하게 하고 싶다면 위 설정도 넣어 주는것이 좋다. 

 

    "git.enableSmartCommit": true,
    "editor.formatOnSave": true,
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css",
            //"savePath": null, 
            "savePathReplacementPairs": null
        }
    ],
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.useNewCompiler": false,
    "liveSassCompile.settings.autoprefix": [
    
    ],

 

php 에서도 컴포즈 같은걸로 다운 받으면 바로 자동 컴파일이 되면 좋겠지만 아쉽지만 요렇게 저장만 누르면 자동으로 컴파일을 해주니 상당히 편리한거 같다. php 는 곧 없어질거 같았지만 아직 의외로 많은 곳에서 쓰고 있고 버전업도 계속 되고 있어서 리액트나 뷰 처럼 변수가 동적으로 움직이는 시스템이 된다면 상당히 경쟁력이 있을거 같은데 그 점을 제외하면 서버비용도 저렴하고 코드도 쉽고 페이지도 빠르게 떠서 좋은거 같다.