Как правильно задать @import?

Question

[Александр Ситник]

В общем осваиваю SASS/SCSS и столкнулся с такой проблемой. Есть общий css файл. К нему импортим остальные. По идее переменные должны быть видны во всех файлах. НО! Нет. Я так понимаю, что это из-за того, что в файле main.scss(который и представлен в коде) импорты заданы с расширением .css. Но если вообще не задавать или задавать .scss - все просто отваливается.

//vars

$white: #f6f6f6;
$blue: #33c1e3;

//layout
@import url('_misc/normalize.css');
@import url('_misc/layout.css');

//styles
@import url('sections/header.css');

Answer 1

[dsmaslov]

В документации написано, как правильно делать @import:

sass-lang.com/documentation/file.SASS_REFERENCE.ht...

Если кратко, то вам нужно импортировать .sass файлы в main.sass, так как сейчас они импортируются как CSS-правило @import и поэтому всё отваливается.

Comments

[Александр Ситник]

Так вот, я и пытался сделать @import: url('_misc/normalize.scss')
но так тоже не работает. Вот и застрял.

[Александр Ситник]

Дошло. не нужно писать url('....'), нужно просто @import '....'

[dsmaslov]

Александр Ситник, да, в документации написано:

If the filename is a url() - будет восприниматься как CSS-правило.

[Александр Ситник]

Даниил Маслов, это помогло нормально подключить. Но переменную все еще не видит.

[dsmaslov]

Александр Ситник, лучше всего сделать так:

1. Создаешь папку, например utilities, там создаешь файл _variables.scss.
2. Закидываешь туда эти переменные.
3. Делаешь импорт в main.scss:

@import "utilities/variables";

Возможно, что переменных станет больше и такой подход будет более оправдан.