📋 محتويات الصفحة
📖 الوصف
Sass (Syntactically Awesome Style Sheets) هو معالج مسبق لـ CSS يُضيف ميزات لا توجد في CSS العادي. مثل المتغيرات (variables)، الـ nesting، الـ mixins، الـ functions، والـ inheritance. يُجمع إلى CSS عادي قبل التنزيل. Sass لديه صيغتان: SCSS (الأحدث، تشبه CSS) وSass (indented). يوفر تحسين كبير في تنظيم...
🎯 يستخدم في
مجالات استخدام هذه الأداة
CSS معقد يحتاج تنظيم
Design systems وthemeable CSS
مشاريع كبيرة مع reusable styles
Projects تستخدم CSS variables وmixins
أي CSS احترافي حديث (مدمج في معظم frameworks)
✨ المميزات
أبرز مميزات هذه الأداة
Variables للمتغيرات ($primary-color)
Nesting لتداخل selectors
Mixins لإعادة استخدام الأكواد
@extend للوراثة
Functions للحسابات
Partials و@import تنظيم files
Control directives (@if
@for
@each)
Color functions
متوافق مع جميع frameworks
⚠️ العيوب
نقاط يجب مراعاتها
يحتاج build step (compilation)
ملفات.scss قد تصبح معقدة
بعض الميزات أصبحت في CSS الحديث (variables
nesting)
وقت compilation في المشاريع الكبيرة
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// Variables
$primary-color: #3498db;
$spacing-md: 16px;
$breakpoint-md: 768px;
// Nesting
.navbar {
background: $primary-color;
.nav-item {
padding: $spacing-md;
&:hover {
background: darken($primary-color, 10%);
}
&.active {
font-weight: bold;
}
}
}
// Mixin
@mixin responsive($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
.container {
width: 100%;
padding: 15px;
@include responsive($breakpoint-md) {
padding: 30px;
max-width: 1200px;
margin: 0 auto;
}
}
// Function
@function spacing($multiplier) {
@return $multiplier * 8px;
}
.card {
padding: spacing(2); // 16px
margin-bottom: spacing(3); // 24px
}
// Loops
@for $i from 1 through 6 {
h#{$i} {
font-size: 32px - ($i * 2);
}
}📚 أدوات أخرى في Styling
قد يعجبك أيضاً
Bootstrap
⭐إطار عمل CSS جاهز (CSS Component Framework)
CSS Modules
⭐نهج scoped CSS (Scoped CSS Methodology)
CSS-in-JS
⭐نهج CSS في JavaScript (CSS-in-JS Concept)
Emotion
⭐مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)
Less
معالج CSS (CSS Preprocessor)
Linaria
مكتبة CSS-in-JS بدون runtime (Zero-Runtime CSS-in-JS)