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

Question

lilandre @lilandre

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

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

Вопрос задан более трёх лет назад
301 просмотр

11 комментариев

Подписаться 2 Простой 11 комментариев

alvvi @alvvi

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

Написано более трёх лет назад
lilandre @lilandre Автор вопроса

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

Написано более трёх лет назад
alvvi @alvvi

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

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

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

Написано более трёх лет назад
Евгений Вольф @Wolfnsex Куратор тега CSS

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

Написано более трёх лет назад
lilandre @lilandre Автор вопроса

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

Написано более трёх лет назад
lilandre @lilandre Автор вопроса

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

Написано более трёх лет назад
alvvi @alvvi

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

Написано более трёх лет назад
lilandre @lilandre Автор вопроса

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

Написано более трёх лет назад
alvvi @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 Автор вопроса

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

Написано более трёх лет назад
Евгений Вольф @Wolfnsex Куратор тега CSS

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

Написано более трёх лет назад

Решения вопроса 2

Комментировать

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

lilandre @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
	}

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как сделать так, чтобы при нажатии по div работал onclick?
- 1 подписчик
- 11 минут назад
- 7 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 16 часов назад
- 38 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 16 часов назад
- 48 просмотров
2

ответа
Веб-разработка

+1 ещё

Простой
Как работает спам сообщений в ютубе?
- 1 подписчик
- 20 часов назад
- 95 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 37 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 79 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- вчера
- 83 просмотра
3

ответа
Веб-разработка

Простой
Как сделать чтобы при нажатии на кнопку или сылку в div блоке открывалась галерея?
- 1 подписчик
- вчера
- 36 просмотров
0

ответов
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- вчера
- 700 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать HLTV HUD для стрима CS 1.6

25 апр. 2024, в 08:02

2500 руб./за проект

Вычислить размер объекта по карте глубин

25 апр. 2024, в 07:37

5000 руб./за проект

Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL

25 апр. 2024, в 05:57

3000 руб./за проект

Какую конкретно проблему вы пытаетесь решить?
Чем обычные CSS медиазапросы вас не устраивают?
Увеличение/уменьшение размера шрифта. Изменение размера блоков. Можно же верстать на чистом ксс, а можно и в сасс. Я решил верстать в сасс, и хотелось бы работать там же и с медиазапросами.
lilandre, а в чем отличие медиазапросов SASS от медиазапросов CSS, кроме более удобного синтаксиса?)

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

Ну тык да, медиазапросами это все возможно сделать, но в чем суть вопроса то?
lilandre, SASS - это "синтаксический сахар" поверх CSS'а, каких-то глобальных отличий для работы с медиа-запросами там - я не припоминаю. Либо я не до конца понимаю Ваш вопрос.
Евгений Вольф, просто мне хотелось бы дальше верстать без использование ; и с использованием вложенности , переменных а так-же мексинов в медиазапросах. По этому и хотелось бы работать с медиазапросами в сасс .
Илья Ростопка, Хочу использовать плюшки сасс в медиазапросах и по этому хотелос бы писать медиазапросы в сасс.
lilandre, используйте, никто не запрещает. Суть вопроса все равно не ясна.
Илья Ростопка, Как мне запихнуть в сасс файл конструкцию @media (max-width: 320px){(сасс код)} так, чтобы она работала?
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, ничего особо нового в этом плане, в SASS/SCSS по моему, не придумали. В качестве примеров, можно посмотреть вариации например тут или тут.

Answer 1 · 2017-10-04 16:56:18

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 · 2017-10-04 18:48:46

andead @andead

друпал девелопер, фрилансер

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

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

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

Ответ написан более трёх лет назад

Комментировать

Answer 3 · 2017-10-04 15:57:00

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

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

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт