В чем разница между css @import и SASS/SCSS @import?

Question

оригинал css имеет ключевое слово @import, которое может включать в себя внешний файл css.

Итак, в чем разница между этим @import от SASS/SCSS @import?

Answer 1

@import в CSS: CSS имеет возможность импорта, которая позволяет разделить ваш CSS на более мелкие, более ремонтопригодные части.

Принимая во внимание,

@import в SASS/SCSS: Сасс строит поверх текущего CSS @import, но вместо того, чтобы требовать запроса HTTP, Sass будет принимать файл, который вы хотите импортировать и объединить его с файлом, который вы импортируете, чтобы вы могли обслуживать один CSS-файл в веб-браузере.

Например:

В _reset.scss

// _reset.scss 

html, 
body, 
ul, 
ol { 
    margin: 0; 
    padding: 0; 
} 

В base.scss

// base.scss 

@import 'reset'; 

body { 
    font: 100% Helvetica, sans-serif; 
    background-color: #efefef; 
} 

Список литературы: SASS Guide

Answer 2

Я рекомендую использовать импорт Sass везде, где это возможно.

Предположим, что мы имеем следующую код, написанный на родном CSS:

@import "style1.css"; 
@import "style2.css"; 
@import "style3.css"; 

В результате, вы получаете один файл, который загружает другие файлы. Эти запросы отправляются отдельно на ваш сервер, и вы получаете в ответ 3 файла. Посмотрите на консоль разработчика, чтобы заметить эту проблему.

В файлах Sass файлы объединены в один файл (используя рабочий процесс frontend, который вы используете), и это всего лишь один запрос на ваш сервер.

Answer 3

css @import происходит во время выполнения, Sass @import во время сборки.