/Meet the CSS Family

Meet the CSS Family

تعتبر الـ Cascading Style SheetCSS) اللغه الأم و الرئيسية المستخدمه لتنسيق محتوى صفحات الـ HTML
تطورت الـ CSS لتصل إلى إصدارها الثالث والذي يحتوي على إضافات كثير من أشهرها الـAnimation و الـ2D/3D Transformations وإلى آخره ،  لكن في الآونه الأخيره انتشر استخدام الـ  CSS Preprocessor  وهي لغات مشتقه من الـ CSS لكنها تعد تطور قوي لها  وفي هذا المقال سنتعرض لأشهر لغتين وهما  الـ Less وSass وبعض من مميزاتهم والاختلاف بينهم، في البداية دعونا  نتعرف أكثرعن ما هو CSS Preprocessor ؟

CSS Preprocessor
هو امتداد من الـ CSS هدفه الأساسي هو إضافه خصائص وامكانيات مميزه ومبتكره وتنظيميه أكثر عن الـ CSS – مع بعض التغيرات في الـ Syntax بالطبع – وتحويل استخدامها بطريقة دينامياكيه إلى حد ما أو أشبه بالبرمجه ومن ثم معالجتها / تحويلها (Compile) للغة الأساسية الـ CSS لتتم قراءتها من خلال المتصفحات كما هي العاده وبالطبع يحتووا على كل مميزات الـ CSS3 ، لننتقل بشكل تفصيلي إلى Less و Sass

Sass (Syntactically Awesome StyleSheets)

هو أشهر أبناء العائلة وأكثرها استخداماً بنسبة تصل 66% ، يوجد طريقتين لكتابة الـ Sass

الأولى وهي الطريقه الأقدم وهي لغة الـ Sass الأساسية وهنا تستطيع القول وداعاّ للـ  Brackets } والـ Semicolons ; ولكن عليك الاهتمام بالمساحات البيضاء فتضع كل Selector أو Declaration  في سطر مستقل بذاته وتحفظ الملفات بامتداد sass.  كما سيوضح في الأمثلة القادمة

الثانية وهي ( SCSS(Sassy CSS أو الاصدار الثالث من الـ Sass ويكون الـ Syntax الخاص بها أقرب إلى الـ  CSS أي يوجد بها  Brackets } و Semicolons ; ولا تهتم كثيراً بالمساحات البيضاء ولكنها متوسعه لتشمل خصائص الـ Sass  وتُحفظ الملفات بامتداد scss.

Less

يأتي الـ Less في المرتبة الثانية بعد الـ Sass من حيث الاستخدام وتصل نسبة استخدامه 13.41% وتهتم بوجود  Brackets } و Semicolons ;  و تُحفظ ملفاته بامتداد less.

إليكم بعض مستجدات عالم الـ CSS Preprocessor ومميزاتهم مع بعض الأمثلة.


Variables

إذا كنت ممن يتعامل عادة مع الـ CSS فبالطبع تكرر معك قيمة لون مثلاً أو أحد خصائص لـBorder أو Transition أو أو ..
هنا في الـ Preprocessor تستطيع فقط أن تعرف متغير بالقيمة التي تحتاجها مرة واحده فقط وعند الحاجة إلى استخدامه ما عليك إلا كتابة إسم المتغير.
في الـ Sass تتعرف المتغيرات عن طريق كتابة الرمز $ قبل المتغير كما في المثال

SCSS

$basic-color: #D6DCE1;
$border-size: 5px;
$border-style: solid;
div{
	color: $basic-color;
	border-bottom: $border-size $border-style $basic-color ;
}

وبالطبع كما نوهنا في السابق اذا كنت تستخدم Sass Syntax فسيكون شكل الكود مختلفاَ

 Sass

$basic-color: #D6DCE1
$border-size: 5px
$border-style: solid
div
	color: $basic-color
	border-bottom: $border-size $border-style $basic-color

في الـ Less تستخدم @ لتعريف المتغيرات

Less

@basic-color: #D6DCE1;
@border-size: 5px;
@border-style: solid;
div{
	color: @basic-color;
	border-bottom: @border-size @border-style @basic-color ;
}

Nesting
سنوضح المقصود بالـ Nesting بمثال بسيط مكتوب بالـ CSS

ul{
   margin-top: 5px;
}
ul li{
   margin-bottom: 3px;
}
ul li a{
   color: #BC0000;
}
ul li a:hover{
   color: #BC2043;
}

كما نرى في المثال فإن لدينا List تتكون بالطبع من li وبداخلها Links لنرى تحول هذا الكود من خلال الثلاث لغات

SCSS/Less

ul{
	margin-top: 5px;
	li{
		margin-bottom: 3px;
		a{
			color: #BC0000;
			&:hover{
				color: #BC2043;
			}
		}
	}
}

بالطبع ستلاحظ أن التكرار انتهى ويكتب بصورة متسلسلة (Hierarchy) كما تكتب الـ HTML
وإذا كنت تستخدم أي من الـ Selectors بداخل الـ Element فليس هناك داعي لإعاده كتابته مجدداً كل ما عليك فعله هو كتابه & مكان الـ Element

بالنسبة للـ Sass فكل الـBrackets } والـ Semicolons ; ستزال ويكون الكود كالآتي:

Sass

ul
	margin-top: 5px
	li
		margin-bottom: 3px
		a
			color: #BC0000
			&:hover
				color: #BC2043

Mixins
الـ mixins في الحقيقة تشبه الـ Function في لغات البرمجه وهي الدوال التي تحتوي عملية معينه وتستقبل متغير وبالطبع يكون لها إسم

SCSS

@mixin transition($transition-effect){
	-webkit-transition: $transition-effect;
   	 -moz-transition: $transition-effect;
   	 -ms-transition: $transition-effect;
    	-o-transition: $transition-effect;
    	transition: $transition-effect;
}
a{
	@include transition(all 1.5s ease);
}

Sass

=transition($transition-effect)
	-webkit-transition: $transition-effect
   	 -moz-transition: $transition-effect
   	 -ms-transition: $transition-effect
    	-o-transition: $transition-effect
    	transition: $transition-effect
a
	+transition(all 1.5s ease)

Less

.transition(@transition-effect){
	-webkit-transition: @transition-effect;
   	 -moz-transition: @transition-effect;
   	 -ms-transition: @transition-effect;
    	-o-transition: @transition-effect;
    	transition: @transition-effect;
}
a{
	.transition(all 1.5s ease)
}

Inheritance

إذا كنت تكتب Rule تتكرر خصائصها أو الـ Property فيها بـ Rule أخرى فإنك بالتأكيد ستكرر الخصائص مرتين لكن مع الـCSS Preprocessor  فهي مره واحده فقط إليكم الأمثلة للتوضيح

CSS

.top-navigation{
    padding: 10px;
    color: #BC0000;
}
footer{
    padding: 10px;
    color: #BC0000;
    background-color: #D6DCE1;
}

SCSS

.top-navigation{
     padding: 10px;
     color: #BC0000;
}
footer{
     @extend .top-navigation;
     background-color: #D6DCE1;
}

Sass

.top-navigation
      padding: 10px
      color: #BC0000
footer
      @extend .top-navigation
      background-color: #D6DCE1

Less

.top-navigation{
       padding: 10px;
       color: #BC0000;
}
footer{
       .top-navigation;
       background-color: #D6DCE1;
}

Operations

من المميزات الرائعه جداً في CSS Preprocessor هي إمكانية استخدام العمليات الحسابيه من خلال   الـ+, , / , % و *

SCSS/Less

div{
	margin-top: 5px*2px;
	padding :20px-9px;
}

Sass

div
	margin-top: 5px*2px
	padding :20px-9px

Importing

من خلال هذه الميزه تستطيع العمل على مشروعك مهما كان كبيراً بنظام فائق، بدلاً من كتابة المتغيرات والـ Mixins والـ Rules العادية في مكان واحد تستطيع تقسيمهم كلٌ في ملفه الخاص ثم في النهاية تقوم بعمل Import لكل الملفات في ملف واحد ثم تقوم بمعالجته (Compile) للملف المجمع

SCSS

@import ‘site.scss’;

Sass

@import site.sass

Less

@import "site.less";

في هذا المقال تناولنا بعض مميزات كلاً من اللغات Sass, Less, SCSS ، فإذا كنتَ معتاداً أن تستخدم الـ CSS3 باستمرار في مشاريعك فاعتقد أنه قد حان الوقت لاستبداله بـ CSS Preprocessors والاستمتاع بمميزاتهم.
دمتم بخير.