Visual Studio Code에는 CSS .css, Sass .scss 및 lessless의 스타일 시트 편집 기능이 내장되어 있습니다.

또한 더 많은 기능을 위해 확장을 설치할 수 있습니다.

IntelliSense 

VS 코드는 선택기, 속성 및 값을 지원합니다. Ctrl + Space를 사용하여 컨텍스트 특정 옵션 목록을 가져옵니다.

제안서에는 해당 속성을 지원하는 브라우저 목록을 포함한 광범위한 설명서가 포함되어 있습니다. 선택한 항목의 전체 설명 텍스트를 보려면 Ctrl + Space를 사용하십시오.

구문 색 및 색 미리보기 

입력 할 때 구문 강조와 색상의 컨텍스트 미리보기가 있습니다.

색상 미리보기를 클릭하면 색상, 채도 및 불투명도 구성을 지원하는 통합 색상 선택기가 시작됩니다.

** 피커 상단의 색상 문자열을 클릭하여 다른 색상 모드 사이에서 트리거할 수 있습니다.

다음 설정을 지정하여 VS 코드의 색상 미리보기를 숨길 수 있습니다.

"editor.colorDecorators": false

css, Less 및 SCSS를 비활성화하려면

"[css]": {
    "editor.colorDecorators": false
}

Folding(접기) 

줄 번호와 줄 시작 사이의 여백에 있는 접이식 아이콘을 사용하여 소스 코드 영역을 접을 수 있습니다. 접기 범위는 모든 선언 (예 : 규칙 선언) 및 소스 코드의 여러 줄 주석에 대해 사용할 수 있습니다.

또한 다음 영역 마커를 사용하여 접는 범위를 정의 할 수 있습니다.

/*#region*/ and /*#endregion*/

CSS, Less 및 SCSS의 들여 쓰기 기반 접기로 전환하려면 다음을 사용하십시오.

"[css]": {
    "editor.foldingStrategy": "indentation"
},

Emmet 스니펫 

Emmet 약어 지원은 VS 코드에 내장되어 있으며, 제안 사항은 편집기 자동 완성 목록에 있는 다른 제안 및 스니펫과 함께 나열됩니다.

유효한 약어에 대해서는 Emmet cheat sheet의 CSS 섹션을 참조하십시오.

구문 확인 및 링틴 

CSS 버전 <= 2.1, 저음 버전 <= 3.2 및 저 버전 <= 2.3에 대한 지원이 있습니다.

해당 .validate User 또는 Workspace 설정을 false로 설정하여 VS 코드의 기본 CSS, Sass 또는 Less 유효성 검사를 비활성화 할 수 있습니다.

"css.validate": false

파일내 기호로 이동 

Ctrl + Shift + O를 눌러 파일에서 관련 CSS 기호를 빠르게 탐색 할 수 있습니다.

Hovers 

선택기 또는 속성 위에 마우스를 올려 놓으면 CSS 규칙과 일치하는 HTML 스니펫이 제공됩니다.

CSS에 Sass와 Less를 Transpiling하기 

VS 코드는 통합 task runner를 통해 Sass 및 Less transpilers와 통합할 수 있습니다. .scss 또는 .less 파일을 .css 파일로 변환하는 데 사용할 수 있습니다.

1 단계 : Sass 또는 Less transpiler 설치 

이 연습에서는 node-sass 또는 less Node.js 모듈을 사용하겠습니다.

npm install -g node-sass less

2 단계 : 간단한 Sass 또는 Less 파일 만들기 

빈 폴더에서 VS 코드를 열고 styles.scss 또는 styles.less 파일을 만듭니다. 해당 파일에 다음 코드를 삽입하십시오.

$padding: 6px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

위 파일 소스에서 Less 버전의 경우 $padding을 @padding으로 변경하십시오.

** 이 예제는 소스 코드가 두 파일 유형 간에 거의 동일한 이유인 매우 간단한 예입니다. 보다 진보 된 시나리오에서는 구문과 구조가 크게 다를 것입니다.

3 단계 : tasks.json 만들기 

다음 단계는 task 구성을 설정하는 것입니다. 이렇게 하려면 작업> 작업 구성을 실행하고 템플릿에서 tasks.json 파일 만들기를 클릭합니다. 표시되는 선택 대화 상자에서 기타를 선택하십시오. 

작업 공간 .vscode 폴더에 샘플 tasks.json 파일이 생성됩니다. 초기 버전의 파일에는 임의의 명령을 실행하는 예제가 있습니다.

Sass / Less를 transpilizing하기 위해 해당 구성을 수정합니다.

// Sass configuration
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "node-sass styles.scss styles.css",
            "group": "build"
        }
    ]
}

// Less configuration
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Less Compile",
            "type": "shell",
            "command": "lessc styles.less styles.css",
            "group": "build"
        }
    ]
}

4 단계 : 빌드 작업 실행 

이 파일에서 유일한 명령이므로 Ctrl + Shift + B (빌드 작업 실행)를 눌러 실행할 수 있습니다.

샘플 Sass / Less 파일에는 컴파일 문제가 없어야 하므로 작업을 실행하면 해당하는 styles.css 파일이 만들어집니다.

보다 복잡한 환경에서는 둘 이상의 빌드 태스크가 있을 수 있으므로 Ctrl + Shift + B (빌드 태스크 실행)를 누른 후 실행할 태스크를 선택하라는 메시지가 표시됩니다. 또한 컴파일 문제 (오류 및 경고)에 대한 출력을 검사 할 수 있습니다. 컴파일러에 따라 목록에서 적절한 항목을 선택하여 도구 출력에서 ​​오류 및 경고를 검색합니다. 출력을 스캔하지 않으려면 제시된 목록에서 빌드 출력을 스캔하지 않음을 선택하십시오.

이 시점에서 sample.html 파일 목록에 추가 파일이 표시되어야합니다.

작업을 실행할 기본 빌드 작업을 전역 작업 메뉴에서 기본 빌드 작업 구성 ...을 실행하고 제공된 목록에서 해당하는 Sass 또는 Less 작업을 선택하십시오.

** 빌드가 실패하거나 "디렉토리를 컴파일 할 때 출력 디렉토리를 지정해야 합니다"와 같은 오류 메시지가 표시되면 tasks.json의 파일 이름이 디스크의 파일 이름과 일치하는지 확인하십시오. 명령 줄에서 node-sass styles.scss styles.css를 실행하여 빌드를 테스트 할 수 있습니다.