SASS + MediaQueryies

@wolfalone · Регистрация: 05.08.2012

Студворк — интернет-сервис помощи студентам

Доброго времени суток уважаемые!

В работе использую SASS, и... хотелось бы уточнить вот что: можно ли в добавить в SASS возможность переопределения переменных в зависимости от разрешения экрана?

То есть, если сейчас я пишу, в SASS-коде:

HTML5
1
2
3
@media (max-width: 1000px) {   
    $color1: red;
}

Такой код либо не срабатывает, либо работает не корректно. А было бы очень удобно, если бы SASS сам соотв. образом менял выходной файл, добавляя соотв. медиа-запросы в конечный код.

То есть, я хочу, переопределять переменные в зависимости от разрешения экрана.

Подскажите пожалуйста, возможно ли такое и если да - то, как это сделать. Спасибо!

@vovandr · 13.09.2015, 20:03

CSS
1
2
3
@media screen and (max-width: 1000px){
  $color1: red;
}

@wolfalone · 14.09.2015, 02:47 **[ТС]**

vovandr, к сожалению, "так" не работает, он не переопределяет переменные в зависимости от условий. То есть, я бы сказал, что SASS (и LESS, как мне кажется), скорее не "компилирует" свой код, в CSS, а больше интерпретирует отдельные части (строчки) своего кода в отдельные аналогичные строчки в CSS-код, причем в ряде случаев, он вообще пропускает некоторые "не ясные" ему места.

В виду чего, я думаю, вопрос можно дополнить... Возможно, существует? какой-то CSS-препроцессор, который бы умел именно "компилировать" весь "свой" код, с учётом каких-то логических конструкций, например, с учётом Media-Query. То есть, я хочу писать в препроцессора, что-то типа "Если ширина экрана <= 800px, то переменная $content-width=760px, во всех иных случаях, она имеет дефолтное значение, то есть, $content-width=900px" (это конечно очень условно, но отражает суть).

Добавлено через 50 секунд
P.S. LESS даже не рассматриваю, т.к. он, на мой взгляд, вообще слабоват в роли CSS-препроцессора...

Добавлено через 8 минут
Возможно кто-то работал со Stylus'ом? Подскажите пожалуйста, в нем есть что-то подобное, что бы позволило изменять значения определённых переменных, в зависимости от условий (например, добавить конструкцию, которая бы позволила в зависимости от разрешения экрана [MediaQueryes] изменять значения выбранных переменных, и что бы всё это именно компилировалось в CSS-файл, на основании общей логики кода, а не логики отдельных строк)?

Добавлено через 1 час 27 минут
Попробую показать ещё более наглядно. SASS предлагает вот такой подход для MediaQuery (взято отсуда):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$small: 320px;
$large: 1024px;
 
@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $small + 1) and (max-width: $large - 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $large) { @content; }
  }
}
 
.block {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}​

Если обратить внимание на последние 4 строчки (кроме самой последней, в которой только скобка), то мы заметим, что в коре переопределяются некоторые параметры, например ширина элемента. Это всё конечно хорошо... Но! Но, я не могу вместо "width: 100%", написать, например: "$width: 100%". Точнее написать то я могу, только это не приведёт вообще ни к чему (по крайней мере хорошему). То есть, формально у нас есть кусок кода, в котором я могу использовать переменные, но не могу их переопределять таким образом, что бы при этом, они как-то затрагивали другие логические части кода. Мне вообще кажется, что код выше - не многим проще или удобнее для понимания, чем "чистый CSS", с учётом того, что обязанность знания/понимания "чистого CSS" при этом никто не отменял.

Отсуда собственно и возникает тот самый, дополнительный вопрос: существует ли CSS-препроцессоры, способные понимать не только примитивные if/else на уровне "прямо здесь", а ещё и поддерживающие какую-то логику самого CSS'a? Или, может есть какие-то "дополнения", плагины, библиотеки, etc для SASS или вообще какие-то другие альтернативы или полезные инструменты?

@vakummm · 26.09.2015, 19:14

Переопределять переменные в LESS и SASS нельзя, это скорее константы, чем переменные. Как вариант можно попробовать такое переопределение в SCSS, но можно использовать не больше одного раза

CSS
1
2
$color: white !default; 
$color: red;

В этом случае мы устанавливаем цвет по умолчанию white и потом переопределяем его значением red.

@wolfalone · 27.09.2015, 12:21 **[ТС]**

vakummm, спасибо за идею, я грешным делом иногда такое использую в CSS (в основном, когда лень делать "как надо" или "нужно по быстрому подправить")... Но, это не совсем то. Уже подумываю написать свой мета-язык, более абстрагированый, нежели имеющиеся, компилируемый в CSS...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@wolfalone В экстазе 168 / 152 / 38 Регистрация: 05.08.2012 Сообщений: 767 Записей в блоге: 3
	27.09.2015, 12:21 [ТС]
	vakummm, спасибо за идею, я грешным делом иногда такое использую в CSS (в основном, когда лень делать "как надо" или "нужно по быстрому подправить")... Но, это не совсем то. Уже подумываю написать свой мета-язык, более абстрагированый, нежели имеющиеся, компилируемый в CSS... 0

SASS + MediaQueryies

Решение