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

معلومات عامة
التصنيف	style sheet language (en) — لغة برمجة — لغة حكم خارج الجانب
ظهرت في	2011
نظام التشغيل	متعدد المنصات
الرخصة	رخصة إم أي تي
الإصدار الأول	2011
الإصدار الأخير	0.63.0 ; (5 مارس 2024) ;
المستودع	github.com…
متأثرة بـ	أوراق الأنماط المتتالية — لِس — ساس (لغة تنسيق صفحات الويب)
امتدادات الملفات	styl
موقع الويب	stylus-lang.com (الإنجليزية)

ستايلس (بالإنجليزية: Stylus stylesheet language)‏ هي لغة معالج مسبق لورقة أنماط ديناميكية يتم تجميعها في أوراق الأنماط المتتالية.^[5]

تاريخ[عدل]

تصميمه متأثر بـ ساس و لس.

الأكثر استخدامًا في تركيب معالجات الـ أوراق الأنماط المتتالية

تم إنشاؤه بواسطة TJ Holowaychuk، وهو مبرمج سابق لـ نود.جي إس ومؤسس لغة Luna.

على عكس أوراق الأنماط المتتالية، الذي يستخدم الأقواس لفتح وإغلاق كتل الإعلان، يتم استخدام المسافة البادئة.

بالإضافة إلى ذلك، يتم حذف الفاصلة المنقوطة (؛) اختياريًا. ومن ثم، فإن أوراق الأنماط المتتالية التالية:

body {
    color: white;
}

يمكن تقصيرها إلى:

body 
    color: white

علاوة على ذلك، فإن النقطتين (:) والفاصلات (،) اختيارية أيضًا؛ هذا يعني أنه يمكن كتابة ما سبق،

body 
    color white

تسمح ستايلس بتحديد المتغيرات، ولكن على عكس لس وساس، فإنه لا يستخدم رمزًا لتحديد المتغيرات.

بالإضافة إلى ذلك، يتم إجراء التخصيص المتغير تلقائيًا عن طريق فصل الخاصية والكلمات الرئيسية. بهذه الطريقة، فإن المتغيرات تشبه المتغيرات في بايثون.

message = 'Hello, World!'

div::before
  content message
  color #ffffff

سيقوم مترجم Stylus بترجمة المستند أعلاه إلى:

div::before {
  content: 'Hello, World!';
  color: #ffffff;
}

يتم تعريف كل من الخلطات والوظائف بنفس الطريقة، ولكن يتم تطبيقها بطرق مختلفة.

على سبيل المثال، إذا أردت تحديد خاصية CSS border radius دون الحاجة إلى استخدام بادئات Vendor مختلفة، يمكنك إنشاء:

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

بعد ذلك، لتضمين هذا على أنه mixin، يمكنك الإشارة إليه على النحو التالي:

div.rectangle 
  border-radius(10px)

هذا من شأنه أن يترجم إلى:

div.rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

لتضمين المتغيرات في الوسيطات والمعرفات، تحيط الأحرف المتدرجة بالمتغير (المتغيرات). فمثلا،

 -webkit-{'border' + '-radius'}

بتقييم إلى

-webkit-border-radius

^ وصلة مرجع: https://github.com/LearnBoost/stylus/blob/master/LICENSE.
^ ^أ ^ب "Release 0.63.0". 5 مارس 2024. اطلع عليه بتاريخ 2024-03-25.
^ الوصول: 7 أكتوبر 2016.
^ ^أ ^ب الوصول: 9 يناير 2017. وصلة مرجع: https://api.github.com/repos/LearnBoost/stylus.
^ Poll Results: Popularity of CSS Preprocessors نسخة محفوظة 9 مايو 2021 على موقع واي باك مشين.