css

node.js를 기반으로하기 때문에 libsass에 대한 node-sass 구현자를 선택했습니다.

node-sass 설치

• (전제 조건) npm이없는 경우 먼저 Node.js를 설치하십시오 .
• $ npm install -g node-sassnode-sass를 전역 적으로 설치합니다 -g.

하단의 libsass를 읽지 않으면 필요한 모든 것을 설치할 수 있습니다.

명령 줄 및 npm 스크립트에서 node-sass를 사용하는 방법

일반 형식 :

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

예 :

1. $ node-sass my-styles.scss my-styles.css 단일 파일을 수동으로 컴파일합니다.
2. $ node-sass my-sass-folder/ -o my-css-folder/ 폴더의 모든 파일을 수동으로 컴파일합니다.
3. $ node-sass -w sass/ -o css/소스 파일이 수정 될 때마다 폴더의 모든 파일을 자동으로 컴파일합니다. -w파일 변경에 대한 감시를 추가합니다.

‘compression’ @ here 와 같은 더 유용한 옵션 . 명령 줄은 빠른 솔루션에 적합하지만 Grunt.js 또는 Gulp.js와 같은 작업 실행기를 사용하여 빌드 프로세스를 자동화 할 수 있습니다.

위의 예를 npm 스크립트에 추가 할 수도 있습니다. 제대로으로 NPM 스크립트를 사용하여 꿀꺽 대안 읽을 포괄적 기사 @ css-tricks.com 특히 읽어 작업을 그룹화를 .

• package.json프로젝트 디렉토리에 파일 이 없으면 실행 $ npm init하면 파일 이 생성됩니다. 함께 사용 -y하여 질문을 건너 뜁니다.
• 추가 "sass": "node-sass -w sass/ -o css/"로 scripts에서 package.json파일. 다음과 같이 보일 것입니다.

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

• $ npm run sass 파일을 컴파일합니다.

꿀꺽 꿀꺽 꿀꺽 마시기와 함께 사용하는 방법

• $ npm install -g gulp Gulp를 전 세계적으로 설치합니다.
• package.json프로젝트 디렉토리에 파일 이 없으면 실행 $ npm init하면 파일 이 생성됩니다. 함께 사용 -y하여 질문을 건너 뜁니다.
• $ npm install --save-dev gulpGulp를 로컬로 설치합니다. --save-dev추가 gulp로 devDependencies에서 package.json.
• $ npm install gulp-sass --save-dev gulp-sass를 로컬로 설치합니다.
• gulpfile.js다음 내용으로 프로젝트 루트 폴더에 파일 을 생성하여 프로젝트에 대한 gulp를 설정하십시오 .

'use strict';
var gulp = require('gulp');

트랜스 파일의 기본 예

gulpfile.js에 다음 코드를 추가하십시오.

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

$ gulp sasssass폴더 의 .scss 파일을 컴파일하고 폴더에 .css 파일을 생성 하는 위의 작업을 실행 css합니다.

삶을 더 쉽게 만들기 위해 시계를 추가하여 수동으로 컴파일 할 필요가 없습니다. 이 코드를에 추가하십시오 gulpfile.js.

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

이제 모든 것이 설정되었습니다! watch 작업을 실행하면됩니다.

$ gulp sass:watch

Node.js와 함께 사용하는 방법

node-sass의 이름에서 알 수 있듯이 트랜스 파일을위한 자체 node.js 스크립트를 작성할 수 있습니다. 궁금하다면 node-sass 프로젝트 페이지를 확인하세요.

libsass는 어떻습니까?

Libsass는 sassC 또는 우리의 경우 node-sass와 같은 구현자가 빌드해야하는 라이브러리입니다. Node-sass는 기본적으로 사용하는 libsass의 빌드 된 버전을 포함합니다. 빌드 파일이 컴퓨터에서 작동하지 않으면 컴퓨터 용 libsass 빌드를 시도합니다. 이 프로세스에는 Python 2.7.x가 필요합니다 (3.x는 현재 작동하지 않음). 게다가:

LibSass에는 GCC 4.6+ 또는 Clang / LLVM이 필요합니다. OS가 오래된 경우이 버전이 컴파일되지 않을 수 있습니다. Windows에서는 GCC 4.6 이상 또는 VS 2013 업데이트 4 이상이 포함 된 MinGW가 필요합니다. Windows에서 Clang / LLVM으로 LibSass를 빌드 할 수도 있습니다.