ربما تكون قد سمعت عن المعالجة المسبقة لـ CSS وتتساءل عما تدور حوله جميع المشاركات. قد تكون سمعت من ساس أو أقل .

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

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

كيف يختلف ساس عن CSS؟

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

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

أنا أوصي باستخدام تطبيقات مثل Codekit ، LiveReload أو خليط والتي تساعدك على إعداد مشروع Sass على نظام Mac من الصفر أو إذا كنت مستخدمًا بنظام Windows أوصي به PrePros . يساعدني Codekit ، الذي اخترت معالجتي المسبقة ، من خلال المعالجة المسبقة ل Sass الخاص بي وكذلك التحقق من كودك وتصغيره للسماح لموقع الويب الخاص بك بالعمل بسرعة وفعالية. (القدرة على خلق بوصلة أو بربون تعتبر المشاريع القائمة في Codekit أيضًا ميزة رائعة ولكنها لا تتعدى نطاق هذه المقالة.) بعد الحصول على مزيد من الراحة مع Sass ، تأكد من التحقق من كيفية استخدام Compass و Bourbon في مشاريع Sass الخاصة بك.

إذن ما هو ساس؟

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

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

تحقق من المثال أدناه.

.CSS

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.Sass

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

بناء

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

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

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

تعتمد كيفية إعداد الهيكل الخاص بك في نهاية المطاف عليك. ابدأ ببناء أساسي وضبط احتياجاتك وسير العمل الخاص بك.

@استيراد

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

import يأخذ اسم ملف للاستيراد. كملاذ أخير سيتم استيراد ملفات Sass أو SCSS عبر اسم الملف الذي تختاره. إذا لم يكن هناك امتداد ، سيحاول Sass العثور على ملف بهذا الاسم و .scss أو امتداد .Sass واستيراده.

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

@import "main.scss";

أو:

@import "main";@Partials

إذا كان لديك ملف SCSS أو Sass الذي تريد استيراده ولكن لا يتم ترجمته إلى CSS ، فيمكنك إضافة شرطة سفلية إلى بداية اسم الملف ، والذي يُعرف باسم Partial. كما يتم تجميع التعليمات البرمجية سوف يتجاهل Sass الجزئية عند المعالجة إلى CSS. على سبيل المثال ، قد يكون لديك _buttons.scss ، ولن يتم إنشاء ملف _buttons.css ويمكنك حينئذٍ import "أزرار" ؛

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

المتغيرات

المتغيرات في CSS هي طفرة في تطوير الشبكة الحديثة. مع Sass يمكنك إنشاء متغيرات لأشياء مثل الخطوط والألوان والأحجام والهامش ، الحشو ، إلخ ... القائمة لا نهاية لها. إذا كنت تكتب JavaScript أو PHP فإن المفهوم متشابه إلى حد ما من حيث تحديد المتغيرات والاتفاقيات.

فلماذا استخدام المتغيرات؟ تسمح لك المتغيرات سهلة الاستخدام باستخدام عنصر أكثر من مرة ، على غرار الفصل في HTML أو متغير في JavaScript. على سبيل المثال ، لنفترض أنك تعرّف عدة divs بلون خلفية معين. يمكنك استخدام المتغير الذي يسهل تذكره بدلاً من الشفرة السداسية التقليدية أو حساب RGB. جعل متغير مع اسم يسهل تذكره يسمح أقل نسخ ولصق وسير عمل أكثر إنتاجية. ينطبق المفهوم نفسه عندما يمكن تنفيذ متغير ، ومع Sass يكون في أي مكان تقريبًا ، على سبيل المثال ، هذا .css:

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

سينتج عن هذا الملف .css:

#container {font-size: 12px;padding: 10px;color: #C0392B;}

العمليات والوظائف

الجزء البارد حول المتغيرات هو أنها تشبه إلى حد كبير تلك المستخدمة في لغات البرمجة النصية. يمكن استخدام المتغيرات داخل ساس داخل كل من العمليات والوظائف. يتم دعم العمليات الرياضية القياسية (+ ، - ، * ، / و ٪) للأرقام. للألوان هناك وظائف مبنية في Sass والتي تستهدف الخفة ، تدرج الألوان ، التشبع ، وأكثر من ذلك.

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

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }} 

سيؤدي إلى هذا .css:

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

التعشيش

التعشيش هو سبب ضخم لماذا أحب ساس. تكتب أسطرًا أقل من الشفرة في النهاية وكل الشفرة سهلة القراءة بسبب التنسيق المتداخل. (نفس مفهوم التعشيش موجود أيضًا في LESS).

هناك نوعان من التعشيش:

التعشيش محدد

تشبه محددات التعشيق في ساس إلى كيفية تعشيق HTML:

Main Content
Sidebar Content

النسخة ساس من التعشيش:

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

سيؤدي إلى CSS التالية:

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

تداخل الممتلكات

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

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

سيؤدي هذا إلى CSS:

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

Mixins

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

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

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

وهنا نقوم بتضمين mixin مع سطر واحد من التعليمات البرمجية:

ul.navbar {@include navigate;}

مما يؤدي إلى هذا CSS المترجمة:

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

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

هناك بعض مجموعات mixin المعروفة مسبقا والتي ذكرتها في وقت سابق تسمى Compass و Bourbon. باستخدام ملف import بسيط في مشروعك ، يمكنك الوصول إلى المزيج الذي تم إنشاؤه بالفعل والمستخدم بشكل شائع عبر الويب. هناك الكثير من الخيارات التي من الصعب تغطية كل شيء متاح ، ولكن من المؤكد أن التجربة ممتعة وتجعل يديك متسخة في تطوير الرسوم المتحركة أو التحولات المخصصة مع بضعة أسطر من الشفرة بدلاً من شاشة كاملة. تجعل Mixins تطوير المتصفح عبر الإنترنت نسيمًا إذا كنت لا ترغب في كتابة بادئات محددة من المتصفح مرارًا وتكرارًا داخل CSS.

على سبيل المثال ، هنا نقوم بإنشاء مزيج مع الحجج التي تسمح بتخصيصها.

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

الذي يمنحنا هذا CSS عند تجميعه:

p {border-color: blue;border-width: lin;border-style: dashed;}

ملخص

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

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

هل تستخدم Sass ، أو تفضل معالج سابق مختلف CSS؟ هل لديك مزيج المفضلة؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، يستخدم صورة الصفر إلى البطل عبر Shutterstock.