Pull to refresh

Comments 12

Respond To

И в этом месте хочется развязать холивар на тему «предустановленные точки перелома vs. динамика и гибкость». Регулярно сталкивался с проблемой — как брейкпойнты не расставляй, сколько их не делай, всегда найдется элемент, который не выглядит нормально на каком-либо разрешении.

Решение: по необходимости писать конкретные значения ширины/высоты экрана, в остальных случаях довольствуясь предустановленными точками перелома. Для этого есть удобные миксины: SASS, LESS.
UFO just landed and posted this here
Есть foundation.zurb.com (Foundation 6) можно использовать в качестве библиотеки сниппетов. Подключаешь частями, например гриды и типографику, возможно кнопки. Все настраиваемо и не тащит лишний CSS. Можно ставить через bower, npm.
Пример
@import "foundation";
@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;


Но какого то определенного решения (что то вроде npm репозиториев) для SCSS сниппетов не видел.
Я не фронтендщик, но интересуюсь. Это смотря какие сниппеты и для чего нужны. Есть Compass, есть просто библиотека mixin'ов Bourbon bourbon.io, там часть представленных точно есть, но очень сомневаюсь, что какой-нибудь currency там когда-нибудь появится. Тот же порт bootstrap 3 на scss взять и использовать кусками можно. 4й вроде уже на нём.
Половина статьи — понадёрганный отовсюду бред сивой кобылы. Использование таких чудесностей рискует поломать вам вёрстку в самых неожиданных местах.

Currency

Решение просто на грани фантастики. На уровне описания работы псевдоэлементов в справочнике по CSS.

Respond To

Чей-то воспалённый мозг решил, что медиазапросы придумали для определения типа устройства, а не точной адаптации элементов к любым размерам экрана.

Кроссбраузерный text-overflow

Опять же похоже на пример из учебника.

Анимация

Капитан курит в сторонке. Такой миксин должен вставляться автоматически при сборке проекта.

Остальные миксины, возможно, могут кому-то действительно пригодиться.
Нет. На bower.io вобщем-то всё и лежит. Тот же bourbon, в котором есть все полезные миксины из этой статьи.
С другой стороны, во всех языках распространена практика нашёл на stackoverflow и скопипастил, SCSS тут ничем не отличается. А вот в plain old CSS копипастить было более актуально, потому что отдавать клиенту сотню килобайт из либы ради одной кнопочки — это слишком.
Ну зачем отдавать 100кб ради кнопочки? После компиляции на выходе получатся только те стили, которые ты используешь. Весь Foundation 6 состоит из большого количества миксинов, но я использую, например, только грид и кнопки, после компиляции в CSS фале только те классы которые действительно используются в проекте.
Пример
@include grid-column-size($width);
@include button($expand, $background, $background-hover, $color, $style);

Так я о разнице CSS и SCSS — как раз о том, что в SCSS можно включить только то те миксны что нужны, а в CSS этого сделать нельзя, фреймворки получаются большими и проще взять стиль и скопипастить.
Хотя бы на codepen залили бы и ссылки дали.
А то без примеров читать, как то не очень.
UFO just landed and posted this here
Bourbone, думаю оцените, очень удобный гем-либа с миксинами. И да, там есть все что вы описали. Единственное, в нем есть слабая сторона — это градиенты, но если заинтересует могу поделиться линком на отличную scss функцию по этой теме(github).
Sign up to leave a comment.