الآن أنا متأكد أنك سمعت عن ساس وكيف "يجب عليك البدء في استخدامها!"
إن تعلم أداة جديدة يمكن أن تمتص وتجد الوقت للقيام بذلك هو أمر مستحيل إلى جانب ذلك ، وفي بعض الأحيان ، تأتي أداة على هذا التغيير في صناعتنا ، وهو أمر لا يمكن تجاهله.
عندما تصبح صفحاتنا وتطبيقاتنا أكثر تعقيدًا ، تصبح أوراق أنماطنا أكبر وأكثر صعوبة في الحفاظ عليها. تساعد المعالجات التمهيدية لـ CSS مثل Sass في إبقاء أوراق الأنماط الخاصة بنا موجزة وتتيح لنا إمكانية تعديل شفرتنا مع توفير مجموعة كاملة من الميزات التي لا تتوفر حتى الآن في CSS العادي.
هذه الميزات الإضافية تجعلها ممتعة حقًا للاستخدام! الآن ربما رأيت شيئًا يبدو كالتالي:
$i: 6;@while $i > 0 {.item-#{$i} {width: 2em * $ i؛ } $ i: $ i - 2؛} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
وفكر ، "ماذا تطنططط؟ شكرًا ولكني سأحتفظ بـ ol العادي "CSS".
أعترف أنه يبدو مروعًا وبعض الأشخاص يفعلون بعض الجنون حقًا الاشياء المعقدة مع ساس ولكني هنا لأخبرك أن أي شخص يمكنه البدء في استخدامه ، وسوف تجعلك المكاسب التي ستحصل عليها في اليوم الأول منك مؤمناً من ساس.
الحصول على Sass إعداد لمشروع ما هو أبعد قليلا من نطاق هذه المقالة ولكن التثبيت سهل نسبيا وموقع Sass على شبكة الإنترنت تعليمات لنظام التشغيل Linux أو Mac أو PC. الشيء الرائع هو أنه بمجرد تثبيته ، يمكنك أن تأخذ أي ملف CSS لديك وإعادة تسميته .scss مما يجعلها ملف ساس.
كل CSS المغلق بشكل صحيح ساس صالح!
هذا يعني أنه يمكنك البدء في استخدام Sass مع الاستمرار في كتابة أنماطك كما هو الحال دائمًا ، مع دمج المزيد من الميزات ببطء مع زيادة مستوى الراحة. هذا صحيح الناس ، فقط نفس رأ '. نفس "ولكن هنا خمسة مكاسب رهيبة لديك الآن تحت تصرفكم:
ما هو لون الرأس الرئيسي مرة أخرى؟ كيف أكتب هذا الخط المكدس؟ كم عدد المرات التي كنت تكتب فيها CSS واضطرت إلى البحث من خلال أنماطك السابقة عن قيمة ما أو اضطرت إلى تفتيت قطارة الألوان ، مرة أخرى ، لمعرفة ذلك اللون السداسي العشري؟
يوفر Sass المتغيرات كطريقة لتخزين المعلومات التي تريد إعادة استخدامها خلال ورقة الأنماط الخاصة بك. يمكنك الآن تخزين قيمة اللون أو مجموعة الأحرف الطويلة كشيء يسهل تذكره. الطريقة التي تعلن بها متغير هي بعلامة الدولار $ يليه الاسم. يمكن أن يكون هذا الاسم ما تريده أن يكون. ثم تكتب نقطتين : متبوعًا بالقيمة وشبه منقوطة ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
الآن إذا كنت ترغب في استخدام واحدة من هذه القيم ، يمكنك فقط استخدام المتغير بدلاً من ذلك.
.mySelector { font-family: $mainFont; color: $mainColor; }
رائع ، صحيح؟ هذه الميزة واحدة فقط ، يجعلها تستحق التثبيت لأنها توفر الكثير من الوقت عند تأليف CSS. من الرائع أن تصل إلى CSS المواصفات ولكن من يعلم متى سنكون قادرين على استخدامها؟ محظوظ بالنسبة لنا ، مع ساس ، ليس علينا الانتظار.
الآن قد تقول لنفسك "CSS يحتوي علىimport ، إنه ليس بهذه البساطة" وستكون على حق ، لكن إصدارات CSS و Sass تختلف بشكل كبير. في CSS العادي @import يسحب في أوراق الأنماط الأخرى لكنه يفعل ذلك عن طريق تقديم طلب HTTP آخر ، وهو أمر نرغب عادة في تجنبه. لهذا السبب قد لا تستخدم حتىimport من قبل. Sass ، من ناحية أخرى ، هو المعالج الأولي (التأكيد على ما قبل) الذي سيسحب ذلك الملف قبل أن يجمع CSS.
والنتيجة هي صفحة CSS واحدة تتم معالجتها بواسطة طلب HTTP واحد. ما يعنيه هذا هو أنه يمكنك تفكيك css إلى أجزاء أصغر وأكثر صونًا مع الاستمرار في عرض صفحة واحدة على المتصفح. هل تحتاج إلى إصلاح النص على الزر؟ لا مزيد من أوراق نمط القشط يبحث عن أنماط زر ذات الصلة. ما عليك سوى فتح الزر جزئيًا وإجراء التغييرات.
ما هو جزئي؟ فقط ما يبدو. وهي ملفات Sass جزئية تحتوي على قصاصات صغيرة من CSS يمكنك تضمينها في ملفات Sass الأخرى. يتم تسميتها باستخدام شرطة سفلية رائدة يتبعها اسم. _myFile.scss . تسمح الشرطة السفلية لـ Sass بمعرفة أن الملف عبارة عن ملف جزئي فقط ، وأنه يجب عدم تجميعه في CSS. لاستيراد هذه الجزئية ، عليك فقط إضافةimport إلى ملفك مثل:
@import 'partials/myPartial';
لذلك أنا استيراد _myPartial.scss الموجود في مجلد باسم الجزيئات. لا يلزم تضمين تسطير أسفل السطر أو ملحق الملف. ساس ذكي بما يكفي لمعرفة أي ملف تقصده. يسمح لنا استخدام الحواسيب الجزئية بطرق رائعة لوضع كودنا بشكل نمطي ، مما يجعله أكثر قابلية للحمل وأكثر سهولة في الصيانة.
يقوم Sass بدمج الوظائف إلى طرف CSS. أعلم أن الجميع ليس مبرمجًا وأن مفهوم الوظيفة قد يكون شيئًا فوق رأسك ولكن لا تقلق ، كثيرًا يضيف الكثير من الميزات المفيدة بينما لا يكون شديد التعقيد. بالنسبة إلى الألوان ، هناك العديد من العناصر المفيدة للتلاعب بها ، لكن ثلاثة منها تبرز كمكاسب رائعة وسهلة للأشخاص الذين بدأوا للتو. دعونا ننظر في كيفية استخدامها.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
بناء الجملة هو مستقيم للأمام. في الوظائف الثلاث المذكورة أعلاه ، نرى أن لدينا وسيطين لكل منهما. الأول هو اللون الذي نرغب في التلاعب به. يمكن أن يكون هذا بتنسيق سداسي عشري أو RGB أو أي لون ملائم لـ CSS. يمكن أن يكون حتى متغير. والثاني هو المبلغ الذي نرغب في تعديل هذا اللون به. جعل 10٪ أغمق ، تفتيح بنسبة 5٪ ، قم بتعيين alpha إلى 0.6. نتيجة هذه الوظيفة هي القيمة التي تم تعيينها في CSS المترجمة. إذاً بالأسفل ترى مهامنا في العمل
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}نأمل أن ترى بالفعل كيف يمكن أن يكون هذا مفيدًا. هناك عشرات الطرق للاستفادة من هذه الوظائف الثلاث لإضافة بعض التباين اللطيف إلى حد ما ويمكن استخدامها في أي مكان ستذهب إليه عادة قيمة اللون. هؤلاء الثلاثة هم مجرد غيض من فيض. هناك الكثير من وظائف الألوان والعديد من الطرق الإبداعية التي يمكن استخدامها.
بعض الأشياء في CSS هي مملة قليلاً للكتابة. تقوم Mixins بعمل مجموعات من إعلانات CSS التي يمكننا إعادة استخدامها في جميع أنحاء موقعنا. أنماط CSS3 التي تتطلب بادئات البائعين هي مثال مثالي على وقت استخدام المزيج. بدلاً من كتابة نفس الخاصية مرارًا وتكرارًا ، نكتب مزيجًا مرة واحدة ثم نطلق عليه هذا المزيج في أي وقت نريد استخدامه فيه. لإعلان mixin نستخدم @mixin الكلمة. ثم نعطيها اسمًا ونطبق أساليبنا بين الأقواس المتعرجة مثل: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
يمكن حتى تمرير الحجج إلى المزيج لجعلها أكثر مرونة. لاستخدام لدينا mixin نستخدم فقط @include الكلمة.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
كما ترون في المثال أعلاه نطلق على mixin لدينا مع @include تليها اسم mixin ثم أي الحجج داخل قوس. فكر في مقدار الوقت الذي سيوفره لك هذا. لماذا لا يستخدم الجميع هذا؟
كانت هذه الأدوات رائعة ، لكني حفظت الأفضل للأخير. @extend هي واحدة من أكثر الميزات المفيدة التي تسمح لنا بمشاركة مجموعة من خصائص CSS من محدد إلى آخر. فكر في زوج من الأزرار ، مثل زر القبول والرفض في نافذة مشروطة. نظرًا لأنهما يمثلان أزرارًا ، فمن المحتمل أنهما سيشتركان في معظم التصميم نفسه ولكن سيحتوي زر التراجع على خلفية حمراء لإبرازه. مع Sass ، نكتب الأنماط الافتراضية لجميع الأزرار ، ثم "تمديد" هذه الأنماط إلى زر الرفض حيث نضيف الخلفية الحمراء.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}يا رجل ، ما مدى روعة عدم تكرار نفسك؟ لا يؤدي هذا فقط إلى تعزيز نمطية الأنماط الخاصة بنا فحسب ، بل يقلل أيضًا من خطر إيقاف الأنماط من زر إلى آخر. هذا وقت ضخم وفر الفوز! قم بضرب هذا لجميع أنماط الموقع ولدينا إطار زمني منخفض بشكل كبير لكتابة CSS.
هيك ، مع كل الوقت الذي ننقذه ربما يمكننا تعلم الجوانب الأكثر تعقيدًا من ساس.
آمل أن أكون قد أقنعتك بأن تعطي هذه الأداة الرائعة لقطة وتوضح بعض الميزات التي يمكن أن تحسن إنتاجيتك على الفور. والحقيقة أنني يمكن أن أكتب هذه المادة مرة أخرى غدا ولديها خمس ميزات أكثر أنيق حقا للمشاركة. انها مجرد هذا رائع! إن Sass (وغيره من المعالجات التمهيدية) موجودة هنا لتبقى بنفسك معروفًا وتبدأ في استخدامها. للراغبين في معرفة المزيد من هذه الموارد على تويتر والويب:
الحمقى:
مواقع ويب:
وإذا كنت في منطقة مقاطعة جنوب فلوريدا تري تأتي الانضمام إلينا في جنوب فلوريدا ساس Meetup .