dart sass
1.81.0
การใช้งาน Dart ของ Sass Sass ทำให้ CSS เป็นเรื่องสนุก
การใช้ Dart Sass
แพ็คเกจ sass_api
Dart Sass ในเบราว์เซอร์
JavaScript API ดั้งเดิม
ใช้ Sass กับ Jest
จาก Chocolatey หรือ Scoop (Windows)
จากโฮมบรูว์ (macOS)
แบบสแตนด์อโลน
ตั้งแต่เวลา 13.00 น
จากผับ
จากแหล่งที่มา
ในนักเทียบท่า
ทำไมต้องดาร์ท?
นโยบายความเข้ากันได้
ความเข้ากันได้ของเบราว์เซอร์
ความเข้ากันได้ของ Node.js
CSS ไม่ถูกต้อง
ฝัง Dart Sass
การใช้งาน
ความแตกต่างด้านพฤติกรรมจาก Ruby Sass
มีหลายวิธีในการติดตั้งและรัน Dart Sass ขึ้นอยู่กับสภาพแวดล้อมและความต้องการของคุณ
หากคุณใช้ตัวจัดการแพ็คเกจ Chocolatey หรือตัวจัดการแพ็คเกจ Scoop สำหรับ Windows คุณสามารถติดตั้ง Dart Sass ได้โดยการเรียกใช้
choco ติดตั้ง sass
หรือ
สกู๊ปติดตั้ง sass
นั่นจะทำให้คุณปฏิบัติการ sass บนบรรทัดคำสั่งของคุณที่จะรัน Dart Sass ดูเอกสาร CLI สำหรับรายละเอียด
หากคุณใช้ตัวจัดการแพ็คเกจ Homebrew คุณสามารถติดตั้ง Dart Sass ได้โดยการเรียกใช้
ชงติดตั้ง sass/sass/sass
นั่นจะทำให้คุณปฏิบัติการ sass บนบรรทัดคำสั่งของคุณที่จะรัน Dart Sass
คุณสามารถดาวน์โหลดไฟล์เก็บถาวร Dart Sass แบบสแตนด์อโลนสำหรับระบบปฏิบัติการของคุณ ซึ่งมี Dart VM และสแน็ปช็อตของไฟล์ปฏิบัติการได้จากหน้าเผยแพร่ GitHub แยกมัน เพิ่มไดเร็กทอรีในพาธของคุณ รีสตาร์ทเทอร์มินัลของคุณ และไฟล์ปฏิบัติการ sass ก็พร้อมที่จะรัน!
Dart Sass พร้อมใช้งานโดยคอมไพล์เป็น JavaScript ในรูปแบบแพ็คเกจ npm คุณสามารถติดตั้งได้ทั่วโลกโดยใช้ npm install -g sass ซึ่งจะช่วยให้สามารถเข้าถึงไฟล์ปฏิบัติการ sass ได้ คุณสามารถเพิ่มลงในโครงการของคุณโดยใช้ npm install --save-dev sass สิ่งนี้จัดเตรียมไฟล์ปฏิบัติการและไลบรารี่:
const sass = need('sass');const result = sass.compile(scssFilename);// OR// โปรดทราบว่า `compileAsync()` นั้นช้ากว่า `compile()`.const result = await sass.compileAsync( scssFilename);ดูเว็บไซต์ Sass สำหรับเอกสาร API ฉบับเต็ม
แพ็คเกจ sass npm สามารถรันได้โดยตรงในเบราว์เซอร์ มันเข้ากันได้กับเว็บบันเดิลหลักๆ ทั้งหมดตราบใดที่คุณปิดการใช้งานการเปลี่ยนชื่อ (เช่น --keep-names ใน esbuild) คุณยังสามารถนำเข้าได้โดยตรงจากเบราว์เซอร์เป็นโมดูล ECMAScript โดยไม่ต้องรวมกลุ่มใดๆ (สมมติว่า node_modules ให้บริการเช่นกัน):
<script type="importmap">
{"นำเข้า": { "ไม่เปลี่ยนรูป": "./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:
<script type="importmap">
{"นำเข้า": { "ไม่เปลี่ยนรูป": "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>หรือแม้กระทั่งรวมเข้ากับการพึ่งพาทั้งหมด:
<ประเภทสคริปต์ = "โมดูล">
นำเข้า * เป็น sass จาก 'https://jspm.dev/sass';
console.log(sass.compileString(` .box { ความกว้าง: 10px + 15px; } `));</script> เนื่องจากเบราว์เซอร์ไม่สามารถเข้าถึงระบบไฟล์ได้ ฟังก์ชัน compile() และ compileAsync() จึงไม่สามารถใช้งานได้ หากคุณต้องการโหลดไฟล์อื่นๆ คุณจะต้องส่งผ่านตัวนำเข้าที่กำหนดเองไปที่ compileString() หรือ compileStringAsync() API เดิมไม่ได้รับการสนับสนุนในเบราว์เซอร์เช่นกัน
Dart Sass ยังรองรับ JavaScript API รุ่นเก่าที่เข้ากันได้กับ Node Sass อย่างสมบูรณ์ (โดยมีข้อยกเว้นบางประการตามรายการด้านล่าง) โดยรองรับทั้งฟังก์ชัน render() และ renderSync() API นี้ถือว่าเลิกใช้แล้วและจะถูกลบออกใน Dart Sass 2.0.0 ดังนั้นจึงควรหลีกเลี่ยงในโปรเจ็กต์ใหม่
การสนับสนุนของ Sass สำหรับ JavaScript API เดิมมีข้อจำกัดดังต่อไปนี้:
รองรับเฉพาะค่า "expanded" และ "compressed" ของ outputStyle เท่านั้น
Dart Sass ไม่รองรับตัวเลือก precision Dart Sass ตั้งค่าเริ่มต้นให้มีความแม่นยำสูงเพียงพอสำหรับเบราว์เซอร์ที่มีอยู่ทั้งหมด และการปรับแต่งนี้จะทำให้โค้ดมีประสิทธิภาพน้อยลงอย่างมาก
Dart Sass ไม่รองรับตัวเลือก sourceComments แผนที่แหล่งที่มาเป็นวิธีที่แนะนำในการค้นหาที่มาของตัวเลือกที่สร้างขึ้น
หากคุณใช้ Jest เพื่อรันการทดสอบ โปรดทราบว่ามีข้อบกพร่องที่มีมายาวนาน โดยที่สภาพแวดล้อมการทดสอบเริ่มต้นทำลายอินสแตน instanceof อเรเตอร์ในตัวของ JavaScript แพ็คเกจ JS ของ Dart Sass ใช้ instanceof ค่อนข้างหนัก ดังนั้นเพื่อหลีกเลี่ยงไม่ให้ Sass เสียหาย คุณจะต้องติดตั้ง jest-environment-node-single-context และเพิ่ม testEnvironment: 'jest-environment-node-single-context' ให้กับการกำหนดค่า Jest ของคุณ .
หากคุณเป็นผู้ใช้ Dart คุณสามารถติดตั้ง Dart Sass ได้ทั่วโลกโดยใช้ pub global activate sass ซึ่งจะจัดให้มีไฟล์ปฏิบัติการ sass คุณสามารถเพิ่มลงใน pubspec ของคุณและใช้เป็นห้องสมุดได้ เราขอแนะนำอย่างยิ่งให้นำเข้าด้วยคำนำหน้า sass :
นำเข้า 'แพ็คเกจ: sass/sass.dart' เป็น sass; void main(List<String> args) { print(sass.compile(args.first));
-ดูเอกสาร Dart API สำหรับรายละเอียด
sass_api ผู้ใช้ Dart ยังสามารถเข้าถึง API เชิงลึกเพิ่มเติมผ่านแพ็คเกจ sass_api ซึ่งให้การเข้าถึง Sass AST และ API เพื่อแก้ไขโหลด Sass โดยไม่ต้องรันการคอมไพล์แบบเต็ม มันถูกแยกออกเป็นแพ็คเกจของตัวเองเพื่อให้สามารถเพิ่มหมายเลขเวอร์ชันได้อย่างอิสระจากแพ็คเกจ sass หลัก
สมมติว่าคุณได้ตรวจสอบพื้นที่เก็บข้อมูลนี้แล้ว:
ติดตั้งโผ หากคุณดาวน์โหลดไฟล์เก็บถาวรด้วยตนเองแทนที่จะใช้โปรแกรมติดตั้ง ตรวจสอบให้แน่ใจว่าไดเร็กทอรี bin ของ SDK อยู่บน PATH ของคุณ
ติดตั้งบัฟ. ใช้เพื่อสร้างบัฟเฟอร์โปรโตคอลสำหรับคอมไพเลอร์แบบฝัง
ในพื้นที่เก็บข้อมูลนี้ ให้รัน dart pub get สิ่งนี้จะติดตั้งการพึ่งพาของ Dart Sass
dart run grinder protobuf สิ่งนี้จะดาวน์โหลดและสร้างข้อกำหนดโปรโตคอลแบบฝัง
เรียกใช้ dart bin/sass.dart path/to/file.scss
แค่นั้นแหละ!
คุณสามารถติดตั้งและรัน Dart Sass ภายใน Docker ได้โดยใช้คำสั่ง Dockerfile ต่อไปนี้:
# Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# เพิ่มไฟล์ scss ของคุณCOPY --from=another_stage /app /app# รวมบัฟเฟอร์โปรโตคอล binaryCOPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR /dart-sassRUN git clone https://github.com/sass/dart-sass.git - โผผับ เก็ท && dart run grinder protobuf# นี่คือที่ที่คุณเรียกใช้ sass.dart บนไฟล์ scss ของคุณ 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 ซึ่งทำให้ง่ายต่อการแจกจ่าย Sass ผ่าน npm ซึ่งผู้ใช้ส่วนใหญ่ของเราใช้อยู่แล้ว
มันง่ายที่จะเขียน Dart เป็นภาษาระดับที่สูงกว่า C++ ซึ่งหมายความว่าไม่จำเป็นต้องยุ่งยากในการจัดการหน่วยความจำและสร้างระบบมากนัก นอกจากนี้ยังมีการพิมพ์แบบคงที่ ซึ่งทำให้ง่ายต่อการรีแฟคเตอร์ขนาดใหญ่อย่างมั่นใจมากกว่าการใช้ Ruby
เป็นมิตรกับผู้มีส่วนร่วมมากขึ้น Dart นั้นเรียนรู้ได้ง่ายกว่า Ruby อย่างมาก และผู้ใช้ Sass หลายคนใน Google ก็คุ้นเคยอยู่แล้ว ผู้ร่วมให้ข้อมูลมากขึ้นส่งผลให้มีการพัฒนาที่รวดเร็วและสม่ำเสมอยิ่งขึ้น
โดยส่วนใหญ่ Dart Sass จะติดตามเวอร์ชันเชิงความหมาย เราถือว่าสิ่งต่อไปนี้ทั้งหมดเป็นส่วนหนึ่งของ API เวอร์ชัน:
ความหมายภาษา Sass นำมาใช้โดย Dart Sass
API ของโผ
จาวาสคริปต์ API
อินเทอร์เฟซบรรทัดคำสั่ง
เนื่องจาก Dart Sass มีเวอร์ชันเดียวที่แชร์ระหว่าง Dart, JavaScript และการกระจายแบบสแตนด์อโลน นี่อาจหมายความว่าเราเพิ่มหมายเลขเวอร์ชันหลักเมื่อในความเป็นจริงไม่มีการเปลี่ยนแปลงใด ๆ สำหรับการแจกจ่ายอย่างน้อยหนึ่งรายการ อย่างไรก็ตาม เราจะพยายามจำกัดจำนวนการเปลี่ยนแปลงที่เสียหายที่เราทำ และจัดกลุ่มการเปลี่ยนแปลงดังกล่าวให้เหลือน้อยที่สุดเท่าที่จะทำได้เพื่อลดการเลิกใช้งาน เราขอแนะนำให้ผู้ใช้ใช้บันทึกการเปลี่ยนแปลงเพื่อทำความเข้าใจการเปลี่ยนแปลงทั้งหมดในแต่ละรุ่นอย่างถ่องแท้
มีข้อยกเว้นประการหนึ่งที่การเปลี่ยนแปลงที่ไม่สมบูรณ์อาจเกิดขึ้นนอกการแก้ไขเวอร์ชันหลัก ในบางครั้ง CSS จะเพิ่มฟีเจอร์ที่เข้ากันไม่ได้กับไวยากรณ์ Sass ที่มีอยู่ในทางใดทางหนึ่ง เนื่องจาก Sass มุ่งมั่นที่จะเข้ากันได้กับ CSS อย่างเต็มรูปแบบ เราจึงต้องตัดความเข้ากันได้กับโค้ด Sass เก่าเป็นครั้งคราว เพื่อให้ยังคงเข้ากันได้กับ CSS
ในกรณีเหล่านี้ ขั้นแรกเราจะเผยแพร่ Sass เวอร์ชันที่ส่งคำเตือนการเลิกใช้งานสำหรับสไตล์ชีตใดๆ ที่ลักษณะการทำงานจะเปลี่ยนไป จากนั้น อย่างน้อยสามเดือนหลังจากการเปิดตัวเวอร์ชันที่มีคำเตือนการเลิกใช้งานเหล่านี้ เราจะเผยแพร่เวอร์ชันรองที่มีการเปลี่ยนแปลงครั้งใหญ่กับความหมายภาษา Sass
โดยทั่วไป เราจะพิจารณาการเปลี่ยนแปลงใดๆ ในเอาต์พุต CSS ของ Dart Sass ซึ่งจะทำให้ CSS นั้นหยุดทำงานในเบราว์เซอร์จริงถือเป็นการเปลี่ยนแปลงครั้งใหญ่ อย่างไรก็ตาม มีบางกรณีที่การเปลี่ยนแปลงดังกล่าวจะมีประโยชน์อย่างมาก และจะส่งผลเสียต่อเบราว์เซอร์ที่ไม่ค่อยได้ใช้ส่วนน้อยเท่านั้น เราไม่ต้องการบล็อกการเปลี่ยนแปลงดังกล่าวในเวอร์ชันหลัก
ด้วยเหตุนี้ หากการเปลี่ยนแปลงจะทำให้ความเข้ากันได้กับส่วนแบ่งตลาดเบราว์เซอร์ทั่วโลกน้อยกว่า 2% ตาม StatCounter GlobalStats เราอาจปล่อย Dart Sass เวอร์ชันรองที่มีการเปลี่ยนแปลงดังกล่าว
เราถือว่าการยกเลิกการสนับสนุน Node.js เวอร์ชันที่กำหนดจะเป็นการเปลี่ยนแปลงครั้งใหญ่ ตราบใดที่ Node.js ยังคงรองรับเวอร์ชันนั้น ซึ่งหมายความว่าการเผยแพร่จะแสดงเป็น LTS ปัจจุบัน, LTS ที่ใช้งานอยู่ หรือ LTS การบำรุงรักษาตามหน้าการเผยแพร่ Node.js เมื่อเวอร์ชัน Node.js หมด LTS แล้ว Dart Sass จะถือว่าตัวเองมีอิสระที่จะทำลายการสนับสนุนหากจำเป็น
การเปลี่ยนแปลงพฤติกรรมของสไตล์ชีท Sass ที่สร้างเอาต์พุต CSS ที่ไม่ถูกต้องจะ ไม่ ถือเป็นการเปลี่ยนแปลงที่เสียหาย การเปลี่ยนแปลงดังกล่าวมักจำเป็นเสมอเมื่อเพิ่มการรองรับคุณสมบัติ CSS ใหม่ และการเลื่อนคุณสมบัติดังกล่าวทั้งหมดออกไปจนกว่าเวอร์ชันหลักใหม่จะเป็นภาระมากเกินไปสำหรับผู้ใช้ส่วนใหญ่
ตัวอย่างเช่น เมื่อ Sass เริ่มแยกวิเคราะห์นิพจน์ calc() นิพจน์ calc(1 +) ที่ไม่ถูกต้องกลายเป็นข้อผิดพลาด Sass โดยที่ก่อนที่จะถูกส่งผ่านตามที่เป็นอยู่ สิ่งนี้ไม่ถือเป็นการเปลี่ยนแปลงที่ทำให้เกิดการเปลี่ยนแปลง เนื่องจาก calc(1 +) ไม่เคยเป็น CSS ที่ถูกต้องเลยตั้งแต่แรก
Dart Sass รวมถึงการใช้งานด้านคอมไพเลอร์ของโปรโตคอล Embedded Sass ได้รับการออกแบบมาให้ฝังอยู่ในภาษาโฮสต์ ซึ่งจะแสดง API เพื่อให้ผู้ใช้สามารถเรียกใช้ Sass และกำหนดฟังก์ชันและผู้นำเข้าที่กำหนดเองได้
sass --embedded เริ่มคอมไพเลอร์แบบฝังและฟังบน stdin
sass --embedded --version พิมพ์ versionResponse ด้วย id = 0 ใน JSON และออก
การตั้งค่าสถานะบรรทัดคำสั่ง --embedded จะไม่พร้อมใช้งานเมื่อคุณติดตั้ง Dart Sass เป็นแพ็คเกจ npm ไม่รองรับแฟล็กบรรทัดคำสั่งอื่น --embedded
มีความแตกต่างด้านพฤติกรรมโดยเจตนาเล็กน้อยระหว่าง Dart Sass และ Ruby Sass โดยทั่วไปสถานที่เหล่านี้เป็นสถานที่ที่ Ruby Sass มีพฤติกรรมที่ไม่พึงประสงค์ และการนำพฤติกรรมที่ถูกต้องไปใช้นั้นง่ายกว่าการนำพฤติกรรมที่เข้ากันได้มาใช้อย่างมาก สิ่งเหล่านี้ควรมีข้อบกพร่องในการติดตามกับ Ruby Sass เพื่ออัปเดตพฤติกรรมการอ้างอิง
@extend ยอมรับเฉพาะตัวเลือกแบบง่าย เช่นเดียวกับอาร์กิวเมนต์ที่สองของ selector-extend() ดูฉบับที่ 1599
ไม่รองรับตัวเลือกหัวเรื่อง ดูฉบับที่ 1126
อาร์กิวเมนต์ตัวเลือกหลอกจะถูกแยกวิเคราะห์เป็น <declaration-value> s แทนที่จะมีการแยกวิเคราะห์แบบกำหนดเองที่จำกัดมากขึ้น ดูฉบับที่ 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
