Search the Community

Решил освоить SASS, очень мне нравится его идея, большое коммьюнити, все нравится, но столкнулся с проблемой, собственно ниже и опишу. Хочу сделать миксин медиазапросов есть 4 переменные, в них описаны размеры экрана, и создан несложный миксин. $screen_xs: 320px;$screen_s: 768px;$screen_m: 1024px;$screen_l: 1200px;$screen_xl: 1376px;@mixin mediaquery($media) { @if $media == screen_s { @media only screen and (max-width: $screen_s + 1) { @content; } } @else if $media == screen_m { @media only screen and (min-width: $screen_m + 1){ @content; } } @else if $media == screen_l { @media only screen and (min-width: $screen_l + 1) { @content; } } @else if $media == screen_xl { @media only screen and (min-width: $screen_xl + 1) { @content; } }}дальше я этот миксин подключаю, например, к боди, пример абстрактный. body{ background: $blue_grey; @include mediaquery(screen_s) { background: $lime;} @include mediaquery(screen_m) { background: $teal;} @include mediaquery(screen_l) { background: $orange;} @include mediaquery(screen_xl) { background: $pink;} color: $color_base; font-family: $font_base; @include flexbox; @include flex-direction(column); min-height: 100vh;}суть такая, что фон меняется в зависимости от разрешения. НА выходе мы имеем // outputbody { background: #607D8B; color: #cccccc; font-family: "Proxima Nova", Tahoma, helvetica, sans-serif; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: vertical; -moz-flex-direction: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; min-height: 100vh;}@media only screen and (max-width: 769px) { body {background: #CDDC39;}}@media only screen and (min-width: 1025px) { body {background: #009688;}}@media only screen and (min-width: 1201px) { body {background: #FF9800;}}@media only screen and (min-width: 1377px) { body {background: #E91E63;}}Казалось бы этого я и ждал, так и есть, результат достигнут, но теперь у меня есть другой элемент, который я хочу видоизменять в зависимости от экрана, и пишу следующее .size:after{ content: "Size XS"; @include mediaquery(screen_s) { content: "Size S";} @include mediaquery(screen_m) { content: "Size M";} @include mediaquery(screen_l) { content: "Size L";} @include mediaquery(screen_xl) { content: "Size XL";}}Код несложный, есть блок, я в псевдоэлементе :after меняю слова в зависимости от разрешения. Собственно тут я и сталкиваюсь с проблемой избыточности, у меня дублируется код. На выходе я получаю ОТДЕЛЬНЫЕ медиазапросы // output.size:after {content: "Size XS";}@media only screen and (max-width: 769px) { .size:after {content: "Size S";}}@media only screen and (min-width: 1025px) { .size:after {content: "Size M";}}@media only screen and (min-width: 1201px) { .size:after {content: "Size L";}}@media only screen and (min-width: 1377px) { .size:after {content: "Size XL";}}так как же мне избавиться от этой избыточности? делать как и раньше в отдельном месте прописывать разрешение и в него вставлять все элементы, стили которых необходимо менять? но тогда пропадает прелесть использования SASS

Всем привет! Подскажите, можно ли в Jade как-нибудь подключить файл с параметрами? Проблема состоит в следующем: у меня есть шаблон(layout.jade) и в нем я подключаю head из отдельного файла (_head.jade). Поскольку страниц много, нужно, чтобы для каждой страницы title был свой. Как сделать так, чтобы на определенной странице я подключал(наследовал - extends) layout.jade например с параметром #("Страница 1"), шаблон в свою очередь подключал head с этим параметром, а head вставлял туда, куда ему нужно? Или это делается только с помощью примесей? Заранее спасибо!