В этой статье я надеюсь, что вы начнете с предварительной компиляции или предварительной обработки вашего CSS, показывая вам, как установить Sass и Bourbon , и обсуждая, как сделать эти инструменты частью вашего рабочего процесса.
Я также покажу вам несколько учебных ресурсов, чтобы вы могли взять эти знания и начать изучать потенциал этого мощного подхода к разработке CSS.
Что не так с простым CSS?
Если вы любите CSS так же сильно, как и я, вы должны знать, что вы один из немногих из нас. Для меня мощь и универсальность CSS — это восхищение, и я испытываю физические ощущения, когда мне удается решить сложную кросс-браузерную проблему отображения или обойти ресурсоемкую маршрутизацию JavaScript с помощью небольшой элегантной CSS-анимации.
Но у людей, которые не так очарованы CSS, как у нас с вами, есть некоторые законные жалобы. Например, может быть трудно отслеживать наследование свойств по элементам с разным весом и позициями в растущей базе кода CSS. Нет переменных для поддержки внесения универсальных изменений, на которые нужно ссылаться в нескольких местах. И часто бывает необходимо создать избыточный код, который сложно поддерживать, просто для того, чтобы дизайн работал согласованно в разных браузерах.
Для меня самый элегантный подход к решению таких проблем, как эти и другие подобные, был разработан Хэмптоном Кэтлином , и с открытым исходным кодом, чтобы все сообщество могло помочь ему расти. Я говорю о Sass , препроцессоре для CSS, который позволяет вам писать чистый, поддерживаемый, структурированный код, который генерирует эффективный и полезный CSS.
А поскольку Sass поддерживает возможность написания новых и оригинальных расширений, разработчикам гораздо проще придумать свои собственные улучшения. Одним из первых, к которому я обращаюсь, является библиотека Sass под названием Bourbon. В то время как Sass предоставляет универсальный набор инструментов для предварительной компиляции CSS, Bourbon опирается на него с расширенной функциональностью Sass, которая делает его еще быстрее и проще для написания чистого и компактного кода, который легко поддерживать и делиться.
Используя Sass
Есть несколько способов начать работу с Sass. Вы можете установить Ruby gem , использовать набор для разработки, который включает в себя Sass (например, приложение Mac для CodeKit ), или воспользоваться библиотекой LibSass для производительности при компиляции на родном языке, таком как Node или C.
После того, как вы установили Sass, основным рабочим процессом является написание вашего CSS с использованием языка Sass, а затем компилирование его в обычный CSS, который любой браузер может читать и понимать.
Установка Sass
Метод, который вы используете для установки Sass, является личным выбором, и он будет в значительной степени зависеть от вашего предпочтительного рабочего процесса разработки и вашего общего уровня навыков. Ruby — один из самых удобных способов запуска Sass. Я использую Mac, как, я уверен, многие разработчики внешних интерфейсов, и это означает, что у меня предустановлен Ruby. Итак, я предполагаю, что у вас установлен Ruby и вы выполняете свои команды в терминале на вашей рабочей станции. (Существуют отличные руководства по установке и запуску Ruby в разных средах, и если вы работаете в Windows, просмотрите эту статью, чтобы помочь в настройке.)
Когда вы находитесь в терминале и убедились, что у вас установлен стабильный выпуск Ruby 1.9.3 или новее, вы можете выполнить следующую команду, чтобы установить гем Sass:
gem install sass Затем вы можете убедиться, что Sass работает, выполнив проверку версии для Sass:
sass -v
Это должно показать вам, что Sass установлен и работает, и сказать, какая у вас версия. Все, что выше 3.3, должно отлично работать для этого урока.
Основы Sass
Использовать Sass вручную так же просто, как передать имя файла .sass или .scss, содержащего некоторый код, написанный на Sass, команде sass , а также место назначения, куда вы хотите, чтобы компилированный CSS шел. Например, откройте текстовый редактор и напишите следующее в новом файле.
.special background: #990000 p color: #ffffff
Вы увидите, что этот вид выглядит как CSS, но он минимален. Вместо фигурных скобок в синтаксисе .sass (который является старым, но все еще действительным, синтаксис Sass) используются вложенные отступы. Вложенность селектора p внутри селектора .special указывает на то, что цвет будет применен только к элементам <p> которые являются .special элементов .special .
Вы можете использовать либо табуляции, либо пробелы, но убедитесь, что отступы совпадают. Sass с использованием синтаксиса .sass особенно .sass отступов. Так как Sass использует форматирование текста, чтобы отразить уровень вложенности для селекторов, он не будет правильно компилироваться, если есть дополнительное место, где он не ожидается.
Сохраните файл как «test.sass» в вашем текущем каталоге. Затем выполните следующую команду в командной строке:
sass test.sass test.css
Это должно создать файл test.css в том же каталоге с простой версией вашего Sass-кода, скомпилированной с помощью CSS, которая будет выглядеть примерно так:
.special { background: #990000; } .special p { color: white; }
Видишь, что там сделала Сасс? Помимо добавления фигурных скобок и точек с запятой, Sass интерпретировал вложение этого p элемента в селектор .special и создал новый селектор, ограничив определения свойств только p элементами, которые находятся внутри элемента с классом «special». Форматирование может быть немного странным, но любой браузер будет правильно интерпретировать этот CSS. (И да, есть разные способы настроить Sass на форматирование вывода CSS ).
Выбор синтаксиса
Минимальный синтаксис собственных файлов .sass изящен, но он не обязателен. После введения Sass был разработан новый синтаксис, который позволял разработчикам писать свой предварительно скомпилированный код в более знакомом CSS-подобном синтаксисе под названием SCSS (Sassy CSS). Тот же самый код, который мы использовали ранее, мог быть написан таким образом и сохранен в файле .scss, и компилятор Sass обработал бы его так же:
.special { background: #990000; p { color: #ffffff; } }
Таким образом, этот код можно сохранить как test.scss , и отправка его через компилятор Sass приведет к функционально идентичному CSS- test.sass , сгенерированному из файла test.sass .
С синтаксисом .scss , в отличие от синтаксиса .sass , отступ не является обязательным (хотя он по-прежнему полезен для облегчения чтения вашего кода). Возможность писать в синтаксисе .scss (который допускает регулярный CSS) улучшила кривую обучения и сделала Sass настолько популярным среди веб-разработчиков.
Автоматическая компиляция в CSS
Никто из разработчиков веб-страниц не хочет помнить, что нужно переходить и компилировать их Sass в CSS каждый раз, когда они вносят изменения в стили. Чтобы сделать этот громоздкий процесс более удобным, вы можете задать Sass набор предпочтений, определяющих, где вы хотите генерировать ваши CSS-файлы, и настроить его для работы в фоновом режиме и «просматривать» ваши каталоги .sass и / или. scss файлы, компилируя их в собственный CSS автоматически каждый раз, когда вы сохраняете изменения.
Находясь в том же каталоге, где у вас есть тестовые файлы, попробуйте выполнить эту команду через терминал:
sass --watch test.sass:test.css
Затем перейдите в файл test.sass и внесите изменения, например:
.special background: #990000 p color: #ccccff
Здесь значение color было изменено. Вы почти сразу сможете увидеть свой файл test.css и увидеть обновления, отображенные там:
.special { background: #990000; } .special p { color: #ccccff; }
Вы также можете передать набор каталогов в опцию --watch , и все файлы внутри этих каталогов будут управляться автоматически.
Установив и запустив Sass, вы получите ряд полезных функций Sass, которые могут улучшить управление CSS. Помимо гибкости вложенного синтаксиса, вы получаете переменные, вычисления, условные выражения, импорт, расширение, наследование и множество других функций и функций.
Sass стал очень популярным препроцессором для CSS, и в дополнение к очень тщательному сайту документации , есть много отличных руководств о том, как начать использовать Sass .
Но вам не нужно ограничивать себя базовым Sass …
Смешивание в некотором бурбоне
Одна из вещей, которая делает Sass таким мощным, — это расширяемость, которую он предлагает. После того как в вашем проекте есть Sass, вы можете создавать свои собственные миксины, чтобы упростить ваш личный рабочий процесс и автоматизировать утомительный и повторяющийся код. Креативный разработчик может сделать так, чтобы поддержка Sass была самым замысловатым или самым элегантным подходом к дизайну CSS.
Создание библиотеки пользовательских инструментов для Sass может быть как практичным, так и забавным, но есть некоторые очевидные удобства, которые вы, возможно, не захотите или вам придется создавать с нуля. К счастью, существует ряд библиотек, которые помогают поддерживать разработчиков Sass. Один из моих фаворитов от дружелюбных ребят в thinkbot , которые предоставили всем нам облегченную расширяемую подключаемую библиотеку для Sass под названием Bourbon , которая предоставляет вам множество базовых инструментов, написанных на Sass.
Там, где Sass не работает, Bourbon дополняется такими функциями, как кросс-браузерный префикс поставщиков, миксины для расширенных функций CSS, таких как свойства анимации и изображения границ, функции для выполнения вычислений, включая градиенты и оттенки цвета, и надстройки, такие как семейный и пуговичный стиль. Bourbon также поддерживает настраиваемые глобальные параметры компиляции, чтобы вы могли точно настроить поведение своего приложения.
Установка Бурбона
Если снова предположить, что вы будете работать в командной строке с Ruby 1.9.3 или более поздней версии, а Sass уже работает, установка Bourbon почти так же проста, как и установка Sass. Просто введите следующую команду, чтобы добавить Bourbon в вашу систему:
gem install bourbon
Чтобы увидеть, как работает Bourbon, убедитесь, что вы находитесь в том же каталоге, что и ваши тестовые файлы сверху, и введите следующую команду:
bourbon install
Это создаст подкаталог со всеми основными файлами Bourbon. Вы должны относиться к этому подкаталогу как к сторонней библиотеке, что означает, что входить и изменять файлы внутри — это плохая идея. Вместо этого вы должны импортировать их с помощью Sass, а затем поиграть с мощными инструментами, которые они предоставляют в вашем собственном коде.
Если вы оставили приведенную sass --watch test.sass:test.css запущенной, вы можете заметить, что выполнение этого не sass --watch test.sass:test.css к обновлению вашего CSS. Это потому, что Bourbon — это библиотека для Sass, которую нужно вызывать прямо из вашего основного .sass или .scss .
Чтобы импортировать Бурбон, просто отредактируйте ваш файл .sass чтобы он выглядел так:
@import bourbon/bourbon .special background: #990000 p color: #ccccff
На этот раз при сохранении вы увидите, что код Sass перекомпилирован. Но выходной CSS будет точно таким же. Это одно из преимуществ Sass и Bourbon; Вы можете импортировать всю библиотеку, и в вашем коде ничего не изменится, если вы явно не вызовете некоторые из специальных функций Бурбона.
Ваш первый бурбонский миксин
Sass позволяет вам определять нативные функции, называемые mixins , которые могут принимать аргументы. Вы можете вызывать их в своем коде Sass с @include директивы @include . Бурбон делает свое волшебство, включая хороший ассортимент готовых миксов. Например, одна из замечательных функций, которые вы получаете бесплатно из коробки с Bourbon, — это возможность генерировать специфичные для браузера префиксы CSS без всего дублирующего кода.
С помощью Sass и Bourbon вы можете применить простой миксин, чтобы добавить поддержку браузера для более сложных функций CSS с помощью одной строки Sass:
@import bourbon/bourbon .special @include linear-gradient(#990000, #000000) p color: #ccccff
Ваш обновленный файл CSS теперь будет содержать несколько дополнительных строк, отражающих дополнительную работу, которую проделал Бурбон, чтобы помочь сделать ваши префиксы вендоров для поддержки линейного градиентного фона, и изящно ухудшен для браузеров, которые изначально не поддерживают CSS-градиенты:
body { background-color: #990000; background-image: -webkit-linear-gradient(#990000, black); background-image: linear-gradient(#990000, black); } body p { color: #ccccff; }
Учиться больше
На этом этапе я показал вам, как установить Sass и Bourbon, как скомпилировать ваши файлы Sass в CSS и как импортировать и использовать дополнительные функции Bourbon. Следующий шаг — изучить документацию по Sass и Bourbon и посмотреть, какие функции предлагает каждое из них, что может упростить ваш рабочий процесс и повысить производительность.
Кроме того, в Интернете есть ряд отличных ресурсов для изучения ежедневного использования Sass, в том числе примеры таких гуру Sass, как Уго Жираудель , ресурсы, такие как The Sass Way , еженедельная новостная рассылка и активное сообщество Sass с конференциями и мероприятиями, где Вы можете узнать больше. Есть даже отличная книга Дэна Сидархолма под названием Sass для веб-дизайнеров, которая является отличным способом начать или развить то, что мы здесь обсуждали.
Не так много онлайн-ресурсов, посвященных Бурбону, но вы можете посмотреть это видео и сайт Thoughtbot , которые демонстрируют глубину и мощь этой удивительной библиотеки.
Комбинация Sass и Bourbon — это мощный набор инструментов, который можно добавить в свой репертуар, и я даже не коснулся некоторых дополнительных улучшений Bourbon, таких как Neat и Bitters . Если вам интересно, оставьте мне свой отзыв и дайте мне знать, о чем вы хотели бы узнать больше.