node sass
v9.0.0
경고: Node Sass의 수명이 다했습니다. 보안 수정 사항을 포함하여 더 이상 릴리스가 제공되지 않습니다. 아직 이를 사용하는 프로젝트는 Dart Sass로 옮겨야 합니다.
지원되는 Node.js 버전은 릴리스에 따라 다릅니다. 릴리스 페이지를 참조하세요.
https://github.com/nodejs/Release 수명이 종료된 노드 버전은 각 node-sass 릴리스(주요, 부)에서 지원이 중단됩니다.
지원되지 않는 릴리스에 대한 바이너리 빌드를 중단하고 종속성 호환성 문제를 테스트하지만 자체적으로 지원하려는 릴리스에 대한 설치를 차단하지는 않습니다.
새로운 노드 릴리스에는 CI 공급자(AppVeyor, GitHub Actions)의 지원과 함께 사소한 내부 변경이 필요합니다. 관심 있는 분들이 구독할 수 있도록 단일 이슈를 오픈하고 추가 이슈를 마감하겠습니다.
다음은 node-sass의 최소 및 최대 지원 버전에 대한 빠른 가이드입니다.
| NodeJS | 지원되는 node-sass 버전 | 노드 모듈 |
|---|---|---|
| 노드 20 | 9.0+ | 115 |
| 노드 19 | 8.0+ | 111 |
| 노드 18 | 8.0+ | 108 |
| 노드 17 | 7.0+, <8.0 | 102 |
| 노드 16 | 6.0+ | 93 |
| 노드 15 | 5.0+, <7.0 | 88 |
| 노드 14 | 4.14+, <9.0 | 83 |
| 노드 13 | 4.13+, <5.0 | 79 |
| 노드 12 | 4.12+, <8.0 | 72 |
| 노드 11 | 4.10+, <5.0 | 67 |
| 노드 10 | 4.9+, <6.0 | 64 |
| 노드 8 | 4.5.3+, <5.0 | 57 |
| 노드 <8 | <5.0 | <57 |
.scss 파일을 놀라운 속도로 기본적으로 연결 미들웨어를 통해 자동으로 CSS로 컴파일할 수 있습니다.
npm에서 찾으세요: https://www.npmjs.com/package/node-sass
릴리스 업데이트를 보려면 트위터에서 @nodesass를 팔로우하세요: https://twitter.com/nodesass
npm 설치 node-sass
일부 사용자는 node 다른 패키지에 등록되어 Ubuntu에 설치하는 데 문제가 있다고 보고했습니다. #!/usr/bin/env node 가 올바르게 확인되도록 공식 NodeJS 문서에 따라 NodeJS를 설치하세요.
Windows 시스템에서 컴파일하려면 node-gyp 전제 조건이 필요합니다.
다음 오류가 표시됩니까? 문제 해결 가이드를 확인하세요.**
SyntaxError: Use of const in strict mode.
설치에 문제가 있나요? 문제 해결 가이드를 확인하세요.
npm install -g mirror-config-china --registry=https://registry.npmmirror.com npm 설치 node-sass
var sass = require('node-sass');sass.render({
파일: scss_filename,
[, 옵션..]}, function(err, result) { /*...*/ });// ORvar result = sass.renderSync({
데이터: scss_content
[, 옵션..]}); 유형: String
기본값: null
특수 : file 또는 data 지정해야 합니다.
컴파일할 LibSass 파일의 경로입니다.
유형: String
기본값: null
특수 : file 또는 data 지정해야 합니다.
컴파일하기 위해 LibSass에 전달할 문자열입니다. @import 지시어를 사용할 때 LibSass가 파일을 찾을 수 있도록 이와 함께 includePaths 사용하는 것이 좋습니다.
이는 실험적인 LibSass 기능입니다. 주의해서 사용하세요.
유형: Function | Function[] 서명 function(url, prev, done)
기본값: undefined
기능 매개변수 및 정보:
url (String) - LibSass가 발견한 그대로 가져오기의 경로
prev (String) - 이전에 해결된 경로
done (Function) - 비동기 완료 시 호출할 콜백 함수로, 다음을 포함하는 객체 리터럴을 사용합니다.
file (String) - LibSass가 사용할 대체 경로 또는
contents (String) - 가져온 내용(예: 메모리 또는 파일 시스템에서 읽음)
LibSass가 @import 지시문을 발견할 때를 처리합니다. 사용자 정의 임포터를 사용하면 동기식 및 비동기식 방식으로 LibSass 엔진을 확장할 수 있습니다. 두 경우 모두 목표는 객체 리터럴로 done() return 하거나 호출하는 것입니다. 객체 리터럴의 값에 따라 두 가지 중 하나가 발생합니다.
{ file: "String" } 으로 done() 반환하거나 호출하면 @import 에 대해 새 파일 경로가 가정됩니다. 상대 경로 확인이 필요할 수 있는 경우 prev 값에 유의하는 것이 좋습니다.
{ contents: "String" } 사용하여 done() 반환하거나 호출하면 문자열 값은 마치 외부 소스를 통해 파일을 읽은 것처럼 사용됩니다.
v3.0.0부터:
this sass.render 또는 sass.renderSync 의 즉각적인 실행을 위한 상황별 범위를 나타냅니다.
수입업자는 오류를 반환할 수 있으며 LibSass는 그에 대한 응답으로 해당 오류를 내보냅니다. 예를 들어:
done(new Error('존재하지 않습니다!'));// 또는 동기식 반환return new Error('여기서는 할 일이 없습니다.'); 임포터는 함수의 배열일 수 있으며, 이는 배열에서 발생하는 순서대로 LibSass에 의해 호출됩니다. 이는 사용자가 특정 종류의 경로(파일 시스템, http)에 대해 특수 가져오기 도구를 지정하는 데 도움이 됩니다. 임포터가 특정 경로를 처리하지 않으려면 null 반환해야 합니다. Sass 유형에 대한 자세한 내용은 함수 섹션을 참조하세요.
이는 실험적인 LibSass 기능입니다. 주의해서 사용하세요.
functions 는 컴파일 중인 sass 파일에 의해 호출될 수 있는 사용자 정의 함수 모음을 보유하는 Object 입니다. 0개 이상의 입력 매개 변수를 사용할 수 있으며 동기적으로( return ...; ) 또는 비동기적으로( done(); ) 값을 반환해야 합니다. 해당 매개변수는 require('node-sass').types 해시에 포함된 생성자 중 하나의 인스턴스가 됩니다. 반환 값도 다음 유형 중 하나여야 합니다. 아래에서 사용 가능한 유형 목록을 참조하세요.
getValue() / setValue(value) : 숫자의 숫자 부분을 가져오거나 설정합니다.
getUnit() / setUnit(unit) : 숫자의 단위 부분을 가져오거나 설정합니다.
getValue() / setValue(value) : 포함된 문자열을 가져오거나 설정합니다.
getR() / setR(value) : 빨간색 구성 요소 ( 0 ~ 255 사이의 정수)
getG() / setG(value) : 녹색 구성요소 ( 0 ~ 255 사이의 정수)
getB() / setB(value) : 파란색 구성 요소 ( 0 에서 255 사이의 정수)
getA() / setA(value) : 알파 구성요소( 0 에서 1.0 사이의 숫자)
예:
var Color = require('node-sass').types.Color,
c1 = 새 색상(255, 0, 0),
c2 = 새 색상(0xff0088cc); getValue() : 포함된 부울을 가져옵니다.
types.Boolean.TRUE : "true"를 유지하는 types.Boolean 의 싱글톤 인스턴스
types.Boolean.FALSE : "false"를 보유하는 types.Boolean 의 싱글톤 인스턴스
getValue(index) / setValue(index, value) : value 자체는 sass.types 에 있는 생성자 중 하나의 인스턴스여야 합니다.
getSeparator() / setSeparator(isComma) : 쉼표를 구분자로 사용할지 여부
getLength()
getKey(index) / setKey(index, value)
getValue(index) / setValue(index, value)
getLength()
types.Null.NULL : types.Null 의 싱글톤 인스턴스입니다.Null .
sass.renderSync({
데이터: '#{제목(2,5)} { 색상: #08c; }',
함수: {'headings($from: 0, $to: 6)': function(from, to) { var i, f = from.getValue(), t = to.getValue(), list = new sass.types .List(t - f + 1); for (i = f; i <= t; i++) {list.setValue(i - f, new sass.types.String('h' + i)); } 반환 목록;}
}}); 유형: Array<String>
기본: []
@import 선언을 해결하기 위해 LibSass가 조사할 수 있는 경로 배열입니다. data 사용할 때에는 이것을 사용하는 것이 좋습니다.
유형: Boolean
기본값: false
true 값은 데이터 문자열이나 파일을 구문 분석하기 위해 Sass 들여쓰기 구문을 활성화합니다.
참고: node-sass/libsass는 .sass 및 .scss 확장자가 파일 이름에 사용되는 한 기본 설정(false)을 사용하여 scss 및 들여쓰기된 구문(.sass) 파일의 혼합 라이브러리를 컴파일합니다.
유형: String
기본값: space
들여쓰기에 공백을 사용할지 탭 문자를 사용할지 결정하는 데 사용됩니다.
유형: Number
기본값: 2
최대: 10
들여쓰기에 사용할 공백이나 탭 수를 결정하는 데 사용됩니다.
유형: String
기본값: lf
줄 바꿈에 cr , crlf , lf 또는 lfcr 시퀀스를 사용할지 여부를 결정하는 데 사용됩니다.
유형: Boolean
기본값: false
특수: 이를 사용할 때 예기치 않은 동작을 방지하려면 outFile 도 지정해야 합니다.
true 값은 출력 파일에 소스 맵 정보가 포함되지 않도록 합니다.
유형: String | null
기본값: null
특수: sourceMap 이 진실한 값일 때 필요합니다.
출력 파일의 원하는 위치를 지정합니다. 의도한 파일을 적절하게 다시 참조할 수 있도록 소스 맵을 출력할 때 강력히 권장됩니다.
이 옵션을 활성화 하면 파일이 디스크에 기록되지 않으며 내부 참조용으로만 사용됩니다(예: 맵 생성).
디스크에 쓰는 방법의 예
sass.render({...outFile: yourPathTotheFile,
}, function(error, result) { // v3.0.0 onwardsif(!error){ // 컴파일 중에는 오류가 없으며 이 결과를 디스크에 씁니다. fs.writeFile(yourPathTotheFile, result.css, function (err){if(!err){ //디스크에 작성된 파일} });}
});}); 유형: String
기본값: nested
값: nested , expanded , compact , compressed
최종 CSS 스타일의 출력 형식을 결정합니다.
유형: Integer
기본값: 5
소수점 이하 자릿수를 결정하는 데 사용됩니다. 예를 들어, 10진수가 1.23456789 이고 정밀도가 5 인 경우 최종 CSS에서 결과는 1.23457 이 됩니다.
유형: Boolean
기본값: false
true 선택기가 정의된 줄 번호와 파일이 컴파일된 CSS에 주석으로 내보내지도록 합니다. 특히 가져오기 및 믹스인을 사용할 때 디버깅에 유용합니다.
유형: Boolean | String | undefined
기본값: undefined
render 및 renderSync 중에 소스 맵 생성을 활성화합니다.
sourceMap === true 인 경우 outFile 값은 접미사 .map 이 추가된 소스 맵의 대상 출력 위치로 사용됩니다. outFile 이 설정되지 않은 경우 sourceMap 매개변수는 무시됩니다.
typeof sourceMap === "string" 인 경우 sourceMap 값이 파일 쓰기 위치로 사용됩니다.
유형: Boolean
기본값: false
true 소스 맵 정보의 contents 포함합니다.
유형: Boolean
기본값: false
true 소스 맵을 데이터 URI로 포함합니다.
유형: String
기본값: undefined
값은 소스 맵 정보에서 sourceRoot 로 방출됩니다.
render (>= v3.0.0) node-sass는 function(err, result) 서명을 사용하여 표준 노드 스타일 비동기 콜백을 지원합니다. 오류 조건에서는 error 인수가 오류 개체로 채워집니다. 성공 조건에서는 result 개체가 렌더링 호출의 결과를 설명하는 개체로 채워집니다.
message (문자열) - 오류 메시지입니다.
line (Number) - 오류가 발생한 줄 번호입니다.
column (번호) - 오류가 발생한 열 번호입니다.
status (숫자) - 상태 코드입니다.
file (String) - 오류의 파일 이름입니다. file 옵션이 설정되지 않은 경우( data 위해) 이는 stdin 값을 반영합니다.
css (버퍼) - 컴파일된 CSS입니다. 이것을 파일에 쓰거나 필요에 따라 제공하십시오.
map (버퍼) - 소스 맵
stats (객체) - 컴파일에 대한 정보가 포함된 객체입니다. 여기에는 다음 키가 포함되어 있습니다.
entry (문자열) - scss 파일의 경로 또는 소스가 파일이 아닌 경우 data
start (Number) - 컴파일 전 Date.now()
end (Number) - 컴파일 후 Date.now()
duration (숫자) - 종료 - 시작
includedFiles (배열) - 특정 순서 없이 모든 관련 scss 파일에 대한 절대 경로입니다.
var sass = require('node-sass');sass.render({
파일: '/path/to/myFile.scss',
데이터: '본문{배경:파란색; a{색상:검정색;}}',
importer: function(url, prev, done) {// url은 LibSass가 발견한 그대로 가져오기의 경로입니다.// prev는 이전에 확인된 경로입니다.// done은 선택적 콜백입니다. 이를 사용하거나 동기적으로 값을 반환합니다. .// this.options에는 이 옵션 해시가 포함되어 있고, this.callback에는 노드 스타일 콜백이 포함되어 있습니다.someAsyncFunction(url, prev, function(result){ done({file: result.path, // 그중 하나만 필요합니다. 특수 Behaviours.contents: result.data });});// ORvar result = someSyncFunction(url, prev);return {file: result.path,contents: result.data}; 섹션을 참조하세요.
},
includePaths: [ 'lib/', 'mod/' ],
outputStyle: 'compressed'}, function(error, result) { // v3.0.0 이후의 노드 스타일 콜백
if (오류) {console.log(error.status); // v2x 이하에서는 "코드"였습니다.console.log(error.column);console.log(error.message);console.log(error.line);
}
else {console.log(result.css.toString());console.log(result.stats);console.log(result.map.toString());// 또는 betterconsole.log(JSON.stringify(result. 지도)); // 참고, JSON.stringify는 버퍼도 허용합니다.
}});// ORvar 결과 = sass.renderSync({
파일: '/path/to/file.scss',
데이터: '본문{배경:파란색; a{색상:검정색;}}',
출력 스타일: '압축',
출력파일: '/to/my/output.css',
sourceMap: true, // 또는 절대 또는 상대(outFile에 대한) 경로
importer: function(url, prev, done) {// url은 LibSass가 발견한 그대로 가져오기의 경로입니다.// prev는 이전에 확인된 경로입니다.// done은 선택적 콜백입니다. 이를 사용하거나 동기적으로 값을 반환합니다. .// this.options에는 이 옵션이 포함되어 있습니다. hashsomeAsyncFunction(url, prev, function(result){ done({file: result.path, // 둘 중 하나만 필요합니다. Special 섹션을 참조하세요. Behaviours.contents: result.data });});// ORvar result = someSyncFunction(url, prev);return {file: result.path,contents: result.data};
}});console.log(result.css);console.log(result.map);console.log(result.stats); file 과 data 옵션이 모두 설정된 경우 node-sass는 data 에 우선 순위를 부여하고 file 사용하여 소스 맵의 경로를 계산합니다.
node-sass 및 libsass 버전 정보는 이제 info 메소드를 통해 노출됩니다.
var sass = require('node-sass');console.log(sass.info);/* 다음과 같이 출력됩니다: node-sass 2.0.1 (Wrapper) [JavaScript] libsass 3.1.0 (Sass Compiler) [ C/C++]*/node-sass >=v3.0.0 이후 LibSass 버전은 런타임에 결정됩니다.
빌드 도구 및 프레임워크에서 node-sass의 커뮤니티 사용 목록입니다.
@jasonsanjose는 node-sass(https://github.com/jasonsanjose/brackets-sass)를 기반으로 Brackets 확장을 만들었습니다. Sass 파일을 편집할 때 확장 프로그램은 저장 시 변경 사항을 컴파일합니다. 또한 확장 기능은 실시간 미리 보기와 통합되어 저장이나 컴파일 없이 브라우저에 Sass 변경 사항을 표시합니다.
Brunch의 공식 Sass 플러그인은 기본적으로 node-sass를 사용하고 Compass 사용이 감지되면 자동으로 Ruby로 대체됩니다: https://github.com/brunch/sass-brunch
연결 및 익스프레스 기반 http 서버에 대해 .scss 파일을 자동으로 다시 컴파일합니다.
이 기능은 node-sass v1.0.0의 node-sass-middleware 로 이동되었습니다.
@10xLaCroixDrinker는 node-sass를 사용하여 .scss 파일을 컴파일하는 DocPad 플러그인을 작성했습니다: https://github.com/docpad/docpad-plugin-nodesass
@stephenway는 duo.js https://github.com/duojs/sass와 함께 node-sass를 사용하여 Sass를 CSS로 변환하는 확장 프로그램을 만들었습니다.
@sindresorhus는 node-sass를 기반으로 한 그런트 작업 세트를 만들었습니다: https://github.com/sindresorhus/grunt-sass
@dlmanning은 node-sass를 기반으로 gulp sass 플러그인을 만들었습니다: https://github.com/dlmanning/gulp-sass
@sintaxi의 Harp 웹 서버는 node-sass를 사용하여 .scss 파일을 암시적으로 컴파일합니다: https://github.com/sintaxi/harp
@stevenschobert는 node-sass를 기반으로 metalsmith 플러그인을 만들었습니다: https://github.com/stevenschobert/metalsmith-sass
@fourseven은 node-sass를 기반으로 하는 meteor 플러그인을 만들었습니다: https://github.com/fourseven/meteor-scss
@dbashford는 node-sass를 포함하는 sass용 Mimosa 모듈을 만들었습니다: https://github.com/dbashford/mimosa-sass
여기에 연결 앱 예제도 있습니다: https://github.com/andrew/node-sass-example
Node-sass에는 널리 사용되는 플랫폼용으로 사전 컴파일된 바이너리가 포함되어 있습니다. 플랫폼에 바이너리를 추가하려면 다음 단계를 따르세요.
프로젝트를 확인하세요:
git clone --recursive https://github.com/sass/node-sass.gitcd node-sass npm 설치 node scripts/build -f # 디버그 릴리스에 -d 스위치를 사용합니다# 성공하면 공급업체 디렉터리에 바이너리가 생성되고 이동됩니다#.
다음 사용법 섹션에서 볼 수 있듯이 이 단계에서는 명령줄 사용을 위한 인터페이스가 상당히 단순합니다.
--output 플래그를 생략하면 출력이 stdout으로 전송됩니다.
node-sass [options] <input> [output] 또는: cat <input> | node-sass > output
예:
node-sass src/style.scss dest/style.css
옵션:
-w, --watch 디렉토리나 파일 감시
-r, --recursive 디렉터리나 파일을 반복적으로 감시합니다.
-o, --output 출력 디렉터리
-x, --omit-source-map-url 출력에서 소스 맵 URL 주석을 생략합니다.
-i, --indented-syntax stdin의 데이터를 sass 코드로 처리합니다(scss와 비교).
-q, --quiet 오류가 발생한 경우를 제외하고 로그 출력을 억제합니다.
-v, --version 버전 정보를 인쇄합니다.
--output-style CSS 출력 스타일(중첩 | 확장 | 압축 | 압축)
--indent-type 출력 CSS의 들여쓰기 유형(공백 | 탭)
--indent-width 들여쓰기 너비; 공백 또는 탭 수(최대값: 10)
--linefeed 라인피드 스타일(cr | crlf | lf | lfcr)
--source-comments 출력에 디버그 정보 포함
--source-map 소스 맵 방출
--source-map-contents 지도에 포함 콘텐츠 포함
--source-map-embed sourceMappingUrl을 데이터 URI로 포함
--source-map-root 기본 경로는 그대로 소스 맵에 내보내집니다.
--include-path 가져온 파일을 찾는 경로
--follow 심볼릭 링크된 디렉터리를 따릅니다.
--precision 십진수에 허용되는 정밀도의 양
--error-bell 오류 발생 시 벨 문자를 출력합니다.
--importer 사용자 정의 가져오기 도구가 포함된 .js 파일의 경로
--functions 사용자 정의 함수가 포함된 .js 파일의 경로
--help 사용 정보 인쇄 input 단일 .scss 또는 .sass 또는 디렉터리일 수 있습니다. 입력이 디렉토리인 경우 --output 플래그도 제공해야 합니다.
또한 --importer js 파일에 대한 (절대 또는 상대) 경로를 사용하며, 기본 module.exports 임포터 기능으로 설정되어 있어야 합니다. 예를 들어 당사의 테스트 설비를 참조하십시오.
--source-map 옵션은 부울 값을 허용하며, 이 경우 대상 확장자를 .css.map 으로 대체합니다. 또한 .map 파일의 경로와 원하는 디렉토리의 경로도 허용합니다. 디렉토리를 컴파일할 때 --source-map 부울 값 또는 디렉토리일 수 있습니다.
node-sass는 바이너리 이름, 바이너리 경로 또는 대체 다운로드 경로와 같은 sass 바이너리와 관련된 설정을 변경하기 위해 다양한 구성 매개변수를 지원합니다. node-sass는 다음 매개변수를 지원합니다:
| 변수 이름 | .npmrc 매개변수 | 프로세스 인수 | 값 |
|---|---|---|---|
| SASS_BINARY_NAME | sass_binary_name | --sass-바이너리-이름 | 길 |
| SASS_BINARY_SITE | sass_binary_site | --sass-바이너리-사이트 | URL |
| SASS_BINARY_PATH | sass_binary_path | --sass-바이너리 경로 | 길 |
| SASS_BINARY_DIR | sass_binary_dir | --sass-바이너리-dir | 길 |
| SASS_REJECT_UNAUTHORIZED | sass_reject_unauthorized | --sass-거부-승인되지 않음 | 값 |
다음 매개변수를 환경 변수로 사용할 수 있습니다.
예: export SASS_BINARY_SITE=http://example.com/
로컬 또는 글로벌 .npmrc 구성 파일:
예: sass_binary_site=http://example.com/
프로세스 인수로:
예: npm install node-sass --sass-binary-site=http://example.com/
바이너리에 자체 서명된 인증서를 사용하는 경우 SASS_REJECT_UNAUTHORIZED (rejectUnauthorized)[https://nodejs.org/docs/latest/api/tls.html#tls_tls_createserver_options_secureconnectionlistener]를 재정의합니다.
설치에서는 컴퓨터가 사전 구축된 LibSass를 사용할 수 있는지 확인하기 위해 두 가지 Mocha 테스트만 실행하여 설치 중 시간을 절약할 수 있습니다. 테스트가 실패하면 소스에서 빌드됩니다.
이 모듈은 다음 사람들이 제공하고 유지 관리합니다.
Michael Mifsud - 프로젝트 리드 (Github / Twitter)
앤드류 네스빗 (Github / Twitter)
딘 마오 (Github / Twitter)
브렛 윌킨스 (Github / Twitter)
Keith Cirkel (Github / 트위터)
로랑 고데르 (Github / Twitter)
Nick Schonning (Github / 트위터)
아딜 무자히드 (Github / Twitter)
우리는 <3명의 기여자입니다! 이 프로젝트를 위해 개발 시간을 투자한 모든 분들께 특별한 감사를 드립니다. 여러분의 노고에 진심으로 감사드립니다. 여기에서 해당 사람들의 전체 목록을 찾을 수 있습니다.
기여 가이드를 확인하세요
저작권 (c) 2015 Andrew Nesbitt. 자세한 내용은 라이센스를 참조하세요.
