بنية SASS وبنية SCSS

توضح هذه المقالة بنية SASS وبنية SCSS۔

سنشرح بالتفصيل الفروقات بين بنية SASS وبنية SCSS، وسنقدم أمثلة واضحة لتعميق فهمك۔

YouTube Video

بنية SASS وبنية SCSS

ساس هي لغة أنماط تم تصميمها لتوسيع قدرات CSS۔ لدى SASS بنيتين نحويتين۔ وهما بنية SASS و بنية SCSS۔

نظرة عامة على SASS وSCSS

بنية SASS

يتم كتابة قواعد ساس النحوية كما يلي:۔

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• بنية تعتمد على المسافات البادئة ولا تستخدم الأقواس المعقوفة {} أو الفواصل المنقوطة ;۔
• مصممة لكتابة كود مختصر وسهل القراءة۔
• امتداد الملف هو .sass۔

بنية SCSS

يتم كتابة قواعد SCSS النحوية كما يلي:۔

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• بنية مشابهة لـ CSS، تستخدم الأقواس المعقوفة {} والفواصل المنقوطة ;۔
• متوافقة بشكل كبير مع التعليمات البرمجية لـ CSS الموجودة، مما يسمح بتحويل CSS مباشرة إلى ملف SCSS۔
• امتداد الملف هو .scss۔

الاختلافات الرئيسية بين SASS وSCSS

معايير الاختيار

اختيار أي منهما يعتمد على احتياجات المشروع والفريق۔

• متى تختار بنية SASS

  • تمكنك بنية SASS من كتابة كود مختصر ونظيف۔
  • إذا كان الفريق بأكمله معتادًا على بنية SASS، فهي خيار مناسب۔

• متى تختار بنية SCSS

  • إذا كان التوافق مع CSS أمرًا مهمًا وكان العديد من أعضاء الفريق معتادين على CSS، فإن بنية SCSS هي الأكثر ملاءمة۔

مميزات SASS وSCSS

فيما يلي المزايا المشتركة لكل من ساس وSCSS:۔

1. استخدام المتغيرات

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• من خلال استخدام المتغيرات، يمكنك تعريف نمط في مكان واحد وإعادة استخدامه في أماكن متعددة۔ يمكن تطبيق تغييرات التصميم بشكل كلي من خلال تغيير قيم المتغيرات فقط، مما يحسن قابلية الصيانة۔

2. المزج (Mixins)

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• الميكسينز تتيح لك تجميع الأنماط أو التعليمات البرمجية المسبوقة من الشركات، والتي تُستخدم بشكل متكرر في أماكن متعددة، وتطبيقها بشكل مرن باستخدام المعاملات۔ هذا يقلل من تكرار الشيفرة ويحسن قابليتها للصيانة۔

3. القواعد المتداخلة

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• من خلال استخدام التداخل، يمكنك كتابة الأنماط بشكل هرمي تماشياً مع بنية HTML، مما يسهل تجميع القواعد المتعلقة ببعضها البعض۔ هذا يحسن من سهولة قراءة الشيفرة وصيانتها في نفس الوقت۔

4. الوراثة

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• من خلال استخدام الوراثة، يمكنك تجميع وإعادة استخدام الأنماط الشائعة۔ هذا يقلل من تكرار الشيفرة ويحافظ على تصميم متناسق۔

الخاتمة

اختيار بين SASS وSCSS يعتمد على تفضيلات المطور ومتطلبات المشروع۔

تركز بنية SASS على البساطة، بينما تركز بنية SCSS على التوافق مع CSS۔ كلتا البنيتين قويتان ويمكنهما تحسين إنتاجية CSS بشكل كبير۔

اختيار الخيار الأنسب لمشروعك يسمح بإدارة فعالة لأوراق الأنماط۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video