css - w3schools - sass شرح




ما الفرق بين SCSS و Sass؟ (6)

مما كنت أقرأه ، ساس هي اللغة التي تجعل CSS أكثر قوة مع الدعم المتغير والرياضي.

ما هو الفرق مع SCSS؟ هل من المفترض أن تكون نفس اللغة؟ مماثل؟ مختلف؟


Sass هو معالج CSS المسبق مع تطويرات التركيب اللغوي. تتم معالجة أوراق الأنماط في بناء الجملة المتقدم بواسطة البرنامج ، ويتم تحويلها إلى أوراق أنماط CSS عادية. ومع ذلك ، فإنها لا تعمل على توسيع معيار CSS نفسه.

السبب الرئيسي لهذا هو إضافة الميزات التي تفتقر إليها CSS بشكل مؤلم (مثل المتغيرات).

الفرق بين SCSS و Sass ، يجب أن يجيب هذا النص على صفحة وثائق Sass على السؤال:

هناك نوعان من البنى المتاحة لساس. الأولى ، والمعروفة باسم SCSS (Sassy CSS) والمستخدمة في هذا المرجع ، هي امتداد لبنية CSS. وهذا يعني أن كل ورقة أنماط صالحة لـ CSS هي ملف SCSS صالح بنفس المعنى. يتم تحسين بناء الجملة هذا باستخدام ميزات Sass الموضحة أدناه. تحتوي الملفات التي تستخدم بناء الجملة هذا على ملحق .scss .

يوفر بناء الجملة الثاني والأقدم ، والمعروف باسم بناء الجملة ذي المسافة البادئة (أو أحيانًا "Sass") ، طريقة أكثر اختصارًا لكتابة CSS. ويستخدم المسافة البادئة بدلاً من الأقواس للإشارة إلى تداخل المحددات ، والخطوط الجديدة بدلاً من الفواصل المنقوطة لفصل الخصائص. تحتوي الملفات التي تستخدم بناء الجملة هذا على الامتداد .sass .

ومع ذلك ، كل هذا يعمل فقط مع مترجم ساس الذي يقوم في النهاية بإنشاء CSS. إنها ليست امتدادا لمعايير CSS نفسها.


أنا أحد المطورين الذين ساعدوا في إنشاء شركة Sass.

الفرق هو واجهة المستخدم. تحت الجزء الخارجي النصي فهي متطابقة. هذا هو السبب في استيراد ملفات sss و scss لبعضها البعض. في الواقع ، لدى Sass أربعة محللات لغوية: scss و sass و CSS وأقل من ذلك. كل ذلك يحول بنية مختلفة إلى شجرة تجريدية مجردة يتم معالجتها في مخرجات CSS أو حتى على أحد الصيغ الأخرى عبر أداة تحويل sass.

استخدم الصيغة التي تفضلها ، وكلها مدعومة بالكامل ويمكنك تغييرها فيما بعد إذا غيرت رأيك.


بناء الجملة مختلف ، وهذا هو الموالية الرئيسي (أو يخدع ، اعتمادا على وجهة نظرك).

سأحاول ألا أكرر الكثير مما قاله الآخرون ، يمكنك بسهولة google ذلك ، ولكن بدلاً من ذلك ، أود أن أقول شيئين من تجربتي باستخدامهما ، وأحيانًا في نفس المشروع.

SASS pro

  • نظافة - إذا كنت قادمًا من Python ، أو Ruby (يمكنك حتى كتابة الدعائم ذات تركيب يشبه الرمز) أو حتى عالم CoffeeScript ، فسيكون من الطبيعي جدًا بالنسبة لك - كتابة المزيج ، والوظائف ، والأشياء الأبدية التي يمكن إعادة استخدامها في .sass أسهل وقراءة من. .scss (ذاتي).

SASS سلبيات

  • مساحة بيضاء حساسة (ذاتية) ، لا مانع في ذلك بلغات أخرى ولكن هنا في CSS يزعجني فقط (قضايا: النسخ ، تبويب مقابل حرب الفضاء ، الخ).
  • لا توجد قواعد مضمنة (كانت هذه اللعبة تحطيم بالنسبة لي) ، لا يمكنك فعل body color: red مثل ما يمكنك فعله في .scss body {color: red}
  • استيراد أشياء بائع أخرى ، نسخ القصاصات الفانيلا css - ليس مستحيلا ولكن مملة جدا بعد بعض الوقت. الحل هو إما أن يكون لديك ملفات .scss (بجانب ملفات .sass ) في مشروعك أو لتحويلها إلى .sass .

بخلاف هذا - يفعلون نفس المهمة.

الآن ، ما أحب القيام به هو كتابة .sass والمتغيرات في .sass والرمز الذي .sass بالفعل إلى css في .scss إن أمكن (أي أن Visual Studio لا يوجد دعم لـ. .sass لكن عندما أعمل على مشاريع Rails أقوم عادة الجمع بين اثنين منهم ، وليس في ملف واحد ofc).

في الآونة الأخيرة أنا أفكر في إعطاء Stylus فرصة (لبرمجية css بدوام كامل) لأنه يسمح لك بدمج تركيبتين في ملف واحد (من بين بعض الميزات الأخرى). قد لا يكون هذا هو الاتجاه الجيد الذي يجب أن يتخذه الفريق ولكن عندما تحافظ عليه بمفرده - لا بأس. يكون القلم في الواقع أكثر مرونة عندما يكون السؤال قيد البحث.

و .scss mixin .scss مقابل .sass بناء الجملة:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

كان ساس أول واحد ، وبناء الجملة هو مختلف قليلا. على سبيل المثال ، بما في ذلك mixin:

Sass: +mixinname()
Scss: @include mixinname()

يتجاهل Sass الأقواس المتعرجة والنصف الطولي ويرقد على التعشيش ، التي وجدتها أكثر فائدة.


.sass ملف Sass .sass بصريًا عن ملف .scss ، على سبيل المثال

example.sass

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

example.scss

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

يمكن تحويل أي مستند CSS صالح إلى Sassy CSS (SCSS) ببساطة عن طريق تغيير الامتداد من .css إلى .scss .


sass الأصلي هو روبي يشبه بناء الجملة ، على غرار روبي ، اليشم الخ ...

في هذه البُنى ، لا نستخدم {} ، بل نذهب مع المساحات البيضاء ، وأيضًا لا نستخدمها ; ...

في جمل scss تشبه CSS ، ولكن مع الحصول على مزيد من الخيارات مثل: التعشيش ، التصريح ، إلخ ، تشبه less و CSS للمعالجة المسبقة الأخرى ...

إنهم يفعلون نفس الشيء في الأساس ، ولكنني أضع أسطرًا من كل منها لمعرفة اختلاف البنية ، انظر إلى {} ، ; spaces :

ساس:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}






sass