Почему не работает @media?

Question

[VasECHKA]

Почему не работает media?
.list__nomination {
@include indents;
font-size: 16px;
color: #666666;

padding-top: 16px;
margin-bottom: 2px;
margin-left: 44px;

media (min-width: $tablet-width) {
color: green;
}

media (min-width: $desktop-width) {
color: red;
}
}

Comments

[Rustam Bainazarov]

Начать нужно с того, что вы понимаете, что это не CSS, а что это код для препроцессора? Если да, то вы должны понимать, что по этому куску понять, почему у вас что-то там не работает, — нельзя. Ибо мы не видим значений переменных.

Answer 1

[Ankhena]

У меня банальный вопрос, вы

<meta name="viewport" content="width=device-width">

прописали?

В песочнице ваш код работает https://jsfiddle.net/z4quLpb3/1/
Значит, если дело не в мета, то нужно показывать весь код или самостоятельно посмотреть что выходит в css и прогнать его через валидатор.

Answer 2

[html-css]

нужные размеры экранов вписуйте

@media screen and (max-width:768px)
{
}

переменные в css по другому прописываются
https://developer.mozilla.org/ru/docs/Web/CSS/Usin...

Comments

[Rustam Bainazarov]

Это SASS, так что всё нормально.

Если, конечно, человек вообще понимает, что он делает. И если у него вообще есть эти переменные. И если он не просто скопировал это всё и вставил в файл с CSS.

[html-css]

Рустам Байназаров, ну хз
предпроцессоры говенные

[Rustam Bainazarov]

html-css, если бы они были плохими, ими бы никто не пользовался. Очень помогают в разработке при нормальном к ним подходе.

[origami1024]

html-css, эй! Не гони на предпроцессоры, они реально помогают

[html-css]

Рустам Байназаров, так выход все ровно в чистый скомпилированный css

[html-css]

origami1024, помогают забывать как пишется чистый css

[Rustam Bainazarov]

html-css, только вот кучу вещей на препроцессоре написать в несколько раз быстрее. Ну и не говоря уже о переменных, куче функций с цветами, импортами, миксинами, функциями по типу преобразования SVG-кода в base64, автоматизации кастомизации сборок (как у Bootstrap, например) и т. д.

[VasECHKA]

Рустам Байназаров, да переменные $tablet-width: 660px;
$desktop-width: 960px; подтягиваются из файла, который подключен в style.scss через import

[html-css]

Рустам Байназаров, переменные и в css имеются
да и то, что сокращает вам писать на предпроцессоре не сравнится с практикумом в чистом css
тут дело опыта

[Rustam Bainazarov]

VasECHKA, ну а как я должен был узнать об этом? Какой CSS компилируется в итоге?

[Rustam Bainazarov]

html-css, эх… как вы не поймёте, что CSS-переменные — это другая вещь. Абсолютно другая. Это две взаимодополняющих технологии с разным функционалом.

А если человек не умеет писать CSS, то он его никогда нормально писать не будет. Что с препроцессором, что без него.

Более того, как вообще препроцессор влияет на знание CSS? Он не дополняет и не убавляет знания.

[html-css]

Рустам Байназаров, ну тогда пусть юкозит или тильдит себе сайт тогда)
нахрена заниматься этим, не вникая во все тонкости

[Rustam Bainazarov]

html-css, все с чего-то начинали, будем же и мы более снисходительны.

[html-css]

Рустам Байназаров, кто же против
не выложа весь код, гадать на картах что там к чему?

[Rustam Bainazarov]

…не выложа весь код, гадать на картах что там к чему?

html-css, ну, это же классика Toster'a :))

[html-css]

Рустам Байназаров, ну. да

[WapSter]

html-css, и как же препроцессоры помогают забывать код? У scss синтаксис один и тот же, что и у css, переменные css и scss легко комбинируются, вместо написания кучи повторяющегося кода миксины, единственная разница вложенность селекторов по другому пишется. Если у кого-то руки из одного места растут это не значит, что инструмент говеный. Все равно, что молоток обозвать при ударе по пальцам.