ساس (لغة تنسيق الصفحات)

الموسوعة الحرة

Sass (اختصارًا لـ syntactically awesome style sheets ) هي لغة برمجة نصية مُعالجة مسبقًا تُفسَّر أو تُجمَّع إلى أوراق أنماط متتالية (CSS). SassScript هي لغة البرمجة النصية نفسها.

تتكون لغة Sass من صيغتين . الصيغة الأصلية، المسماة "صيغة المسافة البادئة"، تستخدم صيغة مشابهة لصيغة Haml . [ 2 ] [ 3 ] تستخدم هذه الصيغة المسافة البادئة لفصل كتل التعليمات البرمجية ، وأحرف السطر الجديد لفصل القواعد. أما الصيغة الأحدث، SCSS (Sassy CSS)، فتستخدم تنسيق الكتل كما في CSS. تستخدم هذه الصيغة الأقواس المعقوفة للدلالة على كتل التعليمات البرمجية، والفواصل المنقوطة لفصل القواعد داخل الكتلة الواحدة. عادةً ما تُعطى ملفات صيغة المسافة البادئة وملفات SCSS الامتدادين .sass و .scss على التوالي. [ 4 ]

يتألف CSS3 من سلسلة من المحددات والمحددات الزائفة التي تجمع القواعد التي تنطبق عليها. يُوسّع Sass (في السياق الأوسع لكلا الصيغتين) نطاق CSS من خلال توفير آليات متعددة متوفرة في لغات البرمجة التقليدية ، وخاصةً لغات البرمجة كائنية التوجه ، ولكنها غير متوفرة في CSS3 نفسه. عند تفسير SassScript، فإنه يُنشئ كتلًا من قواعد CSS لمختلف المحددات كما هو مُعرّف في ملف Sass. يقوم مُفسّر Sass بترجمة SassScript إلى CSS. بدلاً من ذلك، يُمكن لـ Sass مراقبة ملف .sass أو .scss وترجمته إلى ملف .css الناتج عند حفظ ملف .sass أو .scss. [ 5 ]

يُعدّ بناء الجملة المُسنّن لغةً وصفية. وSCSS هي لغة وصفية متداخلة ومجموعة شاملة لـ CSS، حيث أن CSS الصحيح هو SCSS صحيح بنفس الدلالات .

توفر لغة SassScript الآليات التالية: المتغيرات ، والتداخل ، والمزيجات ، [ 3 ] ووراثة المحددات . [ 2 ]

تاريخ

تم تصميم برنامج Sass في البداية بواسطة هامبتون كاتلين ، وتم تطويره بواسطة ناتالي وايزنباوم. [ 6 ] [ 7 ]

عمليات التنفيذ الرئيسية

تم تطبيق SassScript في لغات متعددة، ومن أبرز هذه التطبيقات:

  • التنفيذ الرسمي مفتوح المصدر للغة دارت . [ 8 ]
  • وحدة "sass" الرسمية لـ node على npm ، وهي عبارة عن Dart Sass تم تجميعها إلى JavaScript خالص. [ 9 ]
  • وحدة Node الرسمية "sass-embedded" وهي عبارة عن غلاف JavaScript حول ملف Dart التنفيذي الأصلي. [ 10 ]
  • تم إنشاء تطبيق Ruby الأصلي مفتوح المصدر في عام 2006، [ 8 ] وتم إيقافه منذ ذلك الحين بسبب نقص القائمين على صيانته ووصل إلى نهاية عمره الافتراضي في مارس 2019. [ 11 ] [ 12 ]
  • libSass، وهو التنفيذ الرسمي مفتوح المصدر للغة C++ ، (تم إيقافه في أكتوبر 2020 [ 13 ] ثم وصل) إلى نهاية عمره في أكتوبر 2025. [ 14 ]
  • وحدة "node-sass" الخاصة بـ node على npm (التي كانت مهملة آنذاك) والتي انتهى دعمها في يوليو 2024 [ 15 ] ، تعتمد على libSass التي انتهى دعمها (الآن). [ 16 ]
  • JSass، وهو تطبيق غير رسمي للغة Java ، [ 17 ] يعتمد على مكتبة libSass التي انتهى دعمها (الآن). [ 18 ]
  • phamlp، وهو تطبيق غير رسمي لـ Sass/SCSS في PHP . [ 8 ]
  • يحتوي Vaadin على تطبيق Java لـ Sass. [ 19 ]
  • فايرباج ، إضافة قديمة لمتصفح فايرفوكس XUL لتطوير مواقع الويب. [ 20 ] تم إيقاف دعمها لاحقًا (إلغاؤها ثم إيقافها) لصالح أدوات المطورين المدمجة في فايرفوكس نفسه. توقفت عن العمل منذ أن أسقط فايرفوكس 57 دعم إضافات XUL.

سمات

المتغيرات

تسمح لغة Sass بتعريف المتغيرات. تبدأ المتغيرات بعلامة الدولار ( $ $). ويتم إسناد القيم للمتغيرات باستخدام النقطتين الرأسيتين ( ::). [ 20 ]

يدعم SassScript أربعة أنواع من البيانات: [ 20 ]

يمكن أن تكون المتغيرات وسائط أو نتائج لإحدى الدوال المتاحة . [ 21 ] أثناء الترجمة، تُدرج قيم المتغيرات في مستند CSS الناتج. [ 2 ]

SCSSساسCSS المُجمّع
$primary-color : #3bbfce ; $margin : 16 px ;.content-navigation { border-color : $ primary-color ; color : darken ( $ primary-color , 10 % ); }.border { padding : $ margin / 2 ; margin : $ margin / 2 ; border-color : $ primary-color ; }
اللون الأساسي : #3bbfce الهامش : 16 بكسل.content-navigation border-color : $primary-color color : darken ( $ primary-color , 10 ).border padding : $margin / 2 margin : $margin / 2 border-color : $primary-color
.content -navigation { border-color : #3bbfce ; color : #2b9eab ; }.border { padding : 8px ; margin : 8px ; border - color : # 3bbfce ; }

التعشيش

يدعم CSS التداخل المنطقي، لكن كتل التعليمات البرمجية نفسها غير متداخلة. يسمح Sass بإدراج التعليمات البرمجية المتداخلة داخل بعضها البعض. [ 2 ]

SCSSساسCSS المُجمّع
table.hl { margin : 2em 0 ; td.ln { text - align : right ; } }li { font : { family : serif ; weight : bold ; size : 1 .3em ; } }
جدول .hl هامش : 2 em 0 td .ln محاذاة النص : يمين li ​​نوع الخط : serif الوزن : عريض الحجم : 1.3 em​
table.hl { margin : 2em 0 ; } table.hl td.ln { text - align : right ; }​​​​​li { font-family : serif ; font-weight : bold ; font-size : 1.3 em ; }

تُناقش أنواع التداخل الأكثر تعقيدًا، بما في ذلك تداخل مساحات الأسماء والمراجع الأصلية، في وثائق Sass. [ 20 ]

SCSSساسCSS المُجمّع
@mixin table-base { th { text-align : center ; font-weight : bold ; } td , th { padding : 2px ; } }#data { @include table-base ; }
=table-base th text-align : center font-weight : bold td , th padding : 2 pxقاعدة بيانات البيانات + الجدول
#data th { text - align : center ; font - weight : bold ; } #data td , #data th { padding : 2px ; }

الحلقات

يسمح Sass بالتكرار على المتغيرات باستخدام @for، @eachو @while، والتي يمكن استخدامها لتطبيق أنماط مختلفة على العناصر ذات الفئات أو المعرفات المتشابهة.

ساسCSS المُجمّع
$squareCount : 4 @for $i from 1 to $squareCount #square- #{ $i } background-color : red width : 50 px * $i height : 120 px / $i
# مربع-1 { لون الخلفية : أحمر ؛ العرض : 50 بكسل ؛ الارتفاع : 120 بكسل ؛ }# مربع-2 { لون الخلفية : أحمر ؛ العرض : 100 بكسل ؛ الارتفاع : 60 بكسل ؛ }# مربع-3 { لون الخلفية : أحمر ؛ العرض : 150 بكسل ؛ الارتفاع : 40 بكسل ؛ }

الحجج

تدعم Mixins أيضًا الوسائط . [ 2 ]

ساسCSS المُجمّع
=left ( $dist ) float : left margin-left : $dist#sdata +left ( 10 px )
# بيانات { تعويم : يسار ؛ هامش-يسار : 10 بكسل ؛ }

بالاشتراك

ساسCSS المُجمّع
=table-base th text-align : center font-weight : bold td , th padding : 2 px=left ( $dist ) float : left margin-left : $dist#بيانات +يسار ( 10 بكسل ) +قاعدة الجدول
#data { float : left ; margin - left : 10px ; } #data th { text - align : center ; font - weight : bold ; } #data td , #data th { padding : 2px ; }

وراثة المحدد

بينما يدعم CSS3 التسلسل الهرمي لنموذج كائن المستند (DOM)، فإنه لا يسمح بتوريث المحددات. في Sass، يتم تحقيق التوريث عن طريق إدراج سطر داخل كتلة برمجية يستخدم الكلمة المفتاحية @extend ويشير إلى محدد آخر. تُطبق سمات المحدد المُوسّع على المحدد الأصلي. [ 2 ]

ساسCSS المُجمّع
.error border : 1 px #f00 background : #fdd.error.intrusion حجم الخط : 1.3 em وزن الخط : عريض.badError @extend .error border-width : 3 px
.error , .badError { border : 1px # f00 ; background : #fdd ; }​​.error.intrusion , .badError.intrusion { font - size : 1.3em ; font - weight : bold ; }​​​.badError { border- width : 3 px ; }

يدعم Sass التوريث المتعدد . [ 20 ]

libSass

في مؤتمر مطوري HTML5 لعام 2012، أعلن هامبتون كاتلين، مبتكر Sass، عن الإصدار 1.0 من libSass، وهو تطبيق مفتوح المصدر بلغة C++ لـ Sass تم تطويره بواسطة كاتلين وآرون ليونغ وفريق الهندسة في Moovweb . [ 22 ] [ 23 ]

بحسب كاتلين، يمكن "إضافة مكتبة libSass إلى أي برنامج وستحتوي على لغة Sass... يمكنك إضافتها مباشرةً إلى متصفح Firefox اليوم وبناء Firefox وسيتم تجميعها هناك. لقد كتبنا محللنا اللغوي الخاص من الصفر للتأكد من إمكانية ذلك." [ 24 ]

تتمثل أهداف تصميم مكتبة libSass فيما يلي:

  • الأداء  – أفاد المطورون بزيادة في السرعة بمقدار 10 أضعاف مقارنة بتنفيذ Sass باستخدام Ruby. [ 25 ]
  • تكامل أسهل  – تُسهّل مكتبة libSass دمج Sass في المزيد من البرامج. قبل libSass، كان دمج Sass بشكل كامل في لغة برمجة أو منتج برمجي يتطلب تضمين مُفسّر Ruby بالكامل. على النقيض من ذلك، تُعدّ libSass مكتبة قابلة للربط الثابت بدون أي تبعيات خارجية وواجهة شبيهة بلغة C، مما يُسهّل دمج Sass مباشرةً في لغات البرمجة والأدوات الأخرى. على سبيل المثال، تتوفر الآن روابط libSass مفتوحة المصدر لـ Node و Go و Ruby . [ 23 ]
  • التوافق  – يهدف libSass إلى تحقيق التوافق التام مع تطبيق Sass الرسمي في لغة Ruby. وقد تحقق هذا الهدف في libsass 3.3. [ 26 ]

تكامل بيئة التطوير المتكاملة (IDE)

تكامل Sass مع بيئة التطوير المتكاملة
بيئة التطوير المتكاملةبرمجة
أدوبي دريمويفر سي سي 2017
كسوف
إيماكسوضع ساس
JetBrains IntelliJ IDEA (الإصدار النهائي)
JetBrains PhpStorm
جيت برينز روبي ماين
JetBrains WebStorm
مايكروسوفت فيجوال ستوديوعالم العقل
مايكروسوفت فيجوال ستوديوساسي ستوديو
مايكروسوفت ويب ماتريكس
نت بينز
همةhaml.zip
الذرة
Visual Studio Code
سامي
تعديل+

انظر أيضاً

مراجع

  1. 1 2 "Dart Sass - أحدث إصدار" . github.com .
  2. 1 2 3 4 5 6 ميديا ​​مارك (3.2.12). "Sass - أنماط كتابة رائعة من الناحية التركيبية" . Sass-lang.com . تم الاطلاع عليه بتاريخ 23 فبراير 2014 .{{cite web}}: صيانة CS1: الأسماء الرقمية: قائمة المؤلفين ( رابط )
  3. 1 2 فيرتمان، ماكسيميليانو (15 مارس 2013). برمجة الويب عبر الهاتف المحمول . دار نشر أورايلي ميديا. رقم ISBN 978-1-4493-3497-0.
  4. ↑ ليبي، أليكس (2019). تقديم لغة دارت ساس: مقدمة عملية لبديل لغة ساس، المبني على لغة دارت . بيركلي، كاليفورنيا: أبريس. doi : 10.1007/978-1-4842-4372-5 . ISBN 978-1-4842-4371-8.
  5. ↑ Sass - أوراق أنماط رائعة من الناحية التركيبية، مؤرشفة بتاريخ 9 أكتوبر 2013 في Wayback Machine، برنامج تعليمي
  6. ↑ "Sass: Syntactically Awesome Style Sheets" . sass-lang.com . مؤرشف من الأصل بتاريخ 2013-09-01.
  7. ↑ "مدونة ناتالي وايزنباوم" . مؤرشفة من الأصل بتاريخ 11-10-2007.
  8. 1 2 3 "Sass / Scss" . Drupal.org. 2009-10-21. مؤرشف من الأصل بتاريخ 2016-03-10 . تم الاطلاع عليه بتاريخ 2014-02-23 .
  9. ↑ "ساس" . www.npmjs.com .
  10. ↑ "sass-embedded" . www.npmjs.com .
  11. ↑ وايزنباوم، ناتالي. "مدونة روبي ساس وصلت إلى نهاية عمرها الافتراضي" « مدونة ساس" . sass.logdown.com . تم الاطلاع عليه بتاريخ 21 أبريل 2019 . 
  12. ↑ "Sass: Ruby Sass" . sass-lang.com . تم الاطلاع عليه بتاريخ 21-04-2019 .
  13. ↑ "تم إيقاف دعم LibSass" . sass-lang.com . 26 أكتوبر 2020.
  14. ↑ "Sass: LibSass Has Reached End-Of Support" . sass-lang.com . تم الاطلاع عليه بتاريخ 18-11-2025 .
  15. ↑ "Sass: Node Sass is end-lyed" . sass-lang.com . تم الاطلاع عليه بتاريخ 18-11-2025 .
  16. ↑ "node-sass" . www.npmjs.com .
  17. ↑ "jsass – تطبيق جافا لمترجم Sass (وبعض الميزات الأخرى). – استضافة مشاريع جوجل" . تم الاطلاع عليه بتاريخ 23 فبراير 2014 .
  18. ↑ "وثائق JSass" . jsass.readthedocs.io .
  19. ↑ "SassCompiler (Vaadin 7.0.7 API)" . Vaadin.com. 2013-06-06. مؤرشف من الأصل في 2014-04-21 . تم الاطلاع عليه في 2014-02-23 .
  20. 1 2 3 4 5 Sass (أوراق الأنماط الرائعة نحويًا) SASS_REFERENCE
  21. ↑ الوحدة: Sass::Script::Functions دوال Sass
  22. ↑ هـ. كاتلين (15 أكتوبر 2012). "قواعد هامبتون الست لتصميم تطبيقات الجوال" . مؤتمر مطوري HTML5. مؤرشف من الأصل بتاريخ 15 ديسمبر 2021. تم الاطلاع عليه بتاريخ 11 يوليو 2013 .
  23. 1 2 م. كاتلين (30 أبريل 2012). "libsass" . مدونة Moovweb. مؤرشف من الأصل بتاريخ 8 مايو 2013. تم الاطلاع عليه بتاريخ 11 يوليو 2013 .
  24. ↑ أ. ستاكوفياك وأ. ثورب (26 يونيو 2013). "الجرأة، والسخرية، وهامل، والمزيد مع هامبتون كاتلين" . مؤرشف من الأصل في 6 أغسطس 2013. تم الاطلاع عليه في 30 يوليو 2013 .
  25. ↑ د. لو نوايل (2013-06-07). "ساسك وبوربون" . تم الاسترجاع في 2013-07-11 .
  26. ↑ "توافق Sass" . sass-compatibility.github.io . مؤرشف من الأصل بتاريخ 2019-12-05 . تم الاطلاع عليه بتاريخ 2019-11-29 .

للمزيد من القراءة