#javascript #css #sass
#javascript #css #sass
Вопрос:
Я знаю, что могу импортировать css-модули в свой основной файл CSS при условии, что он удовлетворяет требованиям медиа-запросов, введя условие в @import
правиле. Но в тот момент, когда я пытаюсь сделать то же самое, используя файл scss вместо css, он ничего не делает. Как я могу использовать медиа-запросы в Scss так же, как я делаю в CSS?
Вот как выглядит мой код в css:
styles.css
@import 'blue.css' (min-height: 300px);
@import 'red.css' (min-height: 400px);
blue.css
.square{
background:blue;
width: 200px;
height: 200px;
}
red.css
.square{
width: 200px;
height: 200px;
background:red;
}
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<link href="styles.css" rel="stylesheet">
<title></title>
</head>
<body>
<div class="square"></div>
</body>
</html>
Но как только я меняю формат с css на scss, он больше не работает.
Ответ №1:
TLDR: Нет способа выполнить импорт мультимедийных запросов в SCSS.
@import
Правило работает по-разному в SCSS и CSS.
Все CSS являются допустимыми SCSS … за исключением @import
инструкции.
В SCSS для инструкции import требуется только путь к файлу и имя файла. Если вы импортируете файлы с целью объединения их в один файл CSS, вам нужно назвать эти файлы, начинающиеся с подчеркивания.
Если у вас есть что-то вроде этой структуры, где файл точки останова называется «_breakpoint.scss»:
/root/scss/main.scss
/root/scss/modules/_breakpoint.scss
Затем вам нужно будет написать свой оператор импорта следующим образом:
@import "modules/breakpoint";
Ответ №2:
@import "small";
@media only screen and (min-width: 35em) {
@import "medium";
}
@media only screen and (min-width: 64em) {
@import "large";
}