استيراد Sass و الجزئيات

Sass يمكن أن يحافظ على كود CSS جافًا (DRY،Don't Repeat Yourself، لا تكرر نفسك).

من الطرق ل كتابة الكود DRY هو حفظ الكود المرتبط في ملفات منفردة.

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

استيراد ملفات Sass

مثل CSS، Sass يدعم أيضًا @import التعليمات.

@import التعليمات تسمح لك بإدراج محتويات ملف في ملف آخر.

بسبب مشاكل الأداء، CSS @import لدي التعليمات عيب رئيسي؛ سيتم إنشاء طلب HTTP إضافي كل مرة يتم استدعاؤها. ولكن، Sass @import التعليمات تشمل الملف في CSS؛ لذا لا تحتاج إلى استدعاء HTTP إضافي عند تشغيل الوقت!

جملة استيراد Sass:

@import filename;

نصيحة:لا تحتاج إلى تحديد امتداد الملف، Sass سيفترض تلقائيًا أنك تشير إلى ملف .sass أو .scss. يمكنك أيضًا استيراد ملفات CSS.@import استيراد التعليمات، ثم يمكنك استخدام أي متغير أو mixin تم تعريفه في ملف الاستيراد في الملف الرئيسي.

يمكنك استيراد أي عدد من الملفات في الملف الرئيسي:

مثال

@import "variables";
@import "colors";
@import "reset";

دعونا نرى مثالاً: لنفترض أن لدينا ملف "reset.scss" للإعادة الإعدادات، وسيبدو كالتالي:

جملة SCSS (reset.scss):

html,
body,
ul,
ol {
  ال边际: 0;
  التمدد: 0;
}

الآن نريد استيراد ملف "reset.scss" إلى ملف آخر يُدعى "standard.scss".

نحن نفعل ذلك: عادة ما نضيفه في الجزء العلوي من الملف @import التعليمات؛ حيث سيكون محتواها لهذا النطاق الكامل:

جملة SCSS (standard.scss):

@import "reset";
الجسم {
  عائلة الخط: Helvetica, sans-serif;
  حجم الخط: 18 بكسل;
  اللون: الأحمر;
}

لذلك، عند ترجمة ملف "standard.css"، سيكون CSS كالتالي:

إخراج CSS:

html, body, ul, ol {
  ال边际: 0;
  التمدد: 0;
}
الجسم {
  عائلة الخط: Helvetica, sans-serif;
  حجم الخط: 18 بكسل;
  اللون: الأحمر;
}

Sass Partials (ملفات جزئية)

بالتأكيد،Sass يترجم مباشرة جميع ملفات .scss. ولكن، عند استيراد ملفات، لا تحتاج إلى ترجمة الملفات مباشرة.

يملك Sass ميكانيكية: إذا بدأت باسم الملف بالشرطة، فإن Sass لن يترجمه. يتم تسمية الملفات التي يتم تسميتها بهذه الطريقة في Sass بـ partials.

لذلك، يتم تسمية ملفات الجزئية Sass ببادئة شرطة:

جملة Sass الجزئية:

_اسم الملف;

السطر التالي يوضح ملف الجزئية Sass المسمى "_colors.scss". (هذا الملف لن يتم تحويله مباشرة إلى "colors.css"):

مثال

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

الآن، إذا قمت بتحميل ملف الجزئية هذا، فلا تحتاج إلى تضمين الخط الأوسط. يفترض Sass أن يتم استيراد ملف "_colors.scss":

مثال

@import "colors";
الجسم {
  عائلة الخط: Helvetica, sans-serif;
  حجم الخط: 18 بكسل;
  اللون: $myBlue;
}