dart sass
1.81.0
تطبيق دارت لساس. Sass يجعل CSS ممتعًا .
باستخدام دارت ساس
حزمة sass_api
دارت ساس في المتصفح
واجهة برمجة تطبيقات جافا سكريبت القديمة
استخدام ساس مع الدعابة
من Chocolatey أو Scoop (Windows)
من البيرة المنزلية (macOS)
مستقل
من نبم
من الحانة
من المصدر
في دوكر
لماذا دارت؟
سياسة التوافق
توافق المتصفح
توافق Node.js
ملف CSS غير صالح
جزءا لا يتجزأ من دارت ساس
الاستخدام
الاختلافات السلوكية من روبي ساس
هناك عدة طرق مختلفة لتثبيت وتشغيل Dart Sass، اعتمادًا على بيئتك واحتياجاتك.
إذا كنت تستخدم مدير الحزم Chocolatey أو مدير الحزم Scoop لنظام التشغيل Windows، فيمكنك تثبيت Dart Sass عن طريق التشغيل
choco تثبيت ساس
أو
مغرفة تثبيت ساس
سيعطيك ذلك sass قابلاً للتنفيذ في سطر الأوامر الخاص بك والذي سيقوم بتشغيل Dart Sass. راجع مستندات CLI للحصول على التفاصيل.
إذا كنت تستخدم مدير حزم Homebrew، فيمكنك تثبيت Dart 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 = require('sass');const result = sass.compile(scssFilename);// OR// لاحظ أن `compileAsync()` أبطأ بكثير من `compile()`. نتيجة const = انتظار sass.compileAsync( scssFilename);راجع موقع Sass الإلكتروني للحصول على وثائق API الكاملة.
يمكن أيضًا تشغيل حزمة sass npm مباشرة في المتصفح. إنه متوافق مع جميع حزم الويب الرئيسية طالما قمت بتعطيل إعادة التسمية (مثل --keep-names in esbuild). يمكنك أيضًا استيرادها مباشرةً من المتصفح كوحدة ECMAScript بدون أي تجميع (بافتراض أنه يتم تقديم node_modules أيضًا):
<نوع البرنامج النصي = "استيراد الخريطة">
{"imports": { "immutable": "./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 { width: 10px + 15px; } `));</script>أو من CDN:
<نوع البرنامج النصي = "استيراد الخريطة">
{"imports": { "غير قابل للتغيير": "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 { width: 10px + 15px; } `));</script>أو حتى مجمعة مع جميع تبعياتها:
<نوع البرنامج النصي = "الوحدة النمطية">
استيراد * كـ sass من "https://jspm.dev/sass"؛
console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script> نظرًا لأن المتصفح لا يملك حق الوصول إلى نظام الملفات، فإن وظائف compile() و compileAsync() غير متاحة له. إذا كنت ترغب في تحميل ملفات أخرى، فستحتاج إلى تمرير مستورد مخصص إلى compileString() أو compileStringAsync() . واجهة برمجة التطبيقات القديمة غير مدعومة أيضًا في المتصفح.
يدعم Dart Sass أيضًا واجهة برمجة تطبيقات JavaScript قديمة متوافقة تمامًا مع Node Sass (مع بعض الاستثناءات المذكورة أدناه)، مع دعم كل من وظيفتي render() و renderSync() . تعتبر واجهة برمجة التطبيقات هذه مهملة وستتم إزالتها في Dart Sass 2.0.0، لذا يجب تجنبها في المشاريع الجديدة.
يتضمن دعم Sass لواجهة برمجة تطبيقات JavaScript القديمة القيود التالية:
يتم دعم القيم "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 :
import 'package:sass/sass.dart' as sass;void main(List<String> args) { print(sass.compile(args.first));
}راجع مستندات Dart API للحصول على التفاصيل.
sass_api يمكن لمستخدمي Dart أيضًا الوصول إلى المزيد من واجهات برمجة التطبيقات المتعمقة عبر حزمة sass_api . يوفر هذا إمكانية الوصول إلى Sass AST وAPIs لحل أحمال 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# أضف ملفات scssCOPY --from=another_stage /app /app# تضمين مخزن البروتوكول الثنائي --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:
دلالات لغة ساس التي نفذتها دارت ساس.
دارت 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 وفقًا لصفحة إصدار 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 .
هناك بعض الاختلافات السلوكية المتعمدة بين دارت ساس وروبي ساس. هذه بشكل عام هي الأماكن التي يكون فيها لـ Ruby Sass سلوك غير مرغوب فيه، ويكون تنفيذ السلوك الصحيح أسهل بكثير من تنفيذ السلوك المتوافق. يجب أن تحتوي جميعها على أخطاء تتبع ضد Ruby Sass لتحديث السلوك المرجعي.
@extend يقبل فقط المحددات البسيطة، كما هو الحال مع الوسيطة الثانية لـ selector-extend() . انظر العدد 1599.
محددات الموضوع غير مدعومة. انظر العدد 1126.
يتم تحليل وسيطات المحدد الزائف على أنها <declaration-value> بدلاً من إجراء تحليل مخصص أكثر محدودية. راجع العدد 2120.
الدقة الرقمية مضبوطة على 10. انظر العدد 1122.
يعد محلل بناء الجملة ذي المسافة البادئة أكثر مرونة: فهو لا يتطلب مسافة بادئة متسقة عبر المستند بأكمله. انظر المسألة رقم 2176.
لا تدعم الألوان حساب كل قناة على حدة. راجع العدد 2144.
الأرقام التي لا تحتوي على وحدات ليست == لأرقام الوحدات التي لها نفس القيمة. بالإضافة إلى ذلك، تتبع مفاتيح الخريطة نفس المنطق مثل == - المساواة. انظر العدد 1496.
يتم تفسير قيم rgba() و hsla() alpha بوحدات النسبة المئوية كنسب مئوية. وحدات أخرى محظورة. انظر العدد 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 الرسمية.
