dart sass
1.81.0
Sass의 Dart 구현. Sass는 CSS를 재미있게 만듭니다 .
다트 새스 사용하기
sass_api 패키지
브라우저의 Dart Sass
레거시 JavaScript API
Jest와 함께 Sass 사용하기
Chocolatey 또는 Scoop에서(Windows)
홈브루(macOS)에서
독립형
npm에서
펍에서
소스에서
도커에서
왜 다트인가?
호환성 정책
브라우저 호환성
Node.js 호환성
잘못된 CSS
임베디드 다트 새스
용법
Ruby Sass와의 동작 차이점
환경과 필요에 따라 Dart Sass를 설치하고 실행하는 방법에는 여러 가지가 있습니다.
Windows용 Chocolatey 패키지 관리자나 Scoop 패키지 관리자를 사용하는 경우 다음을 실행하여 Dart Sass를 설치할 수 있습니다.
초코 설치 sass
또는
특종 설치 sass
그러면 명령줄에 Dart Sass를 실행할 sass 실행 파일이 제공됩니다. 자세한 내용은 CLI 문서를 참조하세요.
Homebrew 패키지 관리자를 사용하는 경우 다음을 실행하여 Dart Sass를 설치할 수 있습니다.
양조 설치 sass/sass/sass
그러면 명령줄에 Dart Sass를 실행할 sass 실행 파일이 제공됩니다.
GitHub 릴리스 페이지에서 Dart VM과 실행 파일의 스냅샷이 포함된 운영 체제용 독립형 Dart Sass 아카이브를 다운로드할 수 있습니다. 압축을 풀고 경로에 디렉터리를 추가한 후 터미널을 다시 시작하면 sass 실행 파일을 실행할 준비가 완료됩니다!
Dart Sass는 JavaScript로 컴파일된 npm 패키지로 제공됩니다. sass 실행 파일에 대한 액세스를 제공하는 npm install -g sass 사용하여 전역적으로 설치할 수 있습니다. npm install --save-dev sass 사용하여 프로젝트에 추가할 수도 있습니다. 이는 실행 파일과 라이브러리를 제공합니다.
const sass = require('sass');const result = sass.compile(scssFilename);// 또는// `compileAsync()`는 `compile()`보다 상당히 느립니다.const result = wait sass.compileAsync( scss파일명);전체 API 문서는 Sass 웹사이트를 참조하세요.
sass npm 패키지는 브라우저에서 직접 실행할 수도 있습니다. 이름 바꾸기(예: esbuild의 --keep-names )를 비활성화하는 한 모든 주요 웹 번들러와 호환됩니다. 번들링 없이 브라우저에서 ECMAScript 모듈로 직접 가져올 수도 있습니다( node_modules 도 제공된다고 가정).
<스크립트 유형="가져오기 맵">
{"가져오기": { "불변": "./node_modules/immutable/dist/immutable.es.js", "sass": "./node_modules/sass/sass.default.js"}
}</script><!-- 지도 가져오기 지원 없이 Safari 16.3과 같은 브라우저를 지원합니다. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
*를 'sass'에서 sass로 가져옵니다.
console.log(sass.compileString(` .box { 너비: 10px + 15px; } `));</script>또는 CDN에서:
<스크립트 유형="가져오기 맵">
{"가져오기": { "불변": "https://unpkg.com/immutable@^4.0.0", "sass": "https://unpkg.com/sass@^1.63.0/sass.default .js"}
}</script><!-- 지도 가져오기 지원 없이 Safari 16.3과 같은 브라우저를 지원합니다. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
*를 'sass'에서 sass로 가져옵니다.
console.log(sass.compileString(` .box { 너비: 10px + 15px; } `));</script>또는 모든 종속 항목과 함께 번들로 제공될 수도 있습니다.
<스크립트 유형="모듈">
*를 'https://jspm.dev/sass'에서 sass로 가져옵니다.
console.log(sass.compileString(` .box { 너비: 10px + 15px; } `));</script> 브라우저는 파일 시스템에 액세스할 수 없으므로 compile() 및 compileAsync() 함수를 사용할 수 없습니다. 다른 파일을 로드하려면 사용자 정의 가져오기 도구를 compileString() 또는 compileStringAsync() 에 전달해야 합니다. 레거시 API도 브라우저에서 지원되지 않습니다.
Dart Sass는 Node Sass(아래 나열된 몇 가지 예외 제외)와 완벽하게 호환되는 이전 JavaScript API도 지원하며 render() 및 renderSync() 함수를 모두 지원합니다. 이 API는 더 이상 사용되지 않는 것으로 간주되며 Dart Sass 2.0.0에서 제거될 예정이므로 새 프로젝트에서는 피해야 합니다.
레거시 JavaScript API에 대한 Sass의 지원에는 다음과 같은 제한 사항이 있습니다.
outputStyle 의 "expanded" 및 "compressed" 값만 지원됩니다.
Dart Sass는 precision 옵션을 지원하지 않습니다. Dart Sass는 기존의 모든 브라우저에 대해 충분히 높은 정밀도를 기본값으로 설정하고 있으며 이를 사용자 정의할 수 있게 만들면 코드 효율성이 크게 떨어집니다.
Dart Sass는 sourceComments 옵션을 지원하지 않습니다. 소스 맵은 생성된 선택기의 원본을 찾는 데 권장되는 방법입니다.
Jest를 사용하여 테스트를 실행하는 경우 기본 테스트 환경이 JavaScript의 내장된 instanceof 연산자를 손상시키는 오랜 버그가 있다는 점에 유의하세요. Dart Sass의 JS 패키지는 instanceof 상당히 많이 사용하므로 Sass 손상을 방지하려면 jest-environment-node-single-context 설치하고 Jest 구성에 testEnvironment: 'jest-environment-node-single-context' 추가해야 합니다. .
Dart 사용자라면 sass 실행 파일을 제공하는 pub global activate sass 사용하여 Dart Sass를 전역적으로 설치할 수 있습니다. pubspec에 추가하여 라이브러리로 사용할 수도 있습니다. 접두사 sass 사용하여 가져오는 것이 좋습니다.
import 'package:sass/sass.dart' as sass;void main(List<String> args) { print(sass.compile(args.first));
}자세한 내용은 Dart API 문서를 참조하세요.
sass_api 패키지 Dart 사용자는 sass_api 패키지를 통해 더욱 심층적인 API에 액세스할 수도 있습니다. 이는 전체 컴파일을 실행하지 않고도 Sass 로드를 해결하기 위한 Sass AST 및 API에 대한 액세스를 제공합니다. 기본 sass 패키지와 독립적으로 버전 번호를 늘릴 수 있도록 자체 패키지로 분리되어 있습니다.
이 저장소를 이미 체크아웃했다고 가정합니다.
다트를 설치하세요. 설치 프로그램을 사용하지 않고 수동으로 아카이브를 다운로드하는 경우 SDK의 bin 디렉터리가 PATH 에 있는지 확인하세요.
Buf를 설치하세요. 이는 임베디드 컴파일러용 프로토콜 버퍼를 구축하는 데 사용됩니다.
이 저장소에서 dart pub get 실행하세요. 그러면 Dart Sass의 종속성이 설치됩니다.
dart run grinder protobuf 실행하세요. 그러면 임베디드 프로토콜 정의가 다운로드되고 빌드됩니다.
dart bin/sass.dart path/to/file.scss 실행하세요.
그게 다야!
다음 Dockerfile 명령을 사용하여 Docker 내에서 Dart Sass를 설치하고 실행할 수 있습니다.
# Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# scss 파일 추가COPY --from=another_stage /app /app# 프로토콜 버퍼 바이너리 포함COPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR /dart-sassRUN git clone https://github.com/sass/dart-sass.git . && 다트 펍 get && dart run grinder protobuf# 이것은 scss 파일에서 sass.dart를 실행하는 곳입니다.RUN dart ./bin/sass.dart /app/sass/example.scss /app/public/css/example.css
Dart Sass는 Ruby Sass를 Sass 언어의 정식 구현으로 대체했습니다. 우리는 여러 가지 장점을 제공하는 Dart를 선택했습니다.
빠르다. Dart VM은 고도로 최적화되어 있으며 점점 더 빨라지고 있습니다(최신 성능 수치는 perf.md 참조). Ruby보다 훨씬 빠르며 C++와 거의 비슷합니다.
휴대용입니다. Dart VM은 외부 종속성이 없으며 애플리케이션을 독립 실행형 스냅샷 파일로 컴파일할 수 있으므로 Dart Sass를 단 세 개의 파일(VM, 스냅샷 및 래퍼 스크립트)로만 배포할 수 있습니다. Dart는 JavaScript로 컴파일될 수도 있으며, 이를 통해 대다수 사용자가 이미 사용하고 있는 npm을 통해 Sass를 쉽게 배포할 수 있습니다.
쓰기 쉽습니다. Dart는 C++보다 높은 수준의 언어이므로 메모리 관리 및 시스템 구축에 많은 번거로움이 필요하지 않습니다. 또한 정적으로 유형이 지정되므로 Ruby보다 자신있게 대규모 리팩터링을 더 쉽게 만들 수 있습니다.
기여자에게 더 우호적입니다. Dart는 Ruby보다 훨씬 배우기 쉽고, 특히 Google의 많은 Sass 사용자는 이미 Dart에 익숙합니다. 더 많은 기여자가 더 빠르고 일관된 개발로 이어집니다.
대부분의 경우 Dart Sass는 의미론적 버전 관리를 따릅니다. 우리는 다음을 모두 버전이 지정된 API의 일부로 간주합니다.
Dart Sass가 구현한 Sass 언어 의미 체계.
다트 API.
자바스크립트 API.
명령줄 인터페이스.
Dart Sass에는 Dart, JavaScript 및 독립 실행형 배포판에서 공유되는 단일 버전이 있기 때문에 실제로 하나 이상의 배포판에 대한 주요 변경 사항이 없을 때 주요 버전 번호를 늘릴 수 있습니다. 그러나 우리는 주요 변경 사항의 수를 제한하고 가능한 한 적은 수의 릴리스로 그룹화하여 이탈을 최소화하려고 노력할 것입니다. 각 릴리스의 모든 변경 사항을 완전히 이해하려면 변경 로그를 사용하는 것이 좋습니다.
주요 버전 개정 외부에서 주요 변경이 이루어질 수 있는 한 가지 예외가 있습니다. CSS가 어떤 방식으로든 기존 Sass 구문과 호환되지 않는 기능을 추가하는 경우가 있습니다. Sass는 완전한 CSS 호환성을 보장하기 때문에 때때로 CSS와의 호환성을 유지하기 위해 이전 Sass 코드와의 호환성을 중단해야 합니다.
이러한 경우, 우리는 동작이 변경될 모든 스타일시트에 대해 지원 중단 경고를 내보내는 Sass 버전을 먼저 출시할 것입니다. 그런 다음 이러한 지원 중단 경고가 포함된 버전이 출시된 후 최소 3개월 후에 Sass 언어 의미 체계가 크게 변경된 부 버전을 출시할 예정입니다.
일반적으로 우리는 CSS가 실제 브라우저에서 작동을 멈추게 만드는 Dart Sass의 CSS 출력에 대한 모든 변경을 획기적인 변경으로 간주합니다. 그러나 이러한 변경이 상당한 이점을 가져오고 거의 사용되지 않는 소수의 브라우저에만 부정적인 영향을 미치는 경우도 있습니다. 우리는 주요 버전 릴리스에서 이러한 변경을 차단하고 싶지 않습니다.
따라서 변경 사항으로 인해 StatCounter GlobalStats에 따르면 브라우저의 글로벌 시장 점유율이 2% 미만인 경우 해당 변경 사항과 함께 Dart Sass의 마이너 버전을 출시할 수 있습니다.
특정 버전의 Node.js에 대한 지원 중단은 해당 버전이 Node.js에서 계속 지원되는 한 획기적인 변경으로 간주됩니다. 이는 Node.js 릴리스 페이지에 따라 릴리스가 현재, 활성 LTS 또는 유지 관리 LTS로 나열됨을 의미합니다. Node.js 버전이 LTS에서 벗어나면 Dart Sass는 필요한 경우 지원을 중단할 수 있다고 생각합니다.
유효하지 않은 CSS 출력을 생성하는 Sass 스타일시트의 동작 변경은 주요 변경으로 간주되지 않습니다 . 이러한 변경은 새로운 CSS 기능에 대한 지원을 추가할 때 거의 항상 필요하며, 새로운 주요 버전이 나올 때까지 이러한 모든 기능을 지연하는 것은 대부분의 사용자에게 지나치게 부담스러울 것입니다.
예를 들어, Sass가 calc() 표현식을 구문 분석하기 시작했을 때 잘못된 표현식 calc(1 +) 는 그대로 전달되기 전에는 Sass 오류가 되었습니다. calc(1 +) 처음부터 유효한 CSS가 아니었기 때문에 이것은 주요 변경으로 간주되지 않았습니다.
Dart Sass에는 Embedded Sass 프로토콜의 컴파일러 측면 구현이 포함되어 있습니다. 이는 호스트 언어에 내장되도록 설계되었으며, 이는 사용자가 Sass를 호출하고 사용자 정의 함수 및 임포터를 정의할 수 있는 API를 노출합니다.
sass --embedded 임베디드 컴파일러를 시작하고 stdin을 수신합니다.
sass --embedded --version JSON에서 id = 0 인 versionResponse 인쇄하고 종료합니다.
Dart Sass를 npm 패키지로 설치하는 경우 --embedded 명령줄 플래그를 사용할 수 없습니다. --embedded 에는 다른 명령줄 플래그가 지원되지 않습니다.
Dart Sass와 Ruby Sass 사이에는 몇 가지 의도적인 동작 차이가 있습니다. 이는 일반적으로 Ruby Sass가 바람직하지 않은 동작을 하는 곳이며, 호환 가능한 동작을 구현하는 것보다 올바른 동작을 구현하는 것이 훨씬 더 쉽습니다. 참조 동작을 업데이트하려면 Ruby Sass에 대한 추적 버그가 모두 있어야 합니다.
@extend selector-extend() 의 두 번째 인수와 마찬가지로 간단한 선택자만 허용합니다. 문제 1599를 참조하세요.
주제 선택기는 지원되지 않습니다. 문제 1126을 참조하세요.
의사 선택기 인수는 더 제한된 사용자 정의 구문 분석을 사용하는 대신 <declaration-value> 로 구문 분석됩니다. 문제 2120을 참조하세요.
숫자 정밀도는 10으로 설정됩니다. 문제 1122를 참조하세요.
들여쓰기된 구문 분석기는 더 유연합니다. 전체 문서에 걸쳐 일관된 들여쓰기가 필요하지 않습니다. 문제 2176을 참조하세요.
색상은 채널별 연산을 지원하지 않습니다. 문제 2144를 참조하세요.
단위 없는 숫자는 동일한 값을 가진 단위 숫자와 == 아닙니다. 또한 맵 키는 == -equality와 동일한 논리를 따릅니다. 문제 1496을 참조하세요.
백분율 단위가 있는 rgba() 및 hsla() 알파 값은 백분율로 해석됩니다. 다른 단위는 금지되어 있습니다. 문제 1525를 참조하세요.
함수에 변수 인수가 너무 많이 전달되면 오류가 발생합니다. 문제 1408을 참조하세요.
해당 쿼리 외부에 동일한 @extend 정의되어 있는 경우 @extend 미디어 쿼리 외부에 도달하도록 허용합니다. 이는 문제 1050이 해결되면 관련이 없으므로 명시적으로 추적되지 않습니다.
플레이스홀더 선택기를 포함하는 일부 선택기 의사는 Ruby Sass에 없는 곳에서 컴파일됩니다. 이는 문제의 선택기 의미와 더 잘 일치하며 더 효율적입니다. 문제 2228을 참조하세요.
들여쓰기된 구문에서는 이전 스타일의 :property value 구문이 지원되지 않습니다. 문제 2245를 참조하세요.
참조 결합자는 지원되지 않습니다. 문제 303을 참조하세요.
범용 선택기 통합은 대칭입니다. 문제 2247을 참조하세요.
@extend 일치하지만 통합에 실패하면 오류를 생성하지 않습니다. 문제 2250을 참조하세요.
Dart Sass는 현재 UTF-8 문서만 지원합니다. 우리는 더 많은 것을 지원하고 싶지만 Dart는 현재 이를 지원하지 않습니다. 예를 들어 dart-lang/sdk#11744를 참조하세요.
면책조항: 이 제품은 공식 Google 제품이 아닙니다.
