Если вы пишете много CSS, есть большая вероятность, что вы уже знакомы с Sass . Sass — один из лучших способов предварительной обработки вашего CSS, так что вы получаете преимущество более чистого, СУШЕГО , более удобного в обслуживании кода. И только Сасс может довольно далеко увести тебя.
Но одна из лучших особенностей Sass заключается в том, что сторонние разработчики могут создавать расширения, которые могут еще больше ускорить работу с Sass. Одним из самых легких и мощных инструментов для улучшения Sass, с которым я столкнулся, является Bourbon .
Bourbon — это библиотека микшеров, функций и надстроек Sass, которые определяют, где заканчивается препроцессор Sass, чтобы предоставить вам множество удобных функций, которые вы обязательно оцените в своем рабочем процессе Sass. Если вы не знакомы с Bourbon, я написал пошаговое руководство по установке Sass и Bourbon , с которым вы можете ознакомиться, чтобы начать работу.
После того, как вы установили Bourbon, вот несколько моих любимых способов использовать библиотеку Bourbon в ежедневном кодировании Sass.
1. Форматы шрифтов
Со всеми различными браузерами и разными форматами шрифтов требуется большой кусок кода для объявления нового шрифта в вашем CSS. Но шрифтовые грани обеспечивают большую гибкость при разработке сайтов, будь то просто добавление броского шрифта заголовка или включение универсального шрифта значка, который может сэкономить вам огромную пропускную способность по сравнению с отдельными растровыми изображениями, а также рендеринг векторных изображений с различными размерами.
Чтобы поддерживать все используемые браузеры, вам нужно создать файлы шрифтов в различных форматах, а затем ссылаться на все из них в своем CSS, прежде чем вы даже начнете использовать свой шрифт. Браузеры будут достаточно умны, чтобы знать, какой из них вы можете использовать в этом конкретном сеансе, но вам нужно сослаться на все из них, чтобы сделать ваш сайт надежным. CSS для вызова шрифта у вас выглядит так:
@font-face {
font-family: My-Font;
font-weight: normal;
font-style: italic;
src: url('/styles/fonts/myfont.eot');
src: url('/styles/fonts/myfont.eot?#iefix') format('embedded-opentype'),
url(/styles/fonts/myfont.woff') format('woff'),
url('/styles/fonts/myfont.ttf') format('truetype'),
url('/styles/fonts/myfont.svg##My-Font) format('svg');
}Все это только для того, чтобы вы могли использовать нужный шрифт для заголовков:
h1, h2, h3 {
font-family: 'My-Font', sans-serif;
}
Bourbon предоставляет очень удобный миксин для Sass, который позволяет быстро и легко определить новое семейство шрифтов. Пока вы используете согласованное именование файлов шрифтов и загружаете их на свой сервер в той же директории, Bourbon будет заботиться обо всем этом повторяющемся CSS и предоставит вам тот же надежный CSS, который вы видели выше с этим простым кусочком кода. :
@include font-face(My-Font, '/fonts/my_font/MyFont-Italic', normal, italic);
Теперь вы можете использовать «Мой шрифт» в любом месте вашего CSS, и все форматы будут автоматически распознаваться всеми соответствующими браузерами.
Bourbon также предоставляет переменные по умолчанию для предопределенных стеков шрифтов, которые хорошо работают для стандартных веб-браузеров, использующих шрифты, которые уже установлены пользователем. Это поможет вам создать быстрые и надежные стеки шрифтов, которые точно имитируют стиль предпочитаемого шрифта, и логически ухудшаться на разных платформах.
Следующий Sass / Bourbon:
font-family: $helvetica;
font-family: $georgia;
font-family: $lucida-grande;
font-family: $monospace;
font-family: $verdana;
автоматически генерирует следующие стеки шрифтов CSS:
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
font-family: Verdana, Geneva, sans-serif;
2. Форма входов
Мясо и картошка веб-разработки — это контроль над формой представления. Но добавление стилей, которые работают последовательно для нескольких элементов формы, обычно означает необходимость выписывать сложные селекторы, которые, кажется, продолжаются вечно.
Например:
input[type="email"], input[type="number"],
input[type="password"], input[type="search"],
input[type="tel"], input[type="text"],
input[type="url"], input[type="color"],
input[type="date"], input[type="datetime"],
input[type="datetime-local"], input[type="month"],
input[type="time"], input[type="week"] {
color: #999;
}
Bourbon определяет набор очень полезных надстроек, облегчающих создание унифицированных стилей выбора элементов формы и управление ими. Приведенный выше CSS может быть сгенерирован с помощью следующего кусочка Sass со вкусом бурбона:
#{$all-text-inputs} {
color: #999;
}
Аналогичное дополнение существует для поддержки кнопок ввода. Этот код:
#{$all-button-inputs} {
background: #f3f;
}
создаст этот набор селекторов CSS:
input[type="button"],
input[type="reset"],
input[type="submit"] {
background: #f3f;
}
И если вы хотите контролировать состояния :active:hover Добавление -active-focus Например, этот код:
#{$all-text-inputs-hover} {
color: #000;
}
создаст этот CSS:
input[type="email"]:hover, input[type="number"]:hover,
input[type="password"]:hover, input[type="search"]:hover,
input[type="tel"]:hover, input[type="text"]:hover,
input[type="url"]:hover, input[type="color"]:hover,
input[type="date"]:hover, input[type="datetime"]:hover,
input[type="datetime-local"]:hover, input[type="month"]:hover,
input[type="time"]:hover, input[type="week"]:hover {
color: black;
}
3. Преобразование единиц
Одна вещь, которая всегда требует времени и мозгового сока, — это выяснить, как преобразовать значения пикселей из изображений и шрифтов, чтобы они соответствовали относительным значениям масштабирования, таким как em или rem. В то время как вы можете выполнять математические вычисления каждый раз и обновлять их при изменении значений, Бурбон выполняет работу с некоторыми удобными функциями преобразования.
Для начала, если у вас есть измерение в px, Bourbon может преобразовать его напрямую в гибкое значение em, используя базу по умолчанию 16px = 1em. Следующий код:
p {
font-size: em(10);
}
выведет следующий CSS:
p {
font-size: 0.625em;
}
Если вы хотите вычислить значение em на основе другого масштаба вместо 16, вы можете передать альтернативное значение в качестве второго необязательного параметра в функцию em()
p {
font-size: em(10, 32);
}
выведет следующий CSS:
p {
font-size: 0.3125em;
}
И если вы предпочитаете rem над em, чтобы наследовать от базового значения независимо от масштаба родительского элемента, также есть соответствующая функция rem() Этот код:
p
font-size: rem(10)
выведет следующий CSS:
p {
font-size: 0.625rem;
}
В Bourbon также поддерживается несколько других преобразований, в том числе функция успокаивающего golden-ratio()
4. Поддержка Flexbox
Новая особенность CSS макета — это flexbox , который позволяет вам определять свои элементы макета и то, как они ведут себя таким образом, который требовал громоздких комбинаций дополнительного HTML и сложного CSS. Но на самом деле flexbox существует с 2009 года во множестве вкусов.
Конечно, чтобы поддерживать все разные браузеры и способы, которыми они интерпретируют CSS для flexbox, вам нужно написать множество префиксов для конкретных браузеров и охватить запасные варианты. В зависимости от того, как далеко вы хотите предложить поддержку, написание CSS с помощью flexbox может заставить вас создать сложный CSS, который выглядит следующим образом:
.container {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-pack: justify;
-moz-box-pack: justify;
box-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
-ms-flex-pack: justify;
}
.container > .box {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
Разве это не похоже на судороги, ожидающие, чтобы случиться? Поэтому, если вам нужна поддержка в этих старых браузерах, Bourbon может обработать ваш синтаксис flexbox и сгенерировать весь этот CSS с помощью нескольких простых строк:
.container {
@include display(flex);
@include flex-direction(column);
@include align-items(center);
@include justify-content(space-between);
}
.container > .box {
@include flex(1);
}
Бурбон включает в себя поддержку довольно полного набора параметров flexbox. И пока вы обновляете установку Bourbon, вы можете ожидать, что она адаптируется, поскольку браузеры улучшают свою поддержку макетов flexbox.
5. Retina Images
Теперь, когда наши посетители ожидают от нас поддержки как стандартных дисплеев, так и дисплеев с высоким разрешением, нам нужно подумать о том, какие изображения мы отображаем на разных устройствах, чтобы сохранить пропускную способность, но при этом обеспечить лучший визуальный опыт для всех наших пользователей.
Один из подходов заключается в использовании медиазапросов CSS и определении минимального отношения пикселей к устройству для загрузки другого фонового изображения в зависимости от того, может ли дисплей на конкретном устройстве поддерживать более высокие разрешения. CSS для этой работы выглядит примерно так:
.hero {
background-image: url(hero-background.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
only screen and (min-resolution: 125dpi),
only screen and (min-resolution: 1.3dppx) {
.hero {
background-image: url(hero-background_2x.png);
background-size: 400px 300px;
}
}
Вы можете видеть, что там есть много избыточности, особенно если вы последовательны в том, как вы называете и сохраняете файл фонового изображения. Используя эту последовательность, Bourbon позволяет вам добавлять весь этот CSS с помощью простого однострочного:
.hero {
@include retina-image(hero-background, 400px 300px, png);
}
Параметр extension является необязательным, если вы используете изображение в формате PNG, так как Бурбон по умолчанию использует PNG. Вы также можете настроить эту команду с другими необязательными параметрами, такими как конкретное изображение сетчатки и суффикс.
Начните сегодня
Со всеми этими полезными встроенными функциями и множеством других функций, трудно представить себе возвращение к написанию простого Sass, не говоря уже о простом CSS, без Bourbon. Я надеюсь, что вам будет предложено попробовать , и дайте мне знать, какие ваши любимые функции Бурбон!