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

https://www.makalcloud.com/post/mf9w4uoax

وقد اشرت في نهاية المقاله الي حلول لتجنب استخدام هذه الخاصية ومن ضمن هذه الحلول اذا كنت من مستخدمي معالجات الـ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 سنجد ان الملف يتضمن ملف خارجي يريد استدعائه وهذا ما يؤثر علي اداء الموقع.