السلام عليكم , إن شاء الله تكونو بخير ..

فى البوست : ابدء SASS & Compass اليوم ! [ج١]. اتعرفنا على اللغه , اتعرفنا ازاى نشغلها على الجهاز الخاص بينا سواء ماك او ويندوز. فى البوست دا , هنتكلم عن امكانيات sass و  Compas و ازاى تستغلها بشكل عام. إذا مكونتش قريت البوست الاول , ياريت تقراه لان فيه معلومات كتير هتكلم على اعتبار انك عارفها اصلا.

ملحوظه : كل الاكواد الجايه و الامثله مكتوبه SCSS , موش SASS و هعرفكم الفرق فى وقت تانى بأذن الله.

١. Variables – المتغيرات :

مختلفتش تماما عن المتغيرات فى اى لغه تانيه , بتحدد قيمه لشئ ما , و بتبدأ تنادى عليه كل ما تحتاجه , زى مثلا :

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

دا فى الريندر هيكون بالشكل التالى :

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

طبعا مدى التطبيقات اللى ممكن تتعمل بالطريقه دى كبير جدا. ممكن تحدد اصلا الجايدلاينز للبراند للموقع اللى بتعمله , و تنادى عليها دايما بالمتغيرات. وقت ما هتعمل تغيير هيتأثر الكل بيه , ودا لوحده ميزه موش قليلة.

٢. Nesting او التعيشيش !

المقصود بال Nesting , هو انى احدد مثلا ال a اللى جوه ال Div اللى الاى دى بتاعه مثلا theID , بالطريقه دى :

div#theID > a{ display: none; }

دا طبعا بيفيدنى فى إنه بيحدد تحديد جازم جدا للعنصر اللى معايا. فى حالات كتير احنا بنشتغل بالطريقه دى , خصوصا لما تكون مثلا عامل ستايل شيرد على عنصر ما , و عاوز تخصصه جوه جزء معين من الموقع , موش هتروح تضيفله class فى الجزئيه دى بالخصوص . لا بتعتمد على Unique Listener  تانى لاى عنصر , سواء كان ID او كان Class موش Shared. الموضوع فى SCSS ابسط مما تتخيل .. دا مثال للكود :

div#theID >nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

انا هنا فتحت تاج الناف , و قولت انه جواه UL و حدد الكود اللى عاوزه يطبق و كتبت الاستيل بتاعها عادى جدا. فى المقابل . هيكون الكود اللى خارجلى من SASS كالتالى :

div#theID >nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

الجزء دا من SASS ممكن تستخدمه فى حجات لا حصر لها , بيختصر عليك جدا فى الكود ودا شئ دايما بيعمل فرق فى المشاريع الكبيره و المتوسطه.

٣. Partials او الجزئيات :

قولنا قبل كده فى الجزء الاول من المقال دا , ان انت بتحدد اما ملف scss و تحدد ليه ملف تانى يتعمل ليه ريندر فيه , او انه بتحدد فولدر , كل الملفات ال SCSS اللى فيه يتم معالجتها و حفظها فى فولدر تانى ك CSS ..

دا معناه ان فايل .scss فى الحاله دى , هيتم عمل الريندر ليه سواء انا بستخدمه او لا ! و دا موش حاجه كويسه , و لغطبة ملفات.

ناهيك عن انك ممكن تكون عامل جزء معين بس , و بتعمل ليه import فى فايل تانى. المشكله دى حلها استخدام الجزئيات اللى sass بيدعمها .. ببساطه لو مثلا انا عندى ملف معين موش عاوز يتعمل ليه ريندر , لا عاوز اعمله import فى اماكن معينه. لو هو مثلا اسمه template.scss هخلى بس اسمه _template.scss , بالطريقه دى SASS موش هتعالج الملف دا اصلا , الا لو انت عامله import داخل ملف تانى فقط.

٤. Import او الإستيراد :

الخاصية موجوده فى CSS عادى, بس هنا احنا بنتكلم على أداء. فى كل مره انت بتعمل فيها Import خلال CSS العادى. بيعمل HTTP request جديد . و بيعامل كل ملف على انه منفصل عن التانى. فى SASS الموضوع مختلف.

انت لو بتعمل خلال ملف ما , import لاى ملف تانى. sass هيريندر الملفين الاساسى و اللى معمول ليه Import جوه الملف الاساسى .. اى انه هيعمل HTTP request واحده فقط.

دا مفيد فى بعض المشاريع. اللى بتكون قسمت الملفات فيها لاكتر من مٌكون او component و كل واحد فيهم فيه الاستيل الخاص بالمٌكون دا.

٥. Mixins او المزج :

واحده من افضل الامكانيات على الاطلاق فى SASS , ال Mixins فى SASS قريبه جدا ل Function فى PHP مثلا! الفكره نفسها , انا بعرف ميكسين . و بديله بعض القيم . و بستخدمها جوا الميكسين نفسه. فى اللى جاى مثال بسيط على دا.

@mixin margin($top, $right, $bottom, $left) {
  margin-top: $top;
  margin-right: $right;
  margin-bottom: $bottom;
  margin-left: $left;
}

.box { @include margin(10px,20px,30px,40px); }

فوق انا عرفت ميكسن و قولتله انه هياخد اربع قيم , هي top , right, bottom, left , و قولتله انه هيستخدم القيم دى فى margin لل top و ال right الخ. بعدين طبقته على box , بالترتيب اللى انا كاتبه فى ال mixin , و القيم اللى انا كاتبها فى الانكلود الخاص بيه , فالناتج هيكون كالتالى ..

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

دا مثال بسيط للى ممكن تعمله بالميكسن , عاوز تنتقل بتفكيرك لدرجه تانيه ؟ جربت تشوف bourbon.io

٦. Extend/Inheritance او التوريث :

النقطه دى هتغير استخدامك بالكامل فى مناطق كتير جدا من الكود بتاعك لل shared class ..

الفكره هنا , انى مثلا عندى كلاس اسمه Button .. و عندى كلاس تانى اسمه Colored .. انا عاوز اخلى ال Colored بيحتوى على نفس خصائص ال Button ! فى العادى انا قصادى حل من اتنين .. اما انى اعرف الاليمينت على الكلاسين دول ! و دا هكتب فيه HTML زياده .. او انهى اعرف بالطريقه دى اى كلاس ال Button فيهم Button, Colored علشان مكتبش الخصائص تانى . او الحل الاخير انى اكتب الخصائص من تانى!

فى SASS انا بنادى على الكلاس , جوه الكلاس التانى ! و بيكتبلى هو ال CSS !! لا موش بس كده , SASS موش بيعيد كتابه اسطر الخصائص فى كل مره انا بنادى فيها او بورث فيها Class للتانى ! لا .. هو بيجمعلى كل المناطق اللى انا عملت فيها توريث للكلاس دا , و بيكتبلى الكود بطريقه جميله جدا متجمع ودى موش موجوده فى LESS و دى من اكتر الحجات اللى خليتنى اتحول من LESS ل SASS لانها بتفرق كتير فى جوده الكود. خلينا نشوف مثال :

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

هيكون الريندر الخاص بيه بالشكل دا ..

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

لسه مخلصناش .. علما بإنى بشرح بس اللى موجود فى الدكيومنتس الخاصه ب SASS , واللى فوق بس , لو حبيت تشتغل بيهم و تطلع منهم افكار كلهم مجتمعين , هتختصر على نفسك حجات كتير جدا !

٧.Operators او العمليات :

من المميزات الجميله جدا فى SASS برده , انه بيعمل عمليات كتير جدا حسابيه ليك , فى المقابل فى ال CSS فى CALC بس هنا العمليات الحسابيه بتكون من غير اى حاجه خالص. كأنك بتكتب كود عادى جدا .. دا مثال :

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

دا هيكون الريندر الخاص بيه كالتالى :

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

لحد كده , احنا شرحنا كل النقط الموجود فى الدوكيومنتس الخاصه ب SASS كلها. بس دى موش نهايه العالم ! انا شرحت بس ال BASIC وان شاء الله فى بلوجز جايه نكمل شرح لاكتر من نقطه كويسه تانيه ..

بمعرفتك للنقط لحد هنا . انت مؤهل جدا انك تشتغل SASS من النهارده ! متستناش ! اشتغل النهارده و هتاخد خبره و افكارك هتزيد فى استخدام كل خاصيه فيها , دور على فريمات , و شوف الناس بتكتب الكود ازاى , و اتعلم ! اكتر واكتر و متشبعش !

اتمنى تكونوا استفدوا 🙂

دمتم سالمين.

More Readings,

Reporting and analyzing user queries submitted as search criteria on a site Analyzing words and phrases entered into a search provides insight into what people are looking for in order to evaluate how well content meets those needs. Site Se...

Anthropomorphic forms are appealing when they are dissimilar or identical to humans, but unappealing when they are very similar to humans. Anthropomorphic forms are generally appealing to humans. However, when a form is very close but not identical ...

A framework aligning task behaviors, beliefs, and emotions with product and service features. Can help you articulate root causes behind behaviors and develop solutions that deeply resonate with people. Diverse groups identified for study a...

This is used to document observable human activities and personal characteristics, interactions, time spent at fixed locations or in transit, and details of environmental context. A sketch map or architectural floor plan is used as the underla...

The placement of elements such that edges line up along common rows or columns, or their bodies along a common center. Alignment The whole point of the alignment principle is that nothing in your slide design should look as if it were pla...

The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs. The effect has been observed in several experiments and has significant implication...