حتى كان لدي موقف مثير للاهتمام منذ بضعة أشهر. لم تكن CSS مشكلة بالنسبة لي أبدًا (على الرغم من عدم وجود شيء معقد فيها على الإطلاق)، ولكن ألهمتني فكرة استخدام المتغيرات لإنشاء شيء مثل خطوط منتقي الألوان للقوالب ومواقع الويب. تساعد اللوحة التي تحتوي على عدد ثابت من الخيارات على منع اختلاط الألوان وتميزها عن النمط المختار.

كيف تعرف ماذا تستخدم LESS وما فائدة Sass؟ من حيث المبدأ، فهي متشابهة تماما مع بعضها البعض. دعونا نلقي نظرة على خصائصها العامة:

* Mixins – فصول للفصول.
* الخلطات البارامترية - الفئات التي يمكنك تطبيق معلمات نوع الوظيفة عليها.
* القواعد المتداخلة – فئات داخل الفئات التي تقطع التعليمات البرمجية المتكررة.
* العمليات – الرياضيات داخل CSS.
* وظائف اللون – تحرير الألوان.
* مساحات الأسماء – مجموعات من الأنماط التي يمكن استدعاؤها عن طريق الروابط.
* النطاق هو نتاج التغيرات المحلية في الأنماط.
* تقييم جافا سكريبت - تعبيرات جافا سكريبت المحددة في CSS.

الفرق الرئيسي بين LESS وSass هو طريقة إنتاجهما. LESS موجود في مكتبة جافا سكريبت، وبالتالي يقوم بالعمل من جانب العميل.

يقوم Sass بدوره بتشغيل Ruby ويعمل على جانب الخادم. لا يستخدم العديد من المطورين LESS لأن محرك جافا سكريبت يستغرق وقتًا أطول لمعالجة التعليمات البرمجية، مما يؤدي إلى تعديل CSS للمتصفح. هناك عدة طرق للتشغيل. أستخدمه عندما يتم استخدام LESS فقط أثناء عملية التطوير. بمجرد انتهائي، أقوم بنسخ ولصق النتيجة الناتجة بـ LESS في مُخفض الكود ثم في ملف CSS منفصل يجب تضمينه بدلاً من ملفات LESS. هناك طريقة أخرى وهي استخدام LESS لتجميع ملفاتك وتصغيرها. ستعمل كلتا الطريقتين على تقليل المساحة المتروكة لأنماطك وستساعد أيضًا في تجنب المشكلات التي قد تنشأ إذا كان متصفح العميل لا يدعم جافا سكريبت. نادرا ما يحدث هذا، ولكن لا يمكن استبعاد هذا الاحتمال.

يرجى أيضًا النظر في هذه المراجعة من Adam Stacoviak، والتي تمت كتابتها بعد مناقشة مقالة Smashing Magazine بشكل مكثف على Twitter: "في الواقع، يتطلب Sass روبي، على الرغم من أنه لا يحتاج إلى تجميعه في مستند CSS على الخادم. يمكن تجميعه محليًا (كما هو مذكور في LESS)، ويمكن نقل هذا الملف المترجم مع مشروعك، أو قالب WordPress، أو Expression Engine، وما إلى ذلك. نظرًا لأن هذه مجلة Smashing Magazine وقاعدة المستخدمين تختلف بشكل كبير، أعتقد أن العديد منكم يستخدم أجهزة Mac. حسنًا، تأتي Ruby بشكل افتراضي على جميع أجهزة Mac، لذا فإن التثبيت البسيط لـ Sass سيساعدك على البدء على الفور.

بمجرد تثبيت Sass، يمكنك تحويله إلى CSS محليًا وإرسال الكود مع مشروعك، كما ناقشت بالفعل. إذا لم تكن متأكدًا من كيفية البدء باستخدام Sass (أو Compass)، فقد كتبنا دليلاً مفصلاً إلى حد ما يسمى "(البدء باستخدام Sass أو Compass)." دعونا جميعا نشكر آدم معا!

أقل أكثر!

تثبيت

من السهل جدًا تنفيذ LESS في أي مشروع تعمل عليه:

المتغيرات

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

@الأزرق: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;
إذا قمنا بتطبيق هذه الأنماط على الأقسام الثلاثة، فسنحصل على تأثير تدرج تم إنشاؤه عن طريق إضافة وطرح القيم من وإلى اللون الأزرق الطبيعي:

الانتقال من @light_blue إلى @blue إلى @dark_blue.

الفرق الوحيد بين المتغيرات في LESS وSass هو أن LESS يستخدم "@" بينما يستخدم Sass "$". هناك اختلافات أخرى أيضًا، لكن تعلمها ليس بهذه الصعوبة.

ميكسينز

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

حدود (
الحد العلوي: 1 بكسل منقط #333؛
}

مقال. بوست(
الخلفية: #eee؛
.حدود؛
}

قائمة ul (
الخلفية: #ccc؛
.حدود؛
}
سينتهي بك الأمر بشيء مشابه لما كنت تأمل في الحصول عليه من خلال الرجوع إلى مستند HTML الخاص بك وإضافة فئة ".bordered" إلى كلا العنصرين. لكن الشيء المهم الذي يجب ملاحظته هو أنك قمت بتنفيذ ذلك دون إغلاق مستند CSS. يعمل مثل هذا:

تشترك كل من المقالة والقائمة غير المرتبة في نمط الحدود.

باستخدام Sass، تعلن أن "@mixin" هو أولوية النمط من أجل تعريفه على أنه مزيج. بعد ذلك، تعلن "@include" للاتصال به.

@mixin الحدود (
الحد العلوي: 1 بكسل منقط #333؛
}

مقال. بوست(
الخلفية: #eee؛
تضمين الحدود؛
}

قائمة ul (
الخلفية: #ccc؛
تضمين الحدود؛
}
الخلطات البارامترية

على غرار كيفية استخدام الوظائف في CSS، يمكن أن تكون هذه الميزة مفيدة بشكل خاص لأولئك الذين يستمتعون باستخدام الإمكانيات التي تبدو غير محدودة لـ CSS الحديثة. يتعلق أفضل الأمثلة وأكثرها فائدة لاستخدامه بالعديد من بادئات بائعي المتصفحات التي نواجهها أثناء الانتقال من CSS2 إلى CSS3. تم نشر Nettuts+ بواسطة Jeffrey Way، والذي يتضمن معلومات مفصلة حول تنفيذ ملف يتكون بالكامل من مزيجات بارامترية مفيدة. تغطي المقالة خيارات CSS3 المفضلة لديك مع بادئات البائع. على سبيل المثال، مزيج بسيط للتحكم في الزوايا الدائرية بأشكال مختلفة:

نصف قطر الحدود(@radius: 3px) (
-webkit-border-radius: @radius؛
-moz-border-radius: @radius؛
نصف قطر الحدود: @radius؛
}
في هذه الحالة، يبلغ نصف القطر الافتراضي للفئة ".border-radius" 3 بكسل، ولكن يمكنك إدخال أي قيمة تريدها والحصول على زوايا مستديرة. على سبيل المثال، سيؤدي ".border-radius(10px)" إلى تقريب الزوايا بمقدار 10 بكسل.

بناء الجملة في Sass مشابه جدًا لـ LESS. ما عليك سوى استخدام "$" للمتغيرات، واستدعاء mixins باستخدام طريقتي "@mixin" و"@include" اللذين ذكرتهما سابقًا.

وراثة المحدد

دعونا نلقي نظرة على شيء لا يملكه LESS. باستخدام هذه الميزة، يمكنك تطبيق محدد على محدد تم تعيينه مسبقًا دون الحاجة إلى اللجوء إلى تنسيق مفصول بفواصل.

قائمة طعام (
الحدود: 1 بكسل الصلبة #ddd؛
}

تذييل (
@تمديد القائمة؛
}

/* سيتم عرضه هكذا: */
القائمة، التذييل (
الحدود: 1 بكسل الصلبة #ddd؛
}
القواعد المتداخلة

ربما يكون تفريع الفئات والمعرفات في CSS هو أفضل طريقة لمنع أوراق الأنماط المتتالية من التدخل أو توجيهها للتفاعل مع الأوراق المضافة الأخرى. لكن هذا الأسلوب قد يستلزم في كثير من الأحيان قدرًا كبيرًا من التعليمات البرمجية. باستخدام محدد مثل "#site-body .post .post-header h2"، نحصل على كود ذو مظهر جميل للغاية ويشغل مساحة كبيرة جدًا. مع LESS، يمكنك تفرع المعرفات والفئات والعناصر كما يحلو لك. باستخدام المثال أعلاه، يمكنك القيام بشيء مثل هذا:

#نص الموقع (...

عنوان ما بعد (...

&: تمت الزيارة (...)
&:يحوم ( … )
}
}
}
}
الكود أعلاه مطابق تمامًا للمحدد القبيح الذي ذكرناه في الفقرة السابقة، ولكنه أسهل بكثير في القراءة والفهم، ويشغل مساحة أقل بكثير. يمكنك أيضًا تصميم العناصر للإشارة إلى عناصرها الزائفة باستخدام "&" - في هذه الحالة تشبه هذه الوظيفة "هذه" في جافا سكريبت.

عمليات

يتعلق الأمر بما تتوقعه: استخدام أرقام أو متغيرات دقيقة لإجراء العمليات الحسابية بأسلوب أنيق.

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960 بكسل؛
@half_page: @full_page / 2;
@ربع_الصفحة: (@full_page / 2) / 2;
بالمناسبة، أعلم أنه يمكنني أيضًا تقسيم العناصر على 4 والحصول على متغيرات مثل "@ربع_صفحة"، لكنني أردت أن أوضح أن قاعدة الأقواس مناسبة هنا أيضًا. ستكون الأقواس مطلوبة أيضًا إذا كنت تريد إجراء عملية ضمن معلمة. على سبيل المثال، "الحدود: (@width / 2) الصلبة #000".

يعتبر Sass أكثر تنوعًا عندما يتعلق الأمر بالأرقام من LESS. وقد تم دمجها في جداول التحويل لدمج الوحدات القابلة للمقارنة. يمكن لـ Sass العمل مع وحدات قياس غير محددة واكتشافها. تم تقديم هذه الميزة في محاولة لتحديد قيمة المكتبة مقابل التغييرات التي تم إجراؤها بواسطة W3C.

/* ساس */
2 بوصة + 3 سم + 2 قطعة = 3.514 بوصة

/* أقل */
2 بوصة + 3 سم + 2 قطعة = خطأ
وظائف الألوان

لقد ذكرت من قبل كيف يساعدني LESS في التعامل مع أنظمة الألوان أثناء كتابة التعليمات البرمجية. ترتبط وظيفة الزهور أيضًا بشكل لا ينفصم بهذا. لنفترض أنك تستخدم لونًا أزرقًا قياسيًا في مستند النمط الخاص بك، وتريد تطبيق هذا اللون على زر الإرسال في النموذج الخاص بك. يمكنك فتح Photoshop أو أي محرر آخر للحصول على القيمة السداسية من هناك (للون أفتح أو أغمق قليلاً). أو يمكنك ببساطة استخدام وظيفة الألوان المتوفرة في LESS.

يُقدِّم (
الحشو: 5 بكسل 10 بكسل؛
الحدود: 1px صلب @blue؛
الخلفية: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*موز*/
الخلفية: -webkit-gradient(linear, Center Top, Center Bottom, from(lighten(@blue, 10%)),color-stop(100%,@blue)); /*مجموعة الويب*/
الخلفية: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*الأوبرا*/
الخلفية: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*آي إي 10+*/
الخلفية: تدرج خطي (أعلى، تفتيح (@blue، 10%) 0%، @blue 100%)؛ /*W3C*/
اللون: #ففف؛
ظل النص: 0 -1px 1px rgba(0,0,0,0.4);
}
تعمل وظيفة "التفتيح" على تفتيح اللون فعليًا على مقياس النسبة المئوية. في هذه الحالة، ستقوم الوظيفة بتفتيح اللون الأزرق الرئيسي بنسبة 10%. تتيح لك هذه الطريقة تغيير لون العناصر المتدرجة وأي عناصر أخرى بنفس اللون، وذلك ببساطة عن طريق تغيير اللون الأساسي نفسه. يمكن أن يوفر لك هذا قوة كبيرة في عملية التخليص. بالإضافة إلى ذلك، إذا استخدمت دالة بارامترية (مثل تلك الموضحة أعلاه)، فيمكنك جعل بادئات متصفحك أسهل عن طريق تحويلها إلى شيء مثل ".linear-gradient(lighten(@blue), @blue, 100%) ;".

ومن ناحية أخرى، سوف تحصل على تأثير جميل جدا:

هذه هي الطريقة التي انتهينا بها مع زر الإرسال المتدرج الجميل الخاص بنا استنادًا إلى متغير.

هناك وظائف لونية أخرى للتغميق أو تغيير لون الألوان، بالإضافة إلى تدوير عجلة الألوان إلى الألوان الأخرى. أنصحك بتجربتها لمعرفة الميزات الأكثر فائدة لك.

الشروط والسيطرة

شيء آخر مفيد جدًا يتم تقديمه بسعر أقل. مع Sass، لديك القدرة على استخدام الشرط الشرطي if ( ) else ( ) بالإضافة إلى حلقات for ( ). وهو يدعم عوامل التشغيل "و" و"أو" و"لا"، بالإضافة إلى "" و"=" و"==".

/* نموذج لبيان Sass "if" */
@if الخفة($color) > 30% (
لون الخلفية: #000؛
) @آخر (
لون الخلفية: #fff؛
}

/* نموذج حلقة Sass "for" */
@for $i من 1px إلى 10px (
.border-#(i) (
الحدود: $i أزرق خالص؛
}
}
مساحات الأسماء

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

#افتراضيات (
.nav_list() (
نمط القائمة: لا شيء؛
الهامش: 0; الحشو: 0؛
}
.زر() (…)
.يقتبس () ( … )
}
بعد ذلك، في الكود الخاص بنا، إذا واجهنا عنصر "ul" داخل عنصر "nav"، فسنعرف أننا سنحتاج إلى النمط الافتراضي. لذلك يمكننا تطبيقه بسهولة.

نافول (
#الافتراضيات> .nav_list؛
}
النطاق (الإطار الذي يؤخذ بعين الاعتبار)

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

@ اللون: #00c؛ /* أزرق */

#رأس (
@اللون: #c00; /* أحمر */

الحدود: 1 بكسل @ اللون الصلب؛ /* سيكون له حدود حمراء */
}

#تذييل (
الحدود: 1 بكسل @ اللون الصلبة؛ /* سيكون له حدود زرقاء */
}
وبما أننا قمنا بإعادة تعريف المتغير في محدد "#header"، فإن القيمة قبل هذا المتغير ستكون مختلفة ولن تكون قابلة للتطبيق إلا داخل هذا المحدد. وأي شيء قبله أو بعده سيحتفظ بمعنى الإعلان الأصلي.

يتم تنفيذ النطاق في Sass بشكل مختلف قليلاً. في الكود أعلاه، عندما يتغير المتغير "@color" إلى "أحمر"، سيتم تفسيره كما هو موجود في الكود.

تعليقات

هذا الجزء بسيط للغاية. هناك نوعان من التعليقات الصالحة في LESS. تعليق CSS القياسي "/* تعليق */" صالح وستتم معالجته ثم تقديمه. التعليقات ذات السطر الواحد "//comment" تعمل أيضًا، ولكن لن يتم تكرارها أو إخراجها. لذلك يمكن وصفهم بـ "الصامتين".

يستورد

الواردات هي أيضا قياسية تماما. قياسي "@import: "classes.less";" يعمل بشكل جيد. ومع ذلك، إذا قمت باستيراد ملف LESS آخر، فسيكون امتداد الملف اختياريًا. ومن ثم، "@import "classes";" سوف تعمل أيضا بشكل جيد. إذا كنت تريد استيراد شيء ما دون خطوة المعالجة في LESS، فيمكنك استخدام الامتداد .css (على سبيل المثال، "@import: "reset.css";").

استيفاء السلسلة

يمكن أيضًا استخدام بيانات السلسلة في المتغيرات واستدعائها ضمن نمط باستخدام "@(name)".

@base_url = "http://coding.smashingmagazine.com";
صورة الخلفية: url("@(base_url)/images/background.png");
الهروب

هناك أوقات تحتاج فيها إلى تضمين قيمة غير صالحة في بناء جملة CSS أو لا يتعرف عليها LESS. غالبًا ما ينشأ هذا الموقف عندما يكون من الضروري تنفيذ نوع من الاختراق لتطبيع تشغيل أحد التطبيقات في منتجات Microsoft. لتجنب الأخطاء والتعطل بشكل أقل، سوف تحتاج إلى استبعادها.

فصل(
عامل التصفية: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* سيتم إخراجه على النحو التالي: */
.فصل(
عامل التصفية: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
تقييم جافا سكريبت

هذا أحد الأجزاء المفضلة لدي حول العمل مع LESS: من السهل جدًا استخدام جافا سكريبت في الأنماط. يمكنك استخدام التعبيرات والإشارة أيضًا إلى وظائف بيئة التطوير باستخدام العلامة الخلفية (`).

@string: `"مرحباً".toUpperCase()`; /* @string تصبح "HOWDY" */

/* يمكنك أيضًا استخدام الاستيفاء المذكور سابقًا: */
@string: "مرحبًا";
@var: ~`"@(string)".topUpperCase()`; /* يصبح "مرحبًا" */

/* هنا نصل إلى جزء من المستند */
@height = `document.body.clientHeight`;
تنسيق الإخراج

على الرغم من أن LESS لا يحتوي على خيارات إخراج، إلا أن Sass يقدم 4 إصدارات إخراج: متفرعة، ومدمجة، ومضغوطة، وموسعة.

الحد الأدنى

تشترك هاتان المكتبتان العظيمتان في العديد من أوجه التشابه. كلاهما أدوات ممتازة للمصممين الذين يطورون التعليمات البرمجية، ويمكنهم أيضًا مساعدة المطورين على العمل بشكل أكثر كفاءة وسرعة. إذا كنت من محبي Ruby أو HAML، فإن Sass هو الخيار المناسب لك بالتأكيد. بالنسبة لي (وأنا مطور PHP وجافا سكريبت)، ألتزم بـ LESS لأنه من الأسهل بكثير التكامل والوصول أيضًا إلى تعبيرات جافا سكريبت وسمات المستندات. أشك في أنني استخدمت أي مهارات برمجة جدية أثناء تصميم أوراق الأنماط، ولكن أعتقد أن الأمر يستحق المحاولة. إذا كنت قد استخدمت كلتا المكتبتين، فأنا أرغب في سماع أفكارك ونصائحك! مواردنا سعيدة دائمًا بتلقي التعليقات!

لقد كنت أكتب كثيرًا عن ساس مؤخرًا، ولكن من بعض التعليقات الأخيرة أدركت أنه ليس لدى الجميع فهم واضح لماهية ساس. لنكن أكثر وضوحا قليلا:

عندما نتحدث عن Sass، فإننا نعني عادةً المعالج المسبق واللغة ككل. نقول مثلا: "نستخدم Sass"، أو "هنا مزيج Sass".

وفي الوقت نفسه، يسمح Sass (المعالج المسبق) بتركيبتين مختلفتين:

• Sass، المعروف أيضًا باسم بناء الجملة ذي المسافة البادئة؛
• SCSS، بناء جملة يشبه CSS.

قصة

كان Sass في الأصل جزءًا من معالج أولي آخر، Haml، والذي تم اختراعه وكتابته بواسطة مطوري Ruby.

لذلك استخدمت أنماط Sass بناء جملة يشبه روبي، بدون أقواس، ولا فواصل منقوطة، ولا مسافة بادئة صارمة، مثل هذا:

// متغير!primary-color= hotpink // Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !عرض اللون الأساسي= 100% تجاوز السعة= مخفي .my-other-element +border-radius(5px)

كما ترون، بالمقارنة مع CSS العادي، فإن الفرق ملحوظ! حتى لو كنت أحد مستخدمي Sass (المعالج الأولي)، يمكنك أن ترى أن هذا يختلف تمامًا عما اعتدنا عليه.

يتم الإشارة إلى المتغير بواسطة ! , وليس $ , رمز تخصيص القيمة = , وليس : . جد، غير عادي.

ولكن هذا هو ما بدا عليه Sass حتى الإصدار 3.0، الذي تم إصداره في مايو 2010، والذي قدم بناء جملة جديدًا تمامًا يسمى SCSS أو Sassy CSS.

كان هدفه هو تقريب بناء جملة Sass من CSS، مما يجعله أكثر توافقًا مع CSS:

// اللون الأساسي المتغير $: hotpink; // Mixin @mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) .my-element ( اللون: $primary - اللون؛ العرض: 100%؛ الفائض: مخفي؛ .my-other-element ( @include border-radius(5px); )

SCSS هو بالتأكيد أقرب إلى CSS من Sass. لقد عمل مطورو Sass بجد لجعل الجملتين أقرب إلى بعضهما البعض عن طريق استبدال ! (علامة متغيرة) و= (علامة المهمة) على $ و: من CSS.

لذلك عند بدء مشروع جديد، قد تتساءل عن بناء الجملة الذي يجب استخدامه. اسمحوا لي أن أغطي هذا الموضوع وأشرح إيجابيات وسلبيات كل بناء جملة.

إيجابيات بناء جملة Sass ذات المسافة البادئة

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

حتى أفضل! لا يحتاج إلى @mixin أو @include عندما يكون الرمز البسيط: = و+ كافيًا.

كما يوفر بناء جملة Sass معايير ترميز نظيفة بسبب استخدام المسافة البادئة. نظرًا لأن المسافة البادئة غير الصحيحة يمكن أن تؤدي إلى تعطيل ورقة أنماط .sass بأكملها، فإن الخطوة الأولى هنا هي التأكد من أن الكود نظيف ومنسق بشكل صحيح.

هناك طريقة واحدة فقط لكتابة كود Sass: كتابته بشكل صحيح.

لكن كن حذرا! المسافة البادئة لها قيمة منطقية في Sass. عند تطبيق المسافة البادئة لكتلة المحدد، فهذا يعني أنه محدد متداخل.

على سبيل المثال:

العنصر-a اللون: hotpink .element-b float: left ... يُخرج كود CSS التالي: .element-a ( اللون: hotpink; ) .element-a .element-b ( float: left; )

الحقيقة البسيطة المتمثلة في نقل .element-b مستوى واحد إلى اليمين تعني أنه تابع لـ .element-a ، مما يتسبب في تغيير كود CSS الناتج. لذلك، كن حذرا مع المسافات البادئة!

باعتباري غريبًا، أعتقد أن بناء الجملة المبني على المسافة البادئة من المحتمل أن يجذب فريقًا يعمل بشكل أساسي مع Ruby/Python أكثر من فريق من مبرمجي PHP/Java (على الرغم من أنني أحب سماع الآراء التي تشير إلى عكس ذلك).

إيجابيات بناء جملة SCSS

بالنسبة للمبتدئين، فهو متوافق تمامًا مع CSS. هذا يعني أنه يمكنك إعادة تسمية ملف CSS إلى .scss وسيعمل كما لو لم يحدث شيء.

لقد كان جعل SCSS متوافقًا تمامًا مع CSS دائمًا أولوية لدعم Sass منذ إصدار SCSS، وفي رأيي هذه نقطة قوية.

يحاولون أيضًا مراقبة ما قد يصبح بناء جملة CSS صالحًا في المستقبل وتنفيذه (ومن هنا @directives ).

نظرًا لأن SCSS متوافق مع CSS، فهو لا يتطلب أي تدريب إضافي تقريبًا. بناء الجملة هو نفسه إلى حد كبير: فهو مجرد CSS مع بعض الإضافات.

يعد هذا أمرًا مهمًا للمطورين الجدد حتى يتمكنوا من بدء البرمجة بسرعة دون معرفة الكثير عن Sass.

كما أنها أكثر قابلية للقراءة نظرًا لأن التركيبات المحددة منطقية بالفعل. عندما ترى @mixin، فأنت تعلم أنه إعلان mixin؛ عندما ترى @include، فأنت تعلم أنها مكالمة مختلطة.

لا توجد شروط وكل شيء يصبح منطقيًا دون تفسير.

بالإضافة إلى ذلك، تم تطوير جميع الأدوات والمكونات الإضافية والعروض التوضيحية الموجودة تقريبًا لـ Sass باستخدام بناء جملة SCSS. أصبح بناء الجملة هذا موجهًا بشكل متزايد نحو المحترفين ويتم اختياره من قبلهم افتراضيًا (إذا لم يكن هو الوحيد الممكن).

ويرجع ذلك أساسا إلى الأسباب المذكورة أعلاه. على سبيل المثال، أصبح من الصعب بشكل متزايد العثور على تمييز لتركيبة Sass ذات مسافة بادئة خالصة؛ بشكل عام، تتوفر خيارات الإضاءة الخلفية SCSS فقط.

خاتمة

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

لقد جربت بناء جملة المسافة البادئة مرة واحدة وأعجبني. وخاصة بساطته وإيجازه. كنت على وشك نقل كل أكواد العمل الخاصة بي إلى Sass، لكن في اللحظة الأخيرة غيرت رأيي.

أنا سعيد لأنني لم أتخذ هذه الخطوة لأنني سأواجه الآن صعوبة بالغة في العمل باستخدام بعض الأدوات إذا استخدمت الصيغة ذات المسافة البادئة.

يرجى أيضًا ملاحظة أنه لا تتم الإشارة إلى Sass مطلقًا باستخدام الحروف الكبيرة، سواء كان ذلك عبارة عن بناء جملة أو لغة برمجة. بينما تتم الإشارة إلى SCSS دائمًا بأحرف كبيرة. تريد أن تعرف لماذا؟ قم بزيارة موقع SassnotSASS.com!

ترجمة المقال "ما الفرق بين Sass و SCSS" تم إعدادها من قبل فريق المشروع الودود

ما هي المهام الرئيسية للمعالج المسبق، وأي منها تختار: SASS أو LESS، سنناقشها في هذه المقالة. تحتاج أولاً إلى تحديد المعالج المسبق - ما هو؟ هي أداة أو أداة تقوم بتعديل تعليمات برمجية معينة عن طريق تحويلها عبر إمكانيات مختلفة. إدخال المعالج هو رمز يتم وصفه بواسطة هياكل نحوية مختلفة. هذه التصاميم مفهومة فقط لهذه الأداة. يمكن أن يحل محل العديد من بنيات اللغة المعقدة أو، على العكس من ذلك، إضافة أخرى جديدة. مخرجات البرنامج عبارة عن كود ذو جودة أقل مع بنيات محذوفة.

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

لذلك، يقدم هذا البرنامج تصميمات متنوعة للبساطة وسرعة التطوير ودعم الأسلوب.

عادةً ما يستهدف الكود الخصائص البشرية:

مقروئية.

بناء.

أداء.

أيضًا، عند النظر في المعالجات المسبقة، يواجه المبرمجون مفهوم السكر النحوي. هذه بعض الإضافات على لغة البرمجة والتي لا توفر أي ميزات إضافية ولكنها تعمل على تحسين إمكانية القراءة.

أنواع رئيسية

الخيارات الأكثر شيوعًا هي LESS وSASS وStylus. لذلك، كما هو موضح أعلاه، فإن مزايا استخدام هذه الأدوات هي تحسين محتوى النص وبنيته وإنتاجيته. ومع ذلك، يستخدم عدد قليل من المطورين مثل هذه البرامج في عملهم، حيث يعتقدون أن العمل معهم معقد وأن العديد من الوظائف غير واضحة.

البرنامج هو الأكثر شعبية في هذه المشكلة. تم تطوير هذا البرنامج في عام 2009 من قبل فريق من المبرمجين. لديه كل الوظائف على المستوى الأساسي. العيب الرئيسي هو عدم وجود الهياكل والحلقات الشرطية. الميزة الرئيسية لهذه الأداة هي الوضوح وسهولة الاستخدام، ويمكن توسيع وظائفها باستخدام المكونات الإضافية المختلفة.

أوراق الأنماط رهيبة نحويا

SASS هو أقوى معالج مسبق. تم تطويره من قبل فريق كامل من المبرمجين. تم تأسيسها في عام 2007 كوحدة نمطية لـ HAML وهي مكتوبة أيضًا بلغة Ruby (يوجد منفذ C++). كما أن لديها مجموعة واسعة من الميزات مقارنة بالبرامج الأخرى. لتوسيع إمكانيات أوراق الأنماط الرائعة نحويًا، يمكنك استخدام مكتبة Compass القوية. يحتوي برنامج SASS على خيارين لبناء الجملة: Sass وSCSS.

هذه هي الأداة الأحدث والأكثر واعدة. تأسست في عام 2010. يعد المعالج الأولي Stylus هو المعالج الأولي الأكثر ملاءمة وقابلية للتوسعة.

عادةً ما يعمل المبرمج بالفعل مع LESS. يعتبر أي ملف ملفًا أقل صالحًا. في هذه الحالة، ليست هناك حاجة لامتداد الملف. عند أخذ كود CSS عادي، فلنضعه في ملف يحمل نفس الاسم، ولكن بامتداد .less. في الواقع، تم استلام ملف مماثل بدون أخطاء وبمحتوى دقيق. كان الاختلاف الوحيد بين الملفات هو وجود أسطر فارغة بعد المحددات. وبالتالي، عند استخدام هذه الأداة، يكون وقت التجميع أقل بكثير. ولذلك، فإن عمل هذه الأداة يهدف إلى أهداف محددة، وبناء هيكل مناسب. يمكن القيام بذلك باستخدام CSS العادي، لكنه سيكون أقل ملاءمة.

العوامل الرئيسية في الاختيار

من حيث الخصائص الوظيفية، فإن Sass بالتأكيد أفضل من البرامج الأخرى في العديد من النواحي. ولكن إذا تم إنجاز العمل بالفعل باستخدام أقل، فلا فائدة من تغييره. كما ذكرنا أعلاه، يتيح لك SASS استخدام البوصلة، مما يجعل العمل مع البادئات أسهل. لا تحتوي البرامج الأخرى على مشروع Compass لأن لغة الأداة معقدة للغاية. لدى SASS عوامل تشغيل منطقية ودورية. موقع LESS جميل وسهل الاستخدام مقارنة بالمواقع الأخرى.

عند العمل مع قواعد @media، يضيف المبرمج كتلًا معها في أسفل صفحة الأنماط. وهذا يؤدي إلى انقطاع في الأنماط. تعتبر كل من Less وSass أداتين تحلان هذه المشكلة، والرياضيات التي تقف وراءهما متشابهة بشكل عام. من حيث السرعة، يتمتع كلا المعالجين بأداء جيد.

يواصل مطورو كلا الخيارين تحسينهما بشكل أكبر.

وفقا لمراجعات وتعليقات المبرمجين، يمكن استخدام كلتا الأداتين بقدرات متساوية. يُقال إن أوراق الأنماط الرائعة من الناحية التركيبية تتمتع بسرعة أبطأ من غيرها. يعتبر البعض أن Stylus قد تجاوز كلا المعالجين المسبقين اليوم.

لذلك، لا يوجد حل دقيق لمسألة استخدام Less وSass، حيث أن كلاهما يتمتعان بخصائص ووظائف جيدة. لذلك، يتم تحديد الاختيار حسب أهداف وغايات المبرمج.

من المؤلف: أولاً، ما هو المعالج المسبق؟ باختصار، المعالج المسبق هو برنامج يقوم بتعديل البيانات لتتناسب مع متطلبات الإدخال لبرنامج آخر. معالجات CSS الأولية هي لغة برمجة نصية تعمل على توسيع إمكانيات CSS العادية باستخدام المتغيرات وقواعد التداخل والوظائف والكتل المنطقية.

لماذا يجب أن أستخدمه؟

غالبًا ما ستجد نفسك في موقف يتعين عليك فيه استخدام نفس القيمة لعقار معين في أماكن مختلفة. على سبيل المثال، قمت أولاً بتحديد اللون الأحمر باعتباره اللون الأساسي للموقع. ثم تحتاج إلى تغييره إلى اللون الأخضر.

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

تتغير قيمة اللون الأساسي في مكان واحد. يمكنك أيضًا استيراد ملفات CSS من مصادر أخرى دون القلق بشأن عدد طلبات الشبكة، حيث يمكن دمجها جميعًا في ملف واحد قبل التجميع.

بفضل الطبيعة المتداخلة لمعالجات CSS الأولية، ستحصل على تعليمات برمجية مدمجة بنفس النتيجة. تعتمد LESS وSCSS على مبدأ DRY، والذي يعني "لا تكرر نفسك" أو "لا تكرر نفسك".

المعالجات. بداية سريعة

ما هو الخطأ في أقل؟

الشبكة مليئة بالفعل بالمناقشات حول أيهما أفضل: LESS أو SCSS. ولذلك، لن أتناول كلا الموضوعين بالتفصيل. بدلاً من ذلك، سأتحدث عن المشاكل الصغيرة التي واجهتني مع LESS.

يستخدم SCSS الرمز $ لتعريف المتغيرات، بينما يستخدم LESS الرمز @. نظرًا لأن CSS يستخدم أيضًا الرمز @ لاستعلامات الوسائط وعمليات الاستيراد والرسوم المتحركة للإطارات الرئيسية، فقد يكون هذا مربكًا للمطورين.

لا يتم استخدام الرمز $ في CSS. الرمز @ موجود في SCSS، ولكنه يُستخدم للتوجيهات @if و@else و@each و@for و@while.

على الرغم من أن هذا السيناريو ليس واقعيًا للجميع، فمن الأفضل استخدام معرفات مختلفة لفصل العناصر.

يدعم SCSS التعبيرات المنطقية التقليدية مثل if/else والكتل والحلقات. تعتبر عمليات الخلط المحمية في LESS أسهل للعين، ولكن من الصعب فهمها.

يمكن القيام به باستخدام أقل...

...أو فقط باستخدام SCSS.

LESS يعرّف مزيجًا واحدًا فقط خاضعًا للحراسة. لذلك، لا يمكنك ببساطة تمرير وسيطة ثانية ومعالجتها في نفس المزيج، مما يؤدي إلى تكرار التعليمات البرمجية لجميع السيناريوهات المحتملة. في الواقع، أقل (أقل) هو أكثر (المقصود من التورية).

أعلم أنه من الممكن تقصير الكود باستخدام القيم المعززة كأسماء خصائص لهذه الحالة، لكن المشكلة تكمن في أنني لا أستطيع تعيين جزأين مختلفين بشكل مشروط من نفس المزيج إلى LESS.

هناك المزيد من الصداع مع هذا الرمز ...

المعالجات. بداية سريعة

تعرّف على أساسيات استخدام معالجات Less وSass الأولية من البداية في أقل من أسبوعين

...من هذا.

لتحقيق نفس النتيجة باستخدام LESS، كان عليّ تحديد كل شيء مسبقًا، وكتابة mixin، والحصول على موضع الفهرس، والتكرار من خلاله باستخدام المنطق الخاص بي حتى تصبح قيمة الفهرس صفرًا، واستدعاء mixin يدويًا.

في حين أن هذا هو رأيي الشخصي، أعتقد أن SCSS يتعامل بشكل أفضل مع القيم الحسابية والقيم الرياضية.

ما العيب بها؟

ومن ناحية أخرى، فإن LESS أكثر تعقيدًا بكثير. على سبيل المثال، عندما أستخدمه، لا أحاول إجراء الحسابات. لكن حتى لو فعلت ذلك، فمنذ متى أصبح 100% ناقص 50 بكسل يساوي 50%؟

أقل، لماذا تتجاهل القيم مع وحدات التغيير؟

لماذا تجعلني أتعلم عكازاتك بينما أنا أعرف CSS بالفعل؟

وشيء أخير. بفضل مشروع LibSass، أصبح لدى SCSS العديد من الأغلفة للغات الأخرى، مثل C وGo وPHP وPython وDart وما إلى ذلك.

لماذا قررنا التخلي عن LESS لصالح SCSS؟

أثناء قيامنا بتطوير بطاقات JotForm، كنا بحاجة إلى معالجة القيم المتغيرة مسبقًا - التجميع المسبق والتخزين المؤقت من جانب الخادم في نفس الوقت؛ وكل هذا كان لا بد من القيام به على أكمل وجه.

أردنا أن يتمكن المستخدمون من تخصيص مظهر النماذج. بحيث يتم عرض أي تغييرات على الفور وفي نفس الوقت وتخزينها مؤقتًا على الخادم. من أجل مصلحة مستخدمينا، لم نرغب في تشغيل واجهة LESS من جانب العميل لأن ذلك سيتطلب قوة معالجة العميل - وقد تسوء الكثير من الأمور.

لم نبدأ دورة التطوير بهدف الانتقال من LESS إلى SCSS. ولكن في منتصف الطريق من خلال التعامل مع هذه القضايا البسيطة، كان عدم وجود غلاف مناسب لـ LESS هو القشة الأخيرة.

ومع ذلك، فإن الاختلافات بين LESS وSCSS أقل أهمية من القواسم المشتركة بينهما. في النهاية، لا يهم المعالج المسبق الذي تستخدمه، طالما أنك تستخدمه.

إن محاولة إدارة مشروع ضخم باستخدام ملف CSS واحد وبنية CSS تقليدية أصعب بكثير من استخدام معالج مسبق مع بعض المشاكل.

أنا أحب بناء جملة SASS أكثر من SCSS لإيجازه. لكن التداخل الهائل للأنماط في SASS يمكن أن يزيل بسرعة فوائد الإيجاز. على أية حال، الفرق بين SASS وSCSS ليس جوهريًا. تبين أن LESS أقرب إلى SCSS منه إلى SASS. وبشكل عام، هو نفس الشيء. لا توجد اختلافات كثيرة، لكن اثنين منها يغيران ميزان القوى بشكل جذري.

1. أقل - يمكن من جانب العميل باستخدام JS.

بتعبير أدق، ليس الأمر أنه يستطيع، فهو مصمم لهذا الغرض. الممارسة الشائعة لاستخدام كود LESS:

عندها تمت إضافة القدرة على التجميع على الخادم (كل من js وروبي).

للوهلة الأولى يبدو وكأنه خاصية غريبة. لماذا يتم التجميع من جانب العميل إذا كان بإمكانك التجميع بشكل مثالي على الخادم وخدمة CSS المضغوطة الجاهزة كما اعتدنا على SASS؟

يصبح السبب واضحًا بعد دراسة الأسطر الأخيرة غير الموصوفة من وثائق LESS:

@height: `document.body.clientHeight`;

يوفر مثل هذا الخط الصغير الوحيد فرصًا لم يحلم بها مصممو التخطيط إلا منذ بداية إتقان الأنماط. استدعاء برنامج Java script من جانب العميل من CSS ومراعاة إعدادات المتصفح الفعلية عند إنشاء الأنماط.

وهذا هو، لدينا الآن الفرصة لتحميل DOM أولا، ثم قم بإنشاء CSS خاص له مباشرة على جانب العميل. ثم فكر بنفسك في الفرص التي يفتحها هذا.

ما إذا كان مشروعك يحتاج إلى هذا سؤال مختلف. من الواضح أن الجميع معتادون على عدم اليقين/الاستقلالية لدى العميل والتخطيط بأسلوب "نحن نقوم بذلك عالميًا بحيث يتم عرضه بشكل أو بآخر للجميع في جميع القرارات". ولكن هذا ليس سببا لنسيان أن هذه الفرصة موجودة الآن ومعها يمكنك القيام، على سبيل المثال، بتصميم مرن للغاية.

2. LESS، على عكس SASS/SCSS، ليس له منطق.

لا يوجد إذا/ثم، ل، وما إلى ذلك في أقل. على الرغم من أنه نظرًا لسهولة دمج JS فيه، أعتقد أنه من الممكن تمامًا التلاعب بالمنطق. لم أحاول ذلك.

3. الاختلاط أسهل في أقل + يمكنك مزج الفصول الدراسية.

لقد أحببت حقًا حقيقة أنه في LESS يمكنك تضمين خصائص الفئات الأخرى في التعريف. الفصل نفسه عبارة عن مزيج. هذه ميزة أخرى لا يمتلكها SASS/SCSS. يمكنك تضمين ملف CSS عادي في LESS واستخدام فئاته لتحديد خصائصك. على سبيل المثال:

طَوّق (
التفاف النص: التفاف؛
المساحة البيضاء: التفاف مسبق؛
مسافة بيضاء: -moz-pre-wrap؛
التفاف الكلمة: كسر الكلمة؛
}
قبل (.التفاف)

ملخص

باستثناء النقطة الأولى، الفارق ليس كبيرا والخيار أكبر للهواة.

بالنسبة لي شخصيا، يبدو LESS أكثر جاذبية بسبب بساطته. لم أحتاج أبدًا إلى دورات وشروط في الأنماط من قبل. الأدوات المساعدة الكلاسيكية مثل "box-shadow، Liner-gradient، darken" متوفرة في LESS.

نعم، تمت بالفعل كتابة العديد من المكتبات الجاهزة لـ SASS (