Css

Статьи по теме css

Осветление и затемнение цвета на тон в SASS, SCSS, LESS

mbaev 21.07.2017, 21:32
Tags

В этом, без сомнения, прекрасном препроцессоре есть большое количество функций, в том числе и для работы с цветом. Цвет можно насыщать, делать прозрачнее, вытаскивать определенные цвета, конвертировать из hex'а в rgb, а потом в hsl и обратно, смешивать и многое другое. Конечно же, есть функция и для осветления цвета - lighten . Замечательная функция, которая даже работает по правилам.

Отладка less

mbaev 27.09.2016, 09:03

Если идти в ногу со временем или даже если отставать на шаг, то пора использовать препроцессоры для компиляции css. Существует достаточное количество материала на тему плюсов и минусов тех или иных препроцессоров, а так же сторонников и противников этой техники написания стилей.

Обычно отладчик в браузере (в моём случае Mozilla Firefox) выглядит так:
debug-styles-css

Задача данной статьи помочь тем, кто все же решился использовать less для компиляции стилей и подсказать как же можно отлаживать стили и сразу, в отладчике браузера, видеть в каком less-файле написан стиль.
debug-styles-less

Итак, у нас есть проект и есть, скажем, такое дерево:

Автоматическая компиляция css в PhpStorm

mbaev 27.04.2016, 10:22
Tags

Сейчас активно используются три типа метаязыков: SCSS, SASS (что. в общем-то, является улучшенным SСSS) и LESS. Для того, чтобы работать с ними, не задумываясь о процессе компиляции в css нужно выполнить два шага:

  1. Установить компилятор
  2. Настроить PhpStorm

Так же, здесь есть и свои проблемы, но о них позже.

Установка компилятора

В интернете достаточно мануалов по установке компиляторов. Не буду заострять на них внимание, лишь кину пару ссылок на материалы по установке:

Настройка PhpStorm

Каждому нравится свой подход и свои настройки. В одно и тоже время PhpStorm для одного будет божественно настроенный, для другого - неприятный редактор. Я опишу один из способов настройки, которым пользуюсь сам.
Настраивая компилятор в PhpStorm'е, я преследовал цель безмятежной разработки тем и модулей в Drupal'е, а именно: при такой структуре каталогов

Специфичность (приоритеты) в css

mbaev 11.08.2014, 11:12
Tags

Таблица специфичности (приоритетов) стилей, как их рассчитывают браузеры. Иногда нужно знать для того, чтобы понимать стоит ли в данной ситуации пытаться переопределить стили навешанные на "id" стилями навешанными на класс.
Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.

Работа с SASS и SCSS в Drupal 7

mbaev 28.04.2014, 15:20

Очень полезный инструмент, на мой взгляд. Чтобы работать с файлами SCSS, SASS файлы нужен модуль SASSY, а для него, в свою очередь, требуется модуль-препроцессор PREPRO.
Устанавливаем эти модули и включаем их.
Настройки модуля находятся в "admin/config/media/prepro". Далее наш модуль Sassy требует php-библиотеку, которую можно взять на GitHab'е. Распаковываем её в sites/all/libraries и переименовываем в phpsass. С настройками все.

Подключение

Тут все просто.

В .info темы
  1. stylesheets[all][] = sass/style.sass

Такой вариант тоже должен работать: