Какое решения для использования медиазапросов с Sass вы считаете самым эффективным?

Question

[lilandre]

Добрый день. Учусь версткe с помощью Gulp и с использованием Sass . Разработал сайт для разрешения 1280. Теперь настало время адаптировать сайт под другие дисплеи. Какое решение или библиотеку вы считаете наиболее эффективной для работы с медиазапросами в Sass ?

Comments

[alvvi]

Какую конкретно проблему вы пытаетесь решить?
Чем обычные CSS медиазапросы вас не устраивают?

[lilandre]

Увеличение/уменьшение размера шрифта. Изменение размера блоков. Можно же верстать на чистом ксс, а можно и в сасс. Я решил верстать в сасс, и хотелось бы работать там же и с медиазапросами.

[alvvi]

lilandre, а в чем отличие медиазапросов SASS от медиазапросов CSS, кроме более удобного синтаксиса?)

Увеличение/уменьшение размера шрифта. Изменение размера блоков.

Ну тык да, медиазапросами это все возможно сделать, но в чем суть вопроса то?

[Евгений Вольф]

lilandre, SASS - это "синтаксический сахар" поверх CSS'а, каких-то глобальных отличий для работы с медиа-запросами там - я не припоминаю. Либо я не до конца понимаю Ваш вопрос.

[lilandre]

Евгений Вольф, просто мне хотелось бы дальше верстать без использование ; и с использованием вложенности , переменных а так-же мексинов в медиазапросах. По этому и хотелось бы работать с медиазапросами в сасс .

[lilandre]

Илья Ростопка, Хочу использовать плюшки сасс в медиазапросах и по этому хотелос бы писать медиазапросы в сасс.

[alvvi]

lilandre, используйте, никто не запрещает. Суть вопроса все равно не ясна.

[lilandre]

Илья Ростопка, Как мне запихнуть в сасс файл конструкцию @media (max-width: 320px){(сасс код)} так, чтобы она работала?

[alvvi]

lilandre, как насчет посетить официальный сайт с документаций и примерами?
sass-lang.com/documentation/file.SASS_REFERENCE.ht... вот для scss
для синтаксиса с пробелами вместо скобок, нужно, просто заменить скобки пробелами

@media (max-width: 320px) 
  .hello 
    rule: value

// а лучше

.hello
  @media (max-width: 320px)
    rule: value

[lilandre]

Илья Ростопка, Гугл меня не приводил на эту страницу. Спасибо, все работает. Давайте я ваш ответ отмечу решением.

[Евгений Вольф]

lilandre, ничего особо нового в этом плане, в SASS/SCSS по моему, не придумали. В качестве примеров, можно посмотреть вариации например тут или тут.

Answer 1

[alvvi]

sass-lang.com/documentation/file.SASS_REFERENCE.ht... вот для scss
для синтаксиса с пробелами вместо скобок, нужно, просто заменить скобки пробелами

@media (max-width: 320px) 
  .hello 
    rule: value

// а лучше

.hello
  @media (max-width: 320px)
    rule: value

Answer 2

[andead]

Пользуюсь include-media:

$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);

@include media(">phone", "<=tablet") {
  width: 50%;
}

Answer 3

[myaca]

Внутри нужного класса дописать:

@media(max-width: $someWidth){
/* styles */
}

Обычно так делается... Зачем какие-либо библиотеки еще

Comments

[lilandre]

У меня почему-то не работает

$text: blue 
$background: #333333
$fuck_font: yellow
$someWidth: 320px

.tesstSass
  color: $text
  background: $background

.goOut
  color: $fuck_font
  float: left
  background: linear-gradient(to top, #fefcea, #f1da36)
  
.goOut
  color: $fuck_font
  @media(max-width: $someWidth){
   color: red
	}