Комментарии 20
А какую задачу вообще решает этот плагин? Уменьшить запись на несколько букв и создать вопрос у разработчика «wtf?» — не задачи. xs, md — всегда лежат в переменных, если используются фреймворки (bootstrap/foundation/...)
+3
Fronzy — это не маленький шаг к упрощению работы со стилями, это обувь (в данном случае — кроссовки), в которой вы совершаете этот шаг.
Не нравится Fronzy, выбирайте ботинки — sass-mq.github.io/sass-mq
Не нравится Fronzy, выбирайте ботинки — sass-mq.github.io/sass-mq
-2
На LESS запись как-то покороче получается:
.responsive(@max_width, @rules) {
@media only screen and (max-width: @max_width) {
@rules();
}
}
.mobile(@rules) {
.responsive(480px, @rules);
}
/* Использование */
.mobile({
width:100%;
});
+1
.mobile — это селектор в LESS?
-1
Это миксин.
0
в LESS не нужно писать @mixin и include, там всё объявляется как класс и используется, собственно, тоже.
0
Хорошо, а что мне писать в less-файле, если я хочу использовать стили для класса .main-nav для устройств с экраном меньше 700px?
Как создать такой миксин?
Как создать такой миксин?
0
Миксин .mobile — это «алиас» для удобства использования фиксированных размеров. Можно использовать .responsive() напрямую:
.main-nav {
position:fixed;
.responsive(700px, {
position:static;
});
}
0
В теле less-файла (многострочного) мне будет тяжело идентифицировать .responsive(700px, {… }); как описание медиа-запроса, потому что там нет символа @, который ассоциируется с классическим css медиа-запросом
-1
Разница то SCSS минимальная
Хотя, сам я лично использую SASS, на котором ваш миксин еще лакончинее
@mixin responsive( $max_width ) {
@media only screen and (max-width: $max_width) {
@content
}
}
@mixin mobile {
+responsive( 480px ) {
@content;
}
}
// Использование
@include mobile {
// ...
}
Хотя, сам я лично использую SASS, на котором ваш миксин еще лакончинее
=responsive( $max_width )
@media only screen and (max-width: $max_width)
@content
=mobile
+responsive( 480px )
@content
// Использование
+mobile
// ...
0
Ну этим уже никого не удивишь, все ж уже давно и плотно на препрцессорах.
Другое дело писать так:
А на выходе получить все вариации в одном соответствующем медиа-квери в конце файла. Где-то я уже такое видел для stylus.
Другое дело писать так:
.foo
width 320px
+fronzymin(640px)
width 640px
А на выходе получить все вариации в одном соответствующем медиа-квери в конце файла. Где-то я уже такое видел для stylus.
0
Вот тоже самое, но более функциональное github.com/zellwk/mappy-breakpoints
0
А еще есть шикарнейший http://include-media.com/
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Верстаем отзывчивый сайт правильно с Fronzy media-queries