Как стать автором
Обновить

Комментарии 20

А какую задачу вообще решает этот плагин? Уменьшить запись на несколько букв и создать вопрос у разработчика «wtf?» — не задачи. xs, md — всегда лежат в переменных, если используются фреймворки (bootstrap/foundation/...)
Полностью согласен с affka. Это всего лишь сахар, который с виду не настолько и лучше, чтобы тянуть fronzy, который ничего нового по сути и не дает.
А если не использовать фреймворки?
То изобретаешь собственный фреймворк, где вводишь такие переменные :)
Fronzy — это не маленький шаг к упрощению работы со стилями, это обувь (в данном случае — кроссовки), в которой вы совершаете этот шаг.
Не нравится Fronzy, выбирайте ботинки — sass-mq.github.io/sass-mq
На LESS запись как-то покороче получается:

.responsive(@max_width, @rules) {
    @media only screen and (max-width: @max_width) {
        @rules();
    }
}

.mobile(@rules) {
    .responsive(480px, @rules);
}

/* Использование */
.mobile({
    width:100%;
});
.mobile — это селектор в LESS?
Это миксин.
в LESS не нужно писать @mixin и include, там всё объявляется как класс и используется, собственно, тоже.
Хорошо, а что мне писать в less-файле, если я хочу использовать стили для класса .main-nav для устройств с экраном меньше 700px?
Как создать такой миксин?
Миксин .mobile — это «алиас» для удобства использования фиксированных размеров. Можно использовать .responsive() напрямую:

.main-nav {
    position:fixed;

    .responsive(700px, {
        position:static;
    });
}
В теле less-файла (многострочного) мне будет тяжело идентифицировать .responsive(700px, {… }); как описание медиа-запроса, потому что там нет символа @, который ассоциируется с классическим css медиа-запросом
Ну это уже, думаю, дело привычки. У меня вот IDE миксины подсвечивает другим цветом, например.
Разница то SCSS минимальная

@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
  // ...
В первом случае у вас смесь SCSS и SASS. В SCSS нет `+`, должно быть `@include`
Да, конечно, sass версию в scss переводил, не заметил этот инклюд
Ну этим уже никого не удивишь, все ж уже давно и плотно на препрцессорах.
Другое дело писать так:

.foo
    width 320px

    +fronzymin(640px)
        width 640px


А на выходе получить все вариации в одном соответствующем медиа-квери в конце файла. Где-то я уже такое видел для stylus.
rupture. И это лучшая реализация media из всех что я видел.
А еще есть шикарнейший http://include-media.com/
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории