Подборка полезных утилит SCSS

[Apathetic]

Respond To

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

Решение: по необходимости писать конкретные значения ширины/высоты экрана, в остальных случаях довольствуясь предустановленными точками перелома. Для этого есть удобные миксины: SASS, LESS.

[jMas]

Есть foundation.zurb.com (Foundation 6) можно использовать в качестве библиотеки сниппетов. Подключаешь частями, например гриды и типографику, возможно кнопки. Все настраиваемо и не тащит лишний CSS. Можно ставить через bower, npm.

Пример

@import "foundation";
@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;

Но какого то определенного решения (что то вроде npm репозиториев) для SCSS сниппетов не видел.

[pacahon]

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

[Ohar]

Половина статьи — понадёрганный отовсюду бред сивой кобылы. Использование таких чудесностей рискует поломать вам вёрстку в самых неожиданных местах.

Currency

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

Respond To

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

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

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

Анимация

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

Остальные миксины, возможно, могут кому-то действительно пригодиться.

[jMas]

Ну зачем отдавать 100кб ради кнопочки? После компиляции на выходе получатся только те стили, которые ты используешь. Весь Foundation 6 состоит из большого количества миксинов, но я использую, например, только грид и кнопки, после компиляции в CSS фале только те классы которые действительно используются в проекте.

Пример

@include grid-column-size($width);
@include button($expand, $background, $background-hover, $color, $style);

[sayber]

Хотя бы на codepen залили бы и ссылки дали.
А то без примеров читать, как то не очень.

[Grim_dev]

Bourbone, думаю оцените, очень удобный гем-либа с миксинами. И да, там есть все что вы описали. Единственное, в нем есть слабая сторона — это градиенты, но если заинтересует могу поделиться линком на отличную scss функцию по этой теме(github).