Как импортировать медиа-запросы с помощью Scss?

#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";
}