Препроцессор CSS поможет вам написать поддерживаемый, ориентированный на будущее код, и он серьезно сократит количество CSS, которое вы должны написать. Эти инструменты лучше всего проявляются в крупномасштабных пользовательских интерфейсах, которые требуют огромных таблиц стилей и множества правил стилей.
Это обзор шести лучших CSS препроцессоров прямо сейчас.
1. Sass
Мы начнем эту статью с самого известного варианта. Sass, который требует Ruby, вероятно, является препроцессором CSS, с которым вы наиболее знакомы. Это хорошо зарекомендовавший себя восьмилетний проект с открытым исходным кодом, и он действительно определил жанр современных CSS-препроцессоров. Я мало что могу сказать о Sass, чего еще не было сказано в SitePoint ранее , но я сделаю краткий обзор для новичков в этой теме.
Есть два синтаксиса, которые вы можете использовать для этого препроцессора CSS:
-
Sass: оригинальный синтаксис
-
SCSS: новый синтаксис, очень похожий на нативный CSS
В синтаксисе Sass вы можете определить и использовать переменные следующим образом:
$serif-font-stack: "Georgia", "Times New Roman", serif $monospace-font-stack: "Cousin", "Courier" body font: normal 18px/22px $serif-font-stack pre, code font: 600 bold 18px/22px $monospace-font-stack Это эквивалентный синтаксис SCSS :
$serif-font-stack: "Georgia", "Times New Roman", serif; $monospace-font-stack: "Cousin", "Courier"; body { font: normal 18px/22px $serif-font-stack; } pre, code { font: 600 bold 18px/22px $monospace-font-stack; }
Вы увидите, что новый синтаксис (который стал наиболее рекомендуемым вариантом для многих опытных разработчиков Sass) намного больше похож на естественный CSS. Мы можем сказать больше о синтаксисе, но многое уже было сказано ранее, и я рекомендую вам ознакомиться с документами для получения более подробной информации.
2. Less.js
Less.js, (обычно называемый просто «Less»), является одним из самых популярных CSS-препроцессоров и, вероятно, в настоящее время является самым сильным конкурентом Sass. Less расширяет синтаксис CSS полностью за счет миксинов, переменных, вложенных правил стилей и даже зацикливания наборов правил (что ведет себя аналогично циклам for в языке программирования).
Одной из распространенных функций в препроцессорах CSS являются миксины или возможность смешивать свойства из одного набора правил в другое. В синтаксисе Less вы можете включить сочетание свойств, найденных в классе с именем .button в другой класс с именем .button-checkout-process :
.button { display: inline-block; width: 80%; max-width: 200px; border-radius: 5px; background-color: black; color: white; font-size: 14px; margin: 5px; padding: 8px; } .button-checkout- process { .button(); /* Mixin */ background-color: silver; }
Меньше легко настроить. Если вы просто хотите поэкспериментировать с ним, не затрачивая усилий, необходимых для его установки и настройки, просто загрузите файл JavaScript Less.js и сделайте ссылку на него в своем HTML-документе (или подайте его с вашего любимого общедоступного CDN , создайте .less файл, а затем сослаться на него после сценария Less.js, и все готово:
<head> <!-- Reference Less JavaScript file --> <script src="path/to/your/less.js"></script> <link rel="stylesheet/less" type="text/css" href="your/styles.less" /> </head>
Метод реализации Less, который я только что описал, отлично подходит для разработки в браузере. Это быстро и без проблем. Но — и это очень важный момент — как только вы будете готовы к развертыванию на рабочем веб-сервере, вы должны предварительно скомпилировать ваши файлы .less в обычные файлы .css чтобы повысить производительность в Интернете. Это можно сделать через интерфейс командной строки Node. Например, для компиляции styles.less в файл с именем styles.css , а также для минимизации вывода CSS, вы должны выполнить эту команду:
lessc styles.less -x styles.css
3. Стилус
Стилус является еще одним сильным конкурентом Sass и является многофункциональным расширением CSS. Он имеет более 60 пользовательских функций, включая saturation() , который позволяет математически регулировать насыщенность цвета CSS.
Синтаксис Stylus также позволяет опустить фигурные скобки ( {} ), двоеточия (:) и точки с запятой ( ; ), или вы можете использовать простой CSS.
Вот пример синтаксиса стилуса:
.button display inline-block border-color saturation(#000, 50%) border-radius 5px
Приведенный выше пример скомпилируется в это:
.button { display: inline-block; border-color: #959595; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
4. CSS-Crush
CSS-Crush имеет все функции, которые вы ожидаете от современного препроцессора CSS: авто-префиксы поставщиков, переменные, математические операции, наследование свойств с помощью вложенных наборов правил и многое другое.
Что делает CSS-Crush особенно уникальным и что может заставить вас выбрать его в качестве препроцессора, так это то, что он реализован на PHP. PHP, как вы знаете, является популярным языком сценариев, который уже настроен практически на всех веб-хостах и является родным языком, используемым в популярных платформах веб-сайтов, таких как WordPress, Magento и Drupal. В отличие от других препроцессоров, вам не нужно настраивать Node.js или Rails для работы CSS-Crush, что делает его удобным выбором для многих разработчиков, поскольку его легко интегрировать в существующий стек разработки.
Чтобы использовать CSS-Crush, вам нужно включить его в соответствующий файл PHP (или систему шаблонов) следующим образом:
<?php require_once 'path/to/CssCrush.php'; ?>
Затем, при желании, вы можете настроить CSS-Crush для работы так, как вы хотите. Например, допустим, вы не хотите минимизировать свой CSS (по умолчанию минификация включена). После ссылки на файл CSSCrush.php вы можете вызвать следующую функцию с соответствующими параметрами, чтобы установить ваши предпочтения:
<?php csscrush_set(minify, false); ?>
Для определения переменных вы будете использовать директиву @set . Допустим, вы хотите определить ширину устройства. Вот как это можно сделать с помощью синтаксиса CSS-Crush:
@set { smartphone-width: 320px; tablet-width: 768px; laptop-width: 1680px; 4k-monitor-width: 3840px; }
После объявления ваших переменных вы можете ссылаться на них по всему CSS. Ниже приведен пример медиазапроса, в котором используется переменная smartphone-width показанная в предыдущем примере кода:
@media only screen and (min-device-width: smartphone-width) { h1 { font-size: 24px; } }
Когда вам нужно что-то изменить — например, вы можете решить, что теперь хотите, чтобы smartphone-width составляла 380 пикселей вместо 320 пикселей — вам нужно изменить значение ширины только один раз в директиве @set , а не во всех файлах CSS.
5. Миф
Миф, для которого требуется Node.js, позволяет вам использовать будущий синтаксис CSS сегодня, не дожидаясь, пока веб-браузеры реализуют новую предложенную функцию CSS или пока W3C не выполнит спецификации этой функции. Это означает, что когда эта функция наконец поддерживается в современных браузерах, вам не нужно переписывать свой код.
Например, текущий статус выражения свойства calc() мутный. Есть отчет о том, что он поддерживается в 78% браузеров, используемых сегодня , но спецификация W3C, которая находится в статусе рекомендации кандидата (CR), говорит, что она «подвержена риску и может быть отброшена». Поэтому можем ли мы / должны ли мы ее использовать? или не? Ответ неясен.
Но с Myth мы можем использовать calc() не беспокоясь о статусе спецификации и поддержке браузера. Myth позаботится обо всем необходимом коде, чтобы сделать функцию выражения свойства в браузере. Например, вот W3C-правильный способ использования calc() :
.container { margin: calc(7px*2); }
Миф скомпилирует приведенный выше пример для:
.container { margin: 14px; }
Что хорошего в Мифе, так это то, что вам не нужно изучать новый синтаксис. Он использует существующие и предложенные функции CSS стандарта W3C.
6. Переработка
Переработка для хардкорных, проницательных передовых инженеров среди нас. Это то, что вы бы использовали, если бы вы хотели создать свой собственный CSS-препроцессор. Миф (обсужденный ранее) был разработан поверх проекта с открытым исходным кодом Rework.
Возможно, вам не нравится синтаксис Stylus, или вам не нравится предоставлять аргумент модуля CSS для пользовательской функции math() CSS-Crush, или вам не нравится, как Sass заставляет вас определять переменные с помощью знака $ и вы Я бы предпочел использовать # . Возможно, вам просто нужно несколько функций, и вы не хотите страдать от раздувания функций существующих препроцессоров.
Rework — это CSS-препроцессор, основанный на Node.js. У него есть отличный набор вспомогательных плагинов для вещей, которые вы, возможно, захотите предварительно обработать. Поэтому, прежде чем писать свои собственные функции синтаксического анализа, вы можете сначала взглянуть на них, чтобы не изобретать велосипед заново.
Другие опции CSS препроцессора
Вот некоторые другие, более неясные варианты для препроцессоров CSS. Я не изучал их подробно, поэтому вам придется проверить их самостоятельно, чтобы убедиться, что они подойдут вам.
- Clay : CSS-препроцессор, созданный с использованием Haskell
- DtCSS : PHP-скрипт, который анализирует синтаксис DtCSS в CSS
- CSS Preprocessor : Препроцессор, реализованный в PHP5. Этот старый и выглядит неактивным.
- Переключить CSS : препроцессор CSS, работающий на Apache (необходимо установить и включить mod_python)
Какой CSS-препроцессор вы используете?
Вы использовали один из этих вариантов, обсужденных выше? Есть ли у вас какие-либо предложения по их использованию? Или, может быть, вы знаете другой, не перечисленный здесь. Мы будем рады здесь ваши мысли в комментариях.