CSS, SCSS 및 Less

Visual Studio Code는 CSS .css, SCSS .scss 및 Less .less 스타일 시트 편집을 기본 지원합니다. 또한 더 많은 기능을 위해 확장을 설치할 수 있습니다.

팁: 위의 확장 타일을 클릭하여 설명을 읽고 리뷰를 확인한 후 자신에게 가장 적합한 확장을 결정하십시오. Marketplace에서 더 많은 내용을 볼 수 있습니다.

IntelliSense

VS Code는 선택기, 속성 및 값에 대한 지원을 제공합니다. 컨텍스트별 옵션 목록을 가져오려면 ⌃Space (Windows, Linux Ctrl+Space)를 사용하십시오.

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

구문 색상 지정 및 색상 미리 보기

입력하는 동안 구문 강조 표시와 함께 컨텍스트 내 색상 미리 보기가 제공됩니다.

색상 미리 보기를 클릭하면 색조, 채도 및 불투명도를 구성할 수 있는 통합 색상 선택기가 실행됩니다.

팁: 선택기 상단의 색상 문자열을 클릭하여 다른 색상 모드 간에 전환할 수 있습니다.

다음 설정을 통해 VS Code의 색상 미리 보기를 숨길 수 있습니다.

"editor.colorDecorators": false

css, Less 및 SCSS에 대해서만 비활성화하려면 다음을 사용하십시오.

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

폴딩

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

추가로 다음 영역 마커를 사용하여 접기 영역을 정의할 수 있습니다: CSS/SCSS/Less의 /*#region*/ 및 /*#endregion*/ 또는 SCSS/Less의 // #region 및 // #endregion.

CSS, Less 및 SCSS에 대해 들여쓰기 기반 접기를 사용하려면 다음을 사용하십시오.

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

Emmet 스니펫

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

팁: 유효한 약어는 Emmet 요약 시트의 CSS 섹션을 참조하십시오.

VS Code는 사용자 정의 스니펫도 지원합니다.

구문 확인 및 린팅

CSS 버전 <= 2.1, Sass 버전 <= 3.2 및 Less 버전 <= 2.3을 지원합니다.

참고: 해당 .validate 사용자 또는 작업 영역 설정을 false로 설정하여 VS Code의 기본 CSS, Sass 또는 Less 유효성 검사를 비활성화할 수 있습니다.

"css.validate": false

파일에서 기호로 이동

현재 파일에서 관련 CSS 기호로 빠르게 이동하려면 ⇧⌘O (Windows, Linux Ctrl+Shift+O)를 누르십시오.

호버

선택기 또는 속성에 마우스를 올리면 CSS 규칙에 의해 일치하는 HTML 스니펫이 제공됩니다.

선언으로 이동 및 참조 찾기

이것은 동일한 파일의 Sass 및 Less 변수에 대해 지원됩니다. 초안 표준 제안에 따른 CSS 변수도 지원됩니다.

CSS, SCSS 및 Less의 @import 및 url() 링크에 대한 정의로 이동이 지원됩니다.

CSS 사용자 지정 데이터

선언적 사용자 지정 데이터 형식을 통해 VS Code의 CSS 지원을 확장할 수 있습니다. 사용자 지정 데이터 형식을 따르는 JSON 파일 목록을 css.customData에 설정하면 VS Code는 새로운 CSS 속성, at-지시문, 의사 클래스 및 의사 요소를 더 잘 이해할 수 있습니다. 그러면 VS Code는 제공된 속성, at-지시문, 의사 클래스 및 의사 요소에 대한 완성 및 마우스 오버 정보와 같은 언어 지원을 제공합니다.

vscode-custom-data 리포지토리에서 사용자 지정 데이터 사용에 대해 자세히 읽을 수 있습니다.

서식

CSS 언어 기능 확장에는 포맷터도 제공됩니다. 이 포맷터는 CSS, LESS 및 SCSS에서 작동합니다. JS Beautify 라이브러리에 의해 구현되었으며 다음과 같은 설정을 제공합니다.

• css.format.enable - 기본 CSS 포맷터 사용/사용 안 함.
• css.format.newlineBetweenRules - 규칙 집합을 빈 줄로 구분합니다.
• css.format.newlineBetweenSelectors - 선택기를 새 줄로 구분합니다.
• css.format.spaceAroundSelectorSeparator - 선택기 구분 기호 '>', '+', '~' 주위에 공백 문자가 있는지 확인합니다(예: a > b).

less 및 scss에 대해서도 동일한 설정이 존재합니다.

Sass 및 Less를 CSS로 트랜스파일링

VS Code는 통합 작업 실행기를 통해 Sass 및 Less 트랜스파일러와 통합할 수 있습니다. 이를 사용하여 .scss 또는 .less 파일을 .css 파일로 트랜스파일링할 수 있습니다. 간단한 Sass/Less 파일을 트랜스파일링하는 과정을 살펴보겠습니다.

1단계: Sass 또는 Less 트랜스파일러 설치

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

참고: Node.js 및 npm 패키지 관리자가 아직 설치되어 있지 않으면 이 자습서를 위해 설치해야 합니다. 플랫폼에 맞는 Node.js 설치. Node 패키지 관리자(npm)는 Node.js 배포판에 포함되어 있습니다. npm이 PATH에 있도록 새 터미널(명령 프롬프트)을 열어야 합니다.

npm install -g sass less

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

빈 폴더에서 VS Code를 열고 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 만들기

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

이렇게 하면 작업 영역 .vscode 폴더에 샘플 tasks.json 파일이 생성됩니다. 파일의 초기 버전에는 임의의 명령을 실행하는 예제가 있습니다. 대신 Sass/Less 트랜스파일링을 위해 해당 구성을 수정합니다.

// 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": "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단계: 빌드 작업 실행

이것이 파일의 유일한 명령이므로 ⇧⌘B (Windows, Linux Ctrl+Shift+B) (빌드 작업 실행)를 눌러 실행할 수 있습니다. 샘플 Sass/Less 파일에는 컴파일 문제가 없어야 하므로 작업을 실행하면 해당 styles.css 파일이 생성됩니다.

더 복잡한 환경에서는 여러 개의 빌드 작업이 있을 수 있으므로 ⇧⌘B (Windows, Linux Ctrl+Shift+B) (빌드 작업 실행)를 누른 후 실행할 작업을 선택하도록 안내합니다. 또한 컴파일 문제(오류 및 경고)에 대해 출력을 스캔할 수 있습니다. 컴파일러에 따라 목록에서 적절한 항목을 선택하여 오류 및 경고에 대한 도구 출력을 스캔합니다. 출력을 스캔하지 않으려면 제시된 목록에서 **빌드 출력 스캔 안 함**을 선택합니다.

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

작업을 기본 빌드 작업으로 만들려면 전역 **터미널** 메뉴에서 **기본 빌드 작업 구성**을 실행하고 제시된 목록에서 해당 **Sass** 또는 **Less** 작업을 선택하십시오.

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

Sass/Less 컴파일 자동화

Sass/Less 컴파일을 VS Code와 함께 자동화하는 것까지 나아가 보겠습니다. 이전과 동일한 작업 실행기 통합을 사용하지만 몇 가지 수정 사항이 있습니다.

1단계: Gulp 및 일부 플러그인 설치

Gulp를 사용하여 Sass/Less 컴파일을 자동화하는 작업을 만들겠습니다. 또한 gulp-sass 플러그인을 사용하여 작업을 더 쉽게 만들 것입니다. Less 플러그인은 gulp-less입니다.

Gulp를 전역(-g 스위치) 및 로컬 모두에 설치해야 합니다.

npm install -g gulp
npm install gulp gulp-sass gulp-less

참고: gulp-sass 및 gulp-less는 이전에 사용했던 sass 및 lessc 모듈에 대한 Gulp 플러그인입니다. 사용할 수 있는 다른 Gulp Sass 및 Less 플러그인이 많이 있으며 Grunt용 플러그인도 있습니다.

터미널에 gulp -v를 입력하여 Gulp 설치가 성공했는지 테스트할 수 있습니다. 전역(CLI) 및 로컬 설치 모두에 대한 버전이 표시되어야 합니다.

2단계: 간단한 Gulp 작업 만들기

이전과 동일한 폴더(.vscode 폴더 아래에 styles.scss/styles.less 및 tasks.json 포함)에서 VS Code를 열고 루트에 gulpfile.js를 만듭니다.

gulpfile.js 파일에 다음 코드를 배치합니다.

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(cb) {
  gulp
    .src('*.scss')
    .pipe(sass())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('sass', function(cb) {
    gulp.watch('*.scss', gulp.series('sass'));
    cb();
  })
);

// Less configuration
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function(cb) {
  gulp
    .src('*.less')
    .pipe(less())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('less', function(cb) {
    gulp.watch('*.less', gulp.series('less'));
    cb();
  })
);

여기서 무슨 일이 일어나고 있습니까?

1. default Gulp 작업은 처음에 시작될 때 sass 또는 less 작업을 한 번 실행합니다.
2. 그런 다음 VS Code에서 열린 현재 폴더와 같은 작업 영역의 루트에 있는 모든 SCSS/Less 파일의 변경 사항을 감시합니다.
3. 변경된 SCSS/Less 파일 집합을 가져와 해당 컴파일러(예: gulp-sass, gulp-less)를 통해 실행합니다.
4. 이제 원래 SCSS/Less 파일의 이름과 각각 같은 이름의 CSS 파일 집합이 있습니다. 그런 다음 이 파일들을 같은 디렉터리에 넣습니다.

3단계: Gulp 기본 작업 실행

Gulp 작업 통합을 VS Code와 완료하려면 이전 작업 구성을 수정하여 방금 만든 기본 Gulp 작업을 실행해야 합니다. tasks.json 파일을 삭제하거나 "version": "2.0.0" 속성만 남겨두고 비울 수 있습니다. 이제 전역 **터미널** 메뉴에서 **작업 실행**을 실행합니다. Gulp 파일에 정의된 작업 목록이 표시되는 피커가 나타나는 것을 확인합니다. **gulp: default**를 선택하여 작업을 시작합니다. 컴파일 문제에 대해 출력을 스캔할 수 있습니다. 컴파일러에 따라 목록에서 적절한 항목을 선택하여 오류 및 경고에 대한 도구 출력을 스캔합니다. 출력을 스캔하지 않으려면 제시된 목록에서 **빌드 출력 스캔 안 함**을 선택합니다. 이 시점에서 Less 또는 SASS 파일을 생성 및/또는 수정하면 해당 CSS 파일이 생성되고/또는 저장 시 변경 사항이 반영되는 것을 볼 수 있습니다. 자동 저장을 활성화하여 작업을 더욱 간소화할 수도 있습니다.

gulp: default 작업을 ⇧⌘B (Windows, Linux Ctrl+Shift+B)를 눌렀을 때 실행되는 기본 빌드 작업으로 만들려면 전역 **터미널** 메뉴에서 **기본 빌드 작업 구성**을 실행하고 제시된 목록에서 **gulp: default**를 선택하십시오.

4단계: Gulp 기본 작업 종료

gulp: default 작업은 백그라운드에서 실행되며 Sass/Less 파일의 파일 변경 사항을 감시합니다. 작업을 중지하려면 전역 **터미널** 메뉴에서 **작업 종료**를 사용할 수 있습니다.

CSS, SCSS 및 Less 설정 사용자 지정

다음 린트 경고를 사용자 및 작업 영역 설정으로 구성할 수 있습니다.

validate 설정은 내장 유효성 검사를 비활성화할 수 있도록 합니다. 다른 린터를 사용하려는 경우 이렇게 할 수 있습니다.

CSS에 대한 옵션을 구성하려면 ID에 css.lint.를 접두사로 사용하십시오. SCSS 및 Less의 경우 scss.lint. 및 less.lint.를 사용하십시오.

린트 검사를 활성화하려면 설정을 warning 또는 error로 설정하고, 비활성화하려면 ignore를 사용하십시오. 린트 검사는 입력하는 동안 수행됩니다.

다음 단계

자세한 내용은 계속 읽어보세요.

• 작업 구성 - SCSS 및 Less를 CSS로 트랜스파일링하는 데 도움이 되는 작업으로 이동합니다.
• 기본 편집 - 강력한 VS Code 편집기에 대해 알아보세요.
• 코드 탐색 - 소스 코드를 빠르게 이동합니다.
• HTML - CSS는 시작일 뿐이며, VS Code는 HTML도 매우 잘 지원합니다.

자주 묻는 질문

VS Code에서 색상 선택기를 제공합니까?

예, CSS 색상 참조에 마우스를 올리면 색상 선택기가 표시됩니다.

들여쓰기 기반 Sass 구문(.sass)을 지원합니까?

아니요, 하지만 Marketplace에는 들여쓰기된 Sass 맛을 지원하는 여러 확장 프로그램이 있습니다. 예를 들어, 처음에 Robin Bentley가 만들고 현재 Leonard Grosoli가 유지 관리하는 Sass 확장 프로그램이 있습니다.