تسمح لنا CSS باضافه ملفات أخري واستدعائها من خلال ملف النمط عن طريق خاصية import@ وكنت قد تحدث في مقالة سابقه عن سوء استخدام خاصية import@ من خلال الـCSS بسبب ما تشكله من مشاكل في اداء وسرعه الموقع يمكنك قرائتها من هنا:

وقد اشرت في نهاية المقاله الي حلول لتجنب استخدام هذه الخاصية ومن ضمن هذه الحلول اذا كنت من مستخدمي معالجات الـCSS مثل (Sass, Less) سيمكنك استدعاء تلك الملفات بخاصية import@ ايضا.

ما الفرق اذا بين import@ في CSS و Sass ؟

بعيدا عن الاختلاف في اداء سرعه الموقع الذي اشرت اليه سابقا سنذكر عده فروق بين الخاصيه في CSS و Sass.

1- في CSS يجب عليك استدعاء import@ في مقدمة الملف هناك شئ واحد فقط يمكنه ان يكون فوقها وهو charset@ ولكن علي العكس تماما يمكنك استخدام import@ في Sass في اى مكان في ملف النمط الخاص بك.

body { /*bla bla bla*/}

 استخدام خاطئ للخاصيه يجب ان تكون هي في بدايه الملف.
@import 'style.css'

استخدام صحيح حيث يمكنك استدعاء الملف في اى مكان بـsass
@import 'style.scss'

2- باستدعائك الملف عن طريق sass يتم تضمين الاكواد من الملف التي تم استدعائه في الملف الرئيسي وهذا علي عكس استدعاء الملف عن طريق css مثال لتوضيح ذلك:

لنفترض الان ان الملف الرئيسي يسمي main.scss وتم استدعاء ملف اخر يسمي reset بداخله:

  //main.scss

 // استدعاء ملف reset.scss
  @import 'reset'

  body {
  box-sizing: border-box;    
}

ويحتوي ملف reset.scss علي:

 //_reset.scss
 * {
  margin: 0;
  padding: 0;
  box-sizing: inherit
}

بعد تحويل الملف الي main.css سنجد ان الملف يحتوي علي جميع الأكواد في الملف ولن يقوم باستدعاء اى ملف خارجي:

//main.css
 * {
  margin: 0;
  padding: 0;
  box-sizing: inherit
}     
 body {
  box-sizing: border-box;    
}

ولكن علي العكس تماما لو فعلنا هذا عن طريق استخدام CSS سنجد ان الملف يتضمن ملف خارجي يريد استدعائه وهذا ما يؤثر علي اداء الموقع.