Ответы пользователя по тегу Sass
  • PostCSS или Stylus: Что выбрать?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    но как я понял сложности с функциями и миксинами.


    не совсем, есть куча готовых плагинов, есть возможность добавлять свои функции для обработки AST и т.д.

    но вот говорить о будущем не приходится. Используйте то что вам удобно. Для смены технологии должны быть более объективные причины кроме как "маркетинг" тулзы.
    Ответ написан
  • Какие библиотеки для конвертации цвета самые быстрые?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    о скорости работы различных библиотек


    Вообще-то там простая формула и она... ну как бы одинаково работает для всех в пределах одного языка программирования.
    Ответ написан
  • Что такое Postcss?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    когда есть sass?


    sass - фиксированный ПРЕ процессор, postcss - ПОСТ процессор, то есть он позволяет вам работать с AST CSS файла, расширять синтаксис, добавлять поведение по вашему вкусу и т.д. Простой пример того, зачем нужен postcss - autoprefixer

    Посмотрите презенташку Андрея Ситника (автор postcss) и вообще погуглите объяснений от него.
    https://www.youtube.com/watch?v=XJaJqLVaR-c
    Ответ написан
  • Что лучше учить/использовать(SCSS/Stylus)?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    ту что популярнее (больше обсуждений, больше решений возможных проблем).
    Ответ написан
  • Что можно потерять отказавшись от компонентных фраймворков?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    но прежде, хочется узнать - что я при этом потеряю

    возможность быстро набросать UI админки. В целом потеряете вы не сильно много, бутстрап хорош только при прототипировании или если реально лень делать UI самому. Много готового. Для админок самое то, и то приходится частенько что-то свое пилить.

    Что у меня не будет работать так, как работает у bs3?

    все. У вас не тот же уровень знаний что у чуваков из твиттера который разрабатывали TB, у вас нет огромнейшего комьюнити которые делают регулярные баг репорты и пул реквестят ну и вы один и жизнь у вас одна.

    Если вам нужно сделать то что уже есть в бутстрапе - проще подключить стили этого конкретного компонента и не париться. Другое дело что весь бутстрап подключать для этого не надо.

    как правильно изменить стили bs3, чтобы было по моему

    тут зависит от того что вы хотели сделать. У меня скажем нет особо проблем с тем, что бы переопределить стили, но некоторые вещи я сразу делаю с нуля а не пытаюсь извращаться со стилями бутстрапа. Вопрос баланса. Если вас не удовлетворяет компонент только чуть чуть - можно юзать компонент. Если переделка стилей на вскидку выходит нам в довольно большое количество времени - либо ищем что-то более подходящее либо вообще пишем сами.

    Зависит от задачи словом.
    Ответ написан
  • Каким CSS-препроцессором удобней пользоваться?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    LESS или SASS

    SASS имеет некоторые приятные плюшки, вроде циклов и условий, удобно работать с цветовыми палитрами и т.д.

    С другой стороны все это нужно далеко не всем и многим людям больше нравится css-like синтаксис (sass использует ruby-like синтаксис). В целом их возможности схожи, но различия идут в нюансах.

    Довериться его дальновидности?

    Я не думаю что у вас будут те же нужны что и у ребят из твиттера, так что тут как хотите.

    У какого препроцессора есть возможность на лету генерировать css-код

    Это никак не зависит от препроцессора, они все берут исходник и генерируют css. То что вы ищите - сборщик с отслеживанием изменений. Можете посмотреть в сторону gulp или использовать webpack/jspm. Так же многие IDE из коробки имеют ватчеры. Ну или вы можете в bash запустить inotify, но это путь красноглазых линуксоидов.

    полного процесса работы с использованием препроцессора

    DRY, BEM, oocss и т.д. Все остальное выходит за рамки простого использования препроцессора, но основная идея - автоматизируй рутину.
    Ответ написан
  • Какой workflow front-end разработки у вас?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Изучите GIT, автоматизируйте рутину через gulp/webpack/etc, прочитайте книжку про непрерывное улучшение (lean) и продолжайте улучшать свой workflow что бы отвлекающих мелочей не осталось вовсе.
    Ответ написан
  • Зачем использовать циклы в Sass?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    А зачем по вашему нужны циклы? Скажем
    var arr = [];
    for(var i =0; i < 10; i++) {
       arr.push(i);
    }


    это же можно записать просто:
    var arr = [];
    arr.push(0);
    arr.push(1);
    arr.push(2);
    //...
    arr.push(9);


    смысл тот же, и второй кусок кода будет работать быстрее... зачем тогда цикл?
    Ответ написан
  • Какие компиляторы css2 sass,scss,less Вы знаете?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Задался целью перевести все проекты на scss.

    А зачем?

    Возьмите postcss и радуйтесь. Расширяйте синтаксис CSS по своему вкусу. Удобно для рефакторинга так же.
    Ответ написан
  • Оптимизация CSS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Почитайте про то как происходит разбор селекторов и все встанет на свои места. Селекторы разбираются слева на право (или снизу вверх по дереву). То есть селекторы вида:

    .some-specific-element

    будут относительно быстрее

    #some-hight-specific-element .some-not-so-specific-element


    пососкольку не нужно сильно далеко траверсить DOM дерево.

    Самый медленный вариант селекторов:
    body.someSpecificClass *,
    * + span,
    html span


    benfrain.com/css-performance-revisited-selectors-b...

    идею вы должны уловить. Чем ближе в дереве - тем быстрее. А вообще с вложенными селекторами и каскадированием стилей лучше не баловаться слишком сильно. Учитывая что у вас есть препроцессоры.

    Ну и про BEM почитайте (У Вадима Макеева был неплохой доклад на эту тему).
    Использовать не агитирую но идеи которые в этой методологии заложены должны сильно облегчают жизнь.

    p.s. посмотрите в сторону autoprefixer и избавьте свой CSS от этих ужасных миксинов. Как уже заметили выше добавлять префиксы для border-radius уже не имеет смысла. Ваши миксины это не учитывают, а autoprefixer имеет актуальную статистику и позволяет вообще не париться по поводу таких вот вещей.
    Ответ написан
  • Что такое Less и Sass?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Лень двигатель прогресса. Хороший пример - принцип DRY - Don't repeat yourself. Я весьма подозреваю что вы стараетесь соблюдать этот принцип когда делаете макеты или чем вы там занимаетесь. Так же я весьма уверен что вы хотя бы пытались чуть автоматизировать рутину своей повседневной работы. Так же у вас могли быть ситуации когда вы переиспользовали какие-то элементы. Мало ли.

    Так вот... CSS это тупая таблица стилей. Селектор и стили, ничего сверх умного тут придумать нельзя. Лет 5-10 назад было довольно модно держать один мегажирный CSS файл на 10К+ строк и радоваться жизни внося все больше изменений и т.д. Соответственно даже если вы соблюдаете всякие правила модульной верстки и все такое, у вас возникает несколько проблем:
    • организация стилей, то есть держать все в одном файле не удобно особенно когда проект длится годами
    • Дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты которые можно реюзать. Так же у вас может появиться масса однообразных селекторов отличающихся лишь немного. При модульных подходах вложенности редко имеет место быть но все же имеет. Но не будем забывать что большинство фигачит селекторы просто так. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.
    • Привязка размеров и параметров к другим стилям, например у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Да, в css3 появился calc для этого но это было относительно недавно и только с недавних пор можно почти без опаски использовать эту штуку.
    • Таблицы стилей, как и HTML ориентированы на удобный разбор этого добра машиной, но не человеком. Человек же существо ленивое и как-то вот лень лишний раз скобку поставить или точку с запятой. Просто лень.


    Есть так же хорошее правило, или идея если хотите.... Если код можно сгенерить - его лучше сгенерить. То есть для решения всех выше перечисленных проблем придумали препроцессоры. Они как бы были и раньше всех этих scss/less/stylus но как-то не решали всех проблем и т.д. Что в итоге было предложено (перечисляю в том же порядке что и в списке выше).

    • У CSS есть такая штука как @ import. Но не очень круто импортировать сотню стилей в продакшене. Стоит сделать так что бы все стили были склеены при сборке проекта. Эта идея в итоге развилась и если разработчик использует это дело правильно, можно зайти в любой файл со стилями и увидеть список всего от чего зависят эти стили. Какие стили подключаются и т.д. Причем один файл с зависимостями может быть подключен в нескольких файлах а препроцессор сам разберется как и куда все вставлять сгенерив максимально оптимизированный по структуре файл. А разработчик получил четкую структуру файлов и возможность быстро найти где что и от чего зависит.
    • С селекторами проблему предложили решить наиболее логичным вариантом. Если у нас есть вложенные селекторы, то имеет смысл определять их внутри блока этого селектора. Это существенно упрощает поддержку стилей. Так же для управления снипитами и прочим добавили миксины - эдакие параметризованные или нет функции которые выплевывают шматок CSS. До появления штук вроде autoprefixer это был единственный способ писать поддерживаемые стили, использовать плюшки CSS3 и вообще новые плюшки и не сойти с ума от префиксов. Префиксы это только пример, там могут быть самые разные штуки позволяющие грамотно производить реюз стилей
    • Проблему зависимостей значений стилей друг от друга решили... собственно самым очевидным способом - переменные. Это удобно, легко поддерживать и в умелых руках это мощный инструмент. Нужно поменять базовые цвета - не нужно лазить по 100500 блоков и править значения руками, можно поправить переменные и все будет хорошо.
    • Насколько я помню SCSS/LESS не стремились решить эту проблему. Какие-то решения образовывались сами собой с течением времени. В плане минимализма и выразительности пожалуй сейчас самая крутая штука это stylus.


    Что в итоге произошло. В один прекрасный момент какие-то там рубисты придумали SCSS (они вообще не любят все что не в стиле ruby в плане минимализма и выразительности). Затем чуваки подумали и сказали, SCSS это круто но почему-то они используют синтаксис знакомый именно Ruby разработчикам а не обычные для CSS конструкции. В итоге реализовали LESS, причем его уже реализовали на javascript, что с наличием node.js позволило это все добро еще на одной платформе собирать. А так как под эту платформу и так плодили препроцессоры оно удачно вписалось.

    Далее уже шли какие-то модификации дальнейшие, вроде того же Stylus, где синтаксис упростили просто до нельзя.

    Личное мнение. На сегодняшний день я не вижу смысла использовать чистый CSS хоть на малых хоть на больших проектах. Вот вообще никакого.
    Ответ написан
  • Существует ли линтер для.sass файлов?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    scss-lint 0.27.0 was the last version to support Sass 3.3

    Насколько я понимаю версии на JS нет.
    Ответ написан
  • Как переписать код на less?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Вся соль вот в этих двух строчках:
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #333333 2px, #333333 3px, rgba(0, 0, 0, 0) 3px);


    Это итоговый CSS который собственно и добавляет это самое подчеркивание и делает возможным тексту перекрыть его что бы выглядеть симпатишнее. Добавлять text-shadow или нет решает переменная $breaking-underlines

    По сути вам нужно реализовать только миксин который генерирует этот самый linear-gradient:

    codepen.io/anon/pen/cIxtg - переделал на свой монер. Может кто подскажет как лучше.
    Ответ написан
  • Где бы найти объективное сравнение популярности Sass/Less/Stylus?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    https://github.com/less/less.js - ~11000 старгейзеров
    https://github.com/sass/sass - ~5000 старгейзеров

    ну вобщем вы поняли. + можно прикинуть на основе статистики всяких npm
    Ответ написан
  • Существует ли аналог LESS Hat для SASS (SCSS)?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    А зачем если есть autoprefixer? Ради набора миксинов типа .size?
    Ответ написан
  • Как настроить less + bootstrap + bower + grunt?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    bower скачивает пакеты и отвечает за обновление оных и поддержания порядка.
    есть плагины для grunt позволяющие копировать пакеты в нужную директорию при сборке, можно вручную копировать (grunt-copy).
    less собирает стили (скажем вы в своих стилях можете подключить bootstrap.less и переопределять переменные и стили, собирать свои сборки и т.тд. Смысл в этом). Обычно используется вкупе с grun-contrib-less, который интегрирует поддержку less в grunt.

    словом... все просто решается настройкой grunt. Так же можете попробовать gulp как более быстрое и кошерное решение.
    Ответ написан
  • Что использовать LESS или SASS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Не SASS а SCSS, это вопервых.

    Во вторых, SCSS помощнее будет, но по сути и less вам хватит за глаза. В плане готовых снипетов и прочее, они приблизительно равны.
    Ответ написан