Время от времени мне нравится пересматривать мои старые проекты и немного их реорганизовывать, используя новые идеи, которые я узнал за это время, или пробуя какую-то новую технику или структуру на знакомой почве. На этот раз я перейду к теме WordPress, которую я создал пару лет назад, и использую Compass для организации таблиц стилей. Преобразование существующей таблицы стилей (около 8k без сжатия) в SCSS не заняло много времени — всего несколько минут вручную — и есть инструменты, которые вы можете использовать для автоматизации преобразования, поэтому у меня оставалось много времени для изучения дополнительных возможностей Sass которые значительно упрощают управление таблицами стилей. Сегодня мы рассмотрим директивы команд и несколько основных помощников по спрайту.
Что такое Sass и Compass?
Sass (Syntaxically Awesome Style Sheets) — это язык, построенный вокруг CSS3 и основанный на нем, добавляя множество функций, таких как переменные, миксины (вроде макросов) и несколько помощников для более распространенных операций CSS. Это может быть выражено в двух формах синтаксиса — Sass (который использует отступ для определения блоков кода) или Scss (который использует фигурные скобки). Я буду использовать форму scss для этих примеров, но в любом случае любой, кто знаком с css, будет дома. Обе формы компилируются в CSS-файлы.
Compass — это среда разработки CSS, которая добавляет еще больше инструментов в дополнение к спецификации Sass; включая спрайтинг и типографику. Дополнительная ценность того стоит, даже если вы только начинаете с scss.
Приведенные ниже примеры можно скачать здесь .
переменные
Вам когда-нибудь приходилось проходить через несколько строк (или файлов) CSS, чтобы снова и снова заменять один и тот же код цвета? Я ненавижу делать это — всегда заканчиваю тем, что пропускаю или меняю то, чего не должно было быть. Sass исправляет это, позволяя нам определять переменные. Это замечательно, поскольку (при условии правильного именования) нам нужно изменить только одно значение, когда кто-то решит, что заголовок имеет неправильный оттенок {{некоторого причудливо названного цвета, который я даже не притворюсь, что пойму}} . Поскольку Sass также поддерживает математические операции, мы можем использовать его для определения значений по отношению друг к другу; например, делая высоту строки функцией размера шрифта:
$copy-font-size: 10pt;
article {
p {
font-size: $copy-font-size;
line-height: $copy-font-size * 1.2;
}
}
Который компилируется в
article p {
font-size: 10pt;
line-height: 12pt;
}
Изменение размера шрифта (или даже единиц размера шрифта) приведет к тому, что высота линии сохранит те же отношения.
Директивы управления: @for, @each и @if
Всегда есть несколько ситуаций, когда нам нужно определить стили, которые почти идентичны. В некоторых случаях мы можем выразить их как функцию чего-либо; например, размер шрифта элемента заголовка будет обратно пропорционален его рангу, или значок будет одним из предопределенного набора, где изменяется только фоновое изображение. Sass позволяет нам настраивать некоторые итерации, поэтому мы можем быть немного ленивее.
В этом разделе я расскажу о трех из этих директив: «@for», «@each» и «@if». Существует также директива @ while, но я ее опущу, потому что она мне не особо нравится. Это действительно полезно, если у вас сложные условия (если так: почему у вас сложные условия), и вы можете легко повесить свою компиляцию, если создадите ситуацию, когда условие выхода никогда не будет выполнено.
@for .. через и @for .. в
Это общий или сад для цикла, подобные которому можно найти практически на каждом языке. Он принимает начальное и конечное значение и выполняет итерации между ними. Если используется ключевое слово «through», включается конечное значение; если «к» используется, то это не так. Так:
$cellWidth: 60px;
$cellGutter: 20px;
@for $i from 1 through 12 {
.span#{$i} {
width: $cellWidth * $i;
margin-right: $cellGutter;
}
}
Создает 12 предметов
.span1 { width: 60px; margin-right: 20px; }
.span2 { width: 120px; margin-right: 20px; }
.span3 { width: 180px; margin-right: 20px; }
.span4 { width: 240px; margin-right: 20px; }
.span5 { width: 300px; margin-right: 20px; }
.span6 { width: 360px; margin-right: 20px; }
.span7 { width: 420px; margin-right: 20px; }
.span8 { width: 480px; margin-right: 20px; }
.span9 { width: 540px; margin-right: 20px; }
.span10 { width: 600px; margin-right: 20px; }
.span11 { width: 660px; margin-right: 20px; }
.span12 { width: 720px; margin-right: 20px; }
С другой стороны
@for $i from 1 to 7 {
h#{$i} {
font-size: 12pt + ((6 - $i) * 6);
@if ($i < 2) { color: red; }
}
}
Будет генерировать 6
h1 {
font-size: 42pt;
color: red;
}
h2 { font-size: 36pt; }
h3 { font-size: 30pt; }
h4 { font-size: 24pt; }
h5 { font-size: 18pt; }
h6 { font-size: 12pt; }
Выше вы также можете увидеть условие if в действии, которое работает точно так, как вы ожидаете. Вы также могли заметить, что значение индекса, $ i, иногда переносится, как в h # {$ i}. Это позволяет Sass знать, что я хочу видеть значение $ i, а не очень уродливый селектор или какой-то странный кусок CSS. Это нужно сделать только в том случае, если значение смешано с простым CSS.
@each
Каждая директива проходит по списку значений — полезно, если вы работаете с отдельной коллекцией.
.icon {
width:16px;
height:16px;
}
@each $icon in add, attach, bell, star {
[data-icon=#{$icon}] .icon {
background-image: url(img/#{$icon}.png);
}
}
производит
.icon {
width: 16px;
height: 16px;
}
[data-icon=add] .icon { background-image: url(img/add.png); }
[data-icon=attach] .icon { background-image: url(img/attach.png); }
[data-icon=bell] .icon { background-image: url(img/bell.png); }
[data-icon=star] .icon { background-image: url(img/star.png); }
Sass также определяет несколько функций списка, которые помогут вам усложнить свои сценарии по своему вкусу.
спрайтов
Спрайты изображений — это удобный способ сократить время загрузки страницы, особенно если на вашей странице или в веб-приложении много маленьких изображений. С другой стороны, вам может понадобиться возраст, чтобы выстроить в ряд спрайтов и правильно расположить фоновые позиции. Что ж, больше нет: Compass предоставляет несколько красивых и простых инструментов для разбрызгивания. Чтобы создать спрайт-лист, просто поместите все свои изображения в папку и импортируйте их в свой файл scss:
@import "icons/silk/*.png"; @include all-silk-sprites;
В моем случае я использую четыре иконки из Silk Icon Set FamFamFam , которые я оставил в папке с именем silk. Это генерирует
.silk-sprite, .silk-add, .silk-attach, .silk-bell, .silk-star {
background: url('/images/icons/silk-sf90b8edda1.png') no-repeat;
}
.silk-add { background-position: 0 -16px; }
.silk-attach { background-position: 0 -48px; }
.silk-bell { background-position: 0 0; }
.silk-star { background-position: 0 -32px; }
Компас также генерирует несколько вспомогательных функций, таких как «спрайты из всего шелка». Название функций основано на названии папки, в которой находятся значки — оно всегда использует имя последней папки перед селектором файлов, в данном случае — шелк.
Настройка спрайтинговых селекторов
Я хотел немного больше контролировать сгенерированные селекторы и стили, и оказалось, что Compass обеспечивает довольно легко Используя функции спрайтов, мы получаем гораздо больший контроль:
@import "compass/utilities/sprites/base";
$icons: sprite-map("icons/silk/*.png");
.icon {
@include sprite-dimensions($icons, nth(sprite-names($icons),1));
background: $icons no-repeat;
}
@each $icon in sprite-names($icons) {
[data-icon=#{$icon}] .icon {
@include sprite-background-position($icons, $icon);
}
}
Это генерирует
.icon {
height: 16px;
width: 16px;
background: url('/images/icons/silk-s95fd478241.png') no-repeat;
}
[data-icon=add] .icon { background-position: 0 -16px; }
[data-icon=attach] .icon { background-position: 0 -48px; }
[data-icon=bell] .icon { background-position: 0 0; }
[data-icon=star] .icon { background-position: 0 -32px; }
Мы можем не только определять классы так, как нам нравится, но теперь добавить иконку так же просто, как поместить png в папку silk и перекомпилировать scss. Сценарий позаботится обо всем остальном за нас. Этот немного здоровее других, так что давайте посмотрим на него по частям.
@import «компас / утилиты / спрайты / база»;
Здесь мы загружаем в функции спрайта. Compass не загружает их по умолчанию, поэтому вам придется делать это вручную.
$ icons: sprite-map («icons / silk / *. png»);
Мы создаем экземпляр карты спрайтов и сохраняем ссылку на него. Нам это понадобится для быстрого доступа к функциям спрайта.
.icon {
@include sprite-sizes ($ icons, nth (sprite-names ($ icons), 1));
фон: $ icons no-repeat;
}
Первая часть получает ширину и высоту первого спрайта на карте — мы предполагаем, что все спрайты на карте имеют одинаковый размер, что здесь верно, но не всегда так. Функция sprite-names дает нам имена всех спрайтов на карте, а nth используется для доступа к элементу по индексу — в данном случае, к первому.
Вторая часть выдает путь к сгенерированной таблице стилей.
@each $ icon в sprite-names ($ icons) {
[data-icon = # {$ icon}] .icon {
@include sprite-background-position ($ icons, $ icon);
}
}
Здесь мы снова используем функцию имен спрайтов, на этот раз перебирая ее, используя директиву @each, как мы делали ранее. Мы используем имя иконки, как мы это делали в примере для @each, создавая селектор, а затем используем его в sprite-background-position для получения смещений для спрайта.
Другие вещи
Этот пост охватывает крошечную долю огромного количества функций — возможности для оптимизации вашего поколения CSS очень велики. То, что я видел до сих пор, побудило меня продолжать копать, и вполне вероятно, что Compass станет постоянным жителем моего инструментария — это намного лучше, чем выкачивать css вручную.