В данной заметке опишу самые часто используемые возможности SCSS.
CSS:
Примеры работы с SCSS
Думаю все мы уже привыкли видит на сайтах значок рубля, вместо приписки "руб.", но что делать если кодировка сайта не utf-8, а windows-1251?
Emmet
Уже давно использовал, в разных редакторах, возможность генерации целых блоков html по шаблонам вида: div.class>ul+.
И вот решил выяснить про данный функционал подробнее.
Сейчас, во времена адаптивных шаблонов, уже некого не удивишь совершенно разным дизайном для мобильных платформ и десктопов, но довольно часто верстальщики приналегают оптимизацией размера картинок и отображаю на всех устройствах одну и ту же картинку, просто меняя ее визуальную ширину / высоту.
Итак атрибут srcset позволяет задать какие картинки, при какой ширине экрана нужно загружать. Это позволяет не только экономить трафик, но и проходить Google pagespeed.
Css анимация на все случаи жизни
Интересный проект Animista, сразу можно посмотреть как будет вырядить CSS эффект, покрутить его, "примерит" и получить код для использования.
Переделка HTML таблицы во flexbox
Иногда нужно заменить старую табличную верстку (HTML таблицу), на отзывчивую (Responsive), правильный вариант, это переверстать (на эту тему есть заметка Замена таблиц на flexbox ), но иногда это слишком затратно по ресурсам.
Тут есть простое решение - превратить таблицу в flexbox
При использовании flexbox некоторые привычные методы, например, выравнивание элементов по центру внутри flex блока, работаю по другому.
Ниже пример выравнивания текста по вертикали в flexbox
Динамический бэкграунд (частицы/кривые)
Интересная библиотека, например, для интерактивного бэкграунда.
Сайт разработчика VincentGarreau/particles.js
Живое Demo
Выравнивание картинки по центру блока.
Нужно было разместить картинку по центру блока, размер самого изображения может быть разным.
Как изменить цвет SVG картинки в CSS
Коротко о том, как вставить на страницу SVG изображение и изменить его цвет через CSS.