Здравствуйте! Сегодня я начинаю цикл статей о препроцессорах CSS. И начать я хотел бы с обзора программы Koala, которая помагает компилировать код с LESS или SASS на CSS.
Koala - это кроссплатформенная программа для компиляции Less, Sass, Compass и CoffeeScript. Работает на Win, Mac OS и Linux.
Программа бесплатна и живет на благотворительные пожертвования. Впрочем, когда я попытался перевести ребятам на немного денег пару лет назад, сделать этого не получилось. Разработчики находятся в Китае, а Paypal там работает только на отправку денег. Тем не менее, программа от этого хуже не стала. Разберемся подробнее.
Преимущества
- Поддержка нескольких языков: Koala работает с Less, Sass (*.scss), CoffeeScript и фреймворком Compass. Кроме того, она может компилировать и обыкновенные CSS и JS, не связанные с препроцессорами.
- Компиляция в реальном времени: Koala отслеживает изменения файлов и автоматически компилирует их. Все действия происходят в фоновом режиме и не требуют вмешательства разработчика.
- Настройка компиляции: Можно указывать разные компиляторы для каждого выбранного файла. Впрочем, это вам вряд ли понадобится.
- Компрессия: Koala умеет автоматически сжимать код после компиляции. Эту функцию по желанию можно не использовать.
- Сообщения об ошибках: Если программа встретила ошибку в коде при компиляции, она покажет уведомление. Если ошибок нет, просто будет пересоздан результирующий файл.
- Кроссплатформенность: Koala работает на Windows, Mac и Linux.
Интерфейс
Основное окно программы содержит все активные проекты (слева) и основные элементы управления. Как видите, интерфейс минималистичен, разобраться в нем можно за пару минут.
Основные элементы управления всегда на виду. Вот для чего они нужны:
При переключении типов файлов из общего списка останутся только файлы выбранного типа.
Настройки SASS и LESS
В настройках есть приятные вещи. Возьмем вкладку с настройками Sass:
В два клика Koala начнет сохранять ваши Sass-файлы в CSS, никаких дополнительных плагинов устанавливать для Sass не потребуется.
Koala умеет автоматически добавлять кроссбраузерные префиксы для css-свойств, сохранять комментарии. В типе файла CSS я всегда рекомендую выбирать compressed, так его вес будет минимальным, а для удобства разработки оставлять включенными Source maps.
Автопрефиксы - это автоматическое добавление префиксов для поддержки свойств CSS3 в браузерах устаревших версий.
Например, для скругления углов в 3 пикселя вам будет достаточно написать:
Border-radius: 3px;
…а после работы автопрефикса получите:
Webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
Кроме того, настройки для каждого типа файлов доступны в панели справа. Для этого выберите файл в списке и в правой части откроются настройки для файлов этого типа.
Настройки JavaScript и CoffeeScript
Для JS есть всего две настройки:
- Compress - всегда включайте, чтобы полученный js-файл сжимался.
- Preserve copyright comments
Для CoffeeScript в 99% случаев вы оставите настройки по умолчанию, поэтому останавливаться на них нет смысла.
Где скачать
Скачивайте программу с официального сайта разработчиков - koala-app.com . Там есть отдельные ссылки для Linux, Mac, Ubuntu.
В итоге
В итоге я могу назвать Koala самым простым и правильным решением для разработчика, кому не нужны сложные настройки и функции. Если вам для работы нужен графический интерфейс, компиляция только Sass/Less/CSS и нежелание копаться в командной строке, тогда Koala - ваш выбор.
Koala хорошо подходит для начинающих разработчиков или тех, кто делает небольшой проект и не хочет разворачивать полную версию Gulp или Grunt.js.
Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.
И так, чем хорош препроцессор и конкретно Sass? Я сразу скажу, что есть и другие, такие, как Less, Stylus и др. Все они работают по одному принципу, но у каждого свои особенности. Sass получил большую популярность у профессионалов в следствие чего изучение значительно упрощается. Просто чем популярнее технология, тем больше сообщество и тем более развернута документация.
Препроцессоры созданы для того, чтобы избавить разработчика от большинства рутинных задач при написании кода, тем самым повысив скорость и качество работы. Помимо CSS-препроцессоров существуют также и HTML-препроцессоры, например, Pug (Jade).
Структура статьи
Документация
Разработчиком Sass является француз Hugo Giraudel, проживающий в Германии с определенного времени. Естественно документация на английском языке, но я лично в ней неплохо ориентируюсь (важно знать технический английский). Но также есть перевод и на русский. Я бы советовал все же английскую версию, это для того, чтобы привыкать и изучать все глубже английский. Но русская тоже ничем не хуже.
- Английская документация: http://www.sass-lang.com
- Русская документация: https://sass-scss.ru
Компиляция Sass в Css
В качестве программного обеспечения для компиляции Sass в Css я использую плагин Sass для таск-менеджера . Вообще Sass является приложением (Gem) языка Ruby. Поэтому, если вы хотите обойтись без Gulp, то для компиляции в Css вам необходимо будет установить платформу языка программирования Ruby. Я не буду сейчас показывать как это делается, можете почитать об этом на официальном сайте .
Синтаксис - Sass, Scss
Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.
Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.
Если говорить о Sass, то его структура кода строится на основе отступов (ведь фигурных скобок в нем нет) и здесь следует быть внимательным, так как в качестве отступа может выступать, как табулятор (TAB — 4 пробела), так и обычные пробелы (обычно это двойной пробел). Я всегда использую табулятор.
Помните! Если вы используете табулятор в качестве отступа, то пробелы следует исключить, чтобы везде было одинаково. И наоборот — если используете пробелы, то табулятор следует исключить. Иначе, компилятор выдаст ошибку.
Sass
.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22pxScss
.maincontent { .main-title { font-size: 30px; font-weight: 700; margin: 0 0 30px; } .description { margin-bottom: 30px; p { color: #444444; font-size: 16px; line-height: 22px; } } }В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.
Упрощаем жизнь с помощью Sass
Вложенность правил
Вот чем мне приглянулся Sass с самого начала, так это как раз вложенностью css-правил одних в другие. Это здорово экономит время, а код получается структурируемым и легкочитаемым. Например, если мы хотим написать стили элементам определенного родительского контейнера, то нам в Css необходимо каждый раз указывать родительский класс, например вот так:
Main .title { font-size: 30px; color: #444; } .main .subtitle { font-size: 20px; } .main .description { font-size: 14px; margin-bottom: 30px; }
То есть мы везде указываем родительский класс.main , а это в свою очередь не совсем удобно. Используя Sass, можно записать следующим образом:
Scss
.main { .title { font-size: 30px; color: #444; } .subtitle { font-size: 20px; } .description { font-size: 14px; margin-bottom: 30px; } }Sass
.main .title font-size: 30px color: #444 .subtitle font-size: 20px .description font-size: 14px margin-bottom: 30pxСогласитесь так смотрится намного аккуратнее, да и писать код можно быстрее, ведь родительский класс.main мы пишем всего один раз. Если вы хотите повторить за мной, не устанавливая Ruby и всякое подобное ПО можно воспользоваться онлайн-компилятором для демонстрации.
Вложенные свойства
Помимо вложенности правил в Sass существует возможность вложенности свойств. Например, вот как можно записать значения margin:
Sass
.main .title margin: top: 10px right: 15px bottom: 10px left: 15pxCss
.main .title { margin-top: 10px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px; }Привязка к селектору или конкатенация - знак &
Написание нашего кода можно ускорить и сделать его еще компактнее, применив конкатенацию (соединение) посредством символа — & . Как это работает? Например, у нас есть такие классы, как: .main-title , .main-subtitle , .main-description . В Sass данные классы можно записать следующим образом:
Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px
Main-title { font-size: 30px; color: #444; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }
С помощью символа & мы соединяемся к корневому классу, то есть в данном случае нет необходимости постоянно повторять корень.main . В тоже время следует иметь ввиду, что мы не создали дочерние элементы.
/* Ссылка */ a { color: red; } a:hover { color: blue; } /* Псевдоэлементы */ .main::before { content: ""; display: block; font-size: 20px; } .main::after { content: ""; display: block; font-size: 30px; }
Иногда нужно указать цепочку селекторов до текущего элемента. Можно конечно вынести его в корень, но чтобы не нарушать вложенность можно написать следующим образом:
Main .container & width: 700px
Container .main { width: 700px }
Переместив & после селектора, мы поменяли порядок стыковки, т. е. класс.container в данном случае является родительским.
Привязка к родительскому селектору, но на уровнь выше
Выше для примера я демонстрировал Sass код:
Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px
Теперь представьте, что в блоке.main-title существует еще один элемент которому нужно явно указать стили, используя всю цепочку родителей. Я долго время просто указывал корневое название (в данном случае — .main), но это не очень удобно. Я стал ковырять документацию Sass и нашел решение. На самом деле все просто — нам необходимо объявить ссылку на родителя и использовать ее, там, где нужно.
Вот так я делал раньше:
Main &-title font-size: 30px color: #444 .main__icon // указываем корень.main, иначе, если использовать & будет стыковка к.main-title color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px
А теперь можно сделать так:
Main $self: & // ссылка на родителя &-title font-size: 30px color: #444 #{$self}__icon // вместо & используем ссылку на родителя color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px
Если заметили мы объявили ссылку на родителя — $self: & . Мне это чем-то напоминает ссылку на объект (this), который вызвал событие в javaScript. Теперь в нужно месте мы можем просто его вызвать #{$self} . Вот оказывается как все просто, а я голову ломал и думал, что нет решения этой проблемы в Sass.
Main-title { font-size: 30px; color: #444; } .main-title .main__icon { color: #444; width: 20px; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }
Шаблоны-заготовки
Зачастую бывает такое, что несколько элементов имеют одну базу стилей, но отличаются между собой лишь несколькими правилами. Возьмем к примеру кнопки. Если брать один размер кнопок, то они могут отличаться между собой только цветом: красные, зеленые, серые и т.д. Если использовать чистый Css, то придется в базовых стилях через запятую указывать все цвета кнопок или создать базовый класс. Но в Sass это делается намного проще:
%button background-color: #666 border: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px height: 40px .button-green @extend %button background-color: green border-color: green .button-red @extend %button background-color: red border-color: red
Button-green, .button-red { background-color: #666; border: 1px solid #666; padding: 0 20px; font-size: 15px; line-height: 40px; height: 40px; } .button-green { background-color: green; border-color: green; } .button-red { background-color: red; border-color: red; }
Шаблоном выступает в данном случает селектор %button (об этом говорит знак — %). Это удобно тем, что сам селектор шаблона нигде не участвует, а его стили наследуются другими селекторами посредством директивы — @extend . Данный шаблон можно использовать сколько угодно раз, сокращая тем самым количество кода.
SassScript
В Sass, как и в языках программирования имеют место быть такие возможности, как: создание переменных, арифметические операции (сложение, вычитание, деление, умножение и т.д.), итерации (циклы), функции (миксины) и многое другое. То есть Sass это своего рода некий язык программирования, который призван опять таки упростить написание кода и ускорить работу в разы.
Переменные
Переменная в Sass начинается со знака $ , а имя пишется латиницей, например: $color . Следует отметить, что знаки: «— » и «_ » взаимозаменяемы. К примеру, если назвали $color-red , то можно вызвать и $color_red . Определяется переменная следующим образом: $название: значение , например: $color: #f6f6f6 .
Переменная объявленная вне каких либо уровней вложенности, доступна глобально, т.е. можно использовать везде. Если же вы определили переменную в каком либо уровне вложенности селектора, то она будет доступна только на данном уровне. Чтобы она работала глобально во всем документе необходимо указать ключевое слово !global .
Title $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size
Вообще, переменные это замечательная вещь, стоит объявить и занести значение, а далее можно использовать сколько угодно и где угодно. Например, мы можем определить цвета, дав им определенные имена, размер шрифта, семейство шрифтов и т.д. и вообще любые значения.
Директивы
@extend
Данную директиву мы затронули выше, когда изучали шаблон-заготовку. Закрепим еще раз знания. С помощью @extend мы можем скопировать правила любого селектора. Например, при верстке может быть так, что элемент «А » и элемент «Б » могут быть схожи по внешнему виду. В данном случае можно написать правила элементу «А», а для «Б» просто скопировать стили элемента «А», слегка переопределив нужные свойства.
Block_a background-color: #cccccc border: 5px solid #999999 padding: 20px font-size: 30px height: 150px width: 150px .block_b @extend .block_a padding: 15px
Block_a, .block_b { background-color: #cccccc; border: 5px solid #999999; padding: 20px; font-size: 30px; height: 150px; width: 150px; } .block_b { padding: 15px; }
В данном примере мы сверстали 2 одинаковых квадрата. У квадрата «Б» мы переопределили только отступ padding: 15px . Вот так работает @extend. Я довольно часто пользуюсь данной директивой.
@import
Данная директива позволяет объединять несколько файлов стилей в один. Это очень удобно, тем более, если проект большой. Не стоит путать с директивой, которая существует в Css — @import . В Css обязательным атрибутом является — url() .
На самом деле удобнее писать стили в разных файлах и предназначение у каждого свое. Например, весь каркас страницы можно разделить на регионы: header.sass, sidebar.sass, footer.sass. Собрать все можно в главном файле main.sass, как раз используя @import. Файлы регионов можно указать также через нижнее подчеркивание в начале имени файла, например так: _header.sass, _sidebar.sass, _footer.sass. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.
Простой импорт
@import "header.sass" @import "sidebar.sass" @import "footer.sass"
Импорт фрагментов
@import "header" @import "sidebar" @import "footer"
Файлы фрагментов могут быть с расширениями: *.sass , *.scss или *.css . Например, главный файл может быть с расширением *.sass , а шапка сайта, к примеру с расширением *.scss . То есть не важно какое у вас расширение главного файла. Следует отметить, что при импорте переносятся все переменные и миксины (о них поговорим ниже) в главный файл, в который происходит импорт.
Также, можно указать импорт нескольких файлов через запятую: @import «header», «sidebar», «footer».
Имейте ввиду, что импорт происходит в том месте, где вы указали директиву @import . Обычно это делают в начале документа.
@at-root
Директива @at-root говорит сама за себя и если переводить на русский, то будет звучать так — «от корня» . Иными словами мы переносим селектор в корень, отменяя цепочку родительских селекторов. Тут конечно можно задать вопрос — «А зачем нужна эта директива, если можно перенести селектор в корень в ручную?». Ответ прост — удобство написания кода, не нарушая структуру. Когда вы научитесь работать с Sass в полной мере вы это поймете.
Main &-title font-size: 30px color: #444 @at-root .main__icon color: #444 width: 20px
Main-title { font-size: 30px; color: #444; } .main__icon { color: #444; width: 20px; }
Управляющие директивы и выражения
Директива @if
Данная директива выполняет стили, если выражение, заключенное в ней возвращает любое значение кроме false и null .
$color: green .header @if $color == green background-color: green @else if $color == blue background-color: blue @else background-color: #f6f6f6
Header { background-color: green; }
Те, кто знаком хотя бы с основами языка программирования (например, javaScript или Php) разобраться будет не сложно. Здесь суть та же самая, главное знать синтаксис написания кода.
Директива @for
В языке программирования (опять же в Javascript или Php) с помощью For можно задать цикл. В Sass данная директива выполняет тоже самое — создает цикл. Для каждой итерации (повторения) используется переменная-счетчик, которая изменяет данные вывода.
Директива имеет 2 формы написания: 1. @for $var from <начало> through <конец> и 2. @for $var from <начало> to <конец> . Если вы хотите, чтобы последняя цифра была включена в цикл, то используйте «through «. Давайте рассмотрим пример:
@for $i from 1 to 6 .elem-item-#{$i} background-image: url("images/image-#{$i}.jpg")
Elem-item-1 { background-image: url("images/image-1.jpg"); } .elem-item-2 { background-image: url("images/image-2.jpg"); } .elem-item-3 { background-image: url("images/image-3.jpg"); } .elem-item-4 { background-image: url("images/image-4.jpg"); } .elem-item-5 { background-image: url("images/image-5.jpg"); }
Для указания конечного значения я использовал ключевое слово «to «. При таком раскладе цикл заканчивается на цифре — 5 . Обратите внимание насколько компактным выглядит код Sass.
Директива @each
Директива @each также, как и @for выводит значения в цикле и удобен тем, что помимо цифр можно перебирать конкретные значения. Давайте возьмем вышеприведенный цикл и изменим его на какие либо значения.
@each $bgItem in animal, lake, sea, landscape, nature .elem-item-#{$bgItem} background-image: url("images/image-#{$bgItem}.jpg")
Elem-item-animal { background-image: url("images/image-animal.jpg"); } .elem-item-lake { background-image: url("images/image-lake.jpg"); } .elem-item-sea { background-image: url("images/image-sea.jpg"); } .elem-item-landscape { background-image: url("images/image-landscape.jpg"); } .elem-item-nature { background-image: url("images/image-nature.jpg"); }
В данном случае не создается переменная-счетчик, а количество итераций зависит от количества созданных значений после ключевого слова «in «. Значения выводятся через переменную (в данном примере — $bgItem), название которой может быть произвольным.
Миксины (функции)
Миксины (примеси) — это своего рода функция, как в языке программирования, которая призвана избавить от повторяющегося кода. Миксины могут содержать целые фрагменты стилей, разрешенные в Sass. Давайте рассмотрим пример, для большей наглядности.
@mixin align-center position: absolute top: 50% left: 50% transform: translate(-50%, -50%) .container @include align-center
Создается миксин директивой @mixin , далее через пробел следует имя миксина, а также опционально передаваемые параметры. Сразу отмечу, что знаки дефиса (-) и нижнего подчеркивания (_) в имени миксина взаимозаменяемы. Миксин может содержать в себе не только правила, но и селекторы. Выше я привел пример элементарного миксина без параметров.
Вызывается миксин директивой @include и далее через пробел указываем имя созданного миксина. В примере выше — это центрирование блока по оси X и по оси Y с помощью абсолютного позиционирования. Если такое приходится применять часто, то согласитесь легче вызвать просто миксин, нежели писать стили центровки снова и снова.
Теперь давайте рассмотрим миксин с параметрами (аргументами).
@mixin border($width, $color) border: width: $width style: solid color: $color .square @include border(2px, #ccc)
Square { border-width: 2px; border-style: solid; border-color: #ccc; }
Как видим, после названия миксина в скобках мы задаем аргументы, в данном случае — это ширина бордюра и цвет. Это простейший миксин, который я привел для наглядности. На практике же можно встретить более сложные миксины с использованием различных условий и переменных. Но не будем сейчас все усложнять, надо всегда начинать с чего-то малого и простого, а потом уже двигаться по мере продвижения вверх.
На этом я хочу завершить свой небольшой обзор препроцессора Sass. Почему небольшой? Да потому что это далеко не все, что я вам поведал. Вообще, используя вышеизложенное, вы можете смело уже сейчас начать пользоваться Sass вместо Css. Более подробнее вы сможете изучить Sass, прибегнув к документации , которую я приводил выше.
Ну что ж, всем спасибо за внимание! Как всегда, вопросы задаем в комментариях и подписывайтесь либо на телеграм канал , либо на рассылку по email (форма в сайдбаре справа), чтобы не пропустить ничего интересного.
До встречи в других моих постах…
Sass — это расширение CSS , которое добавляет в него вложенные правила, переменные, примеси, функции и многое другое. Его использование облегчает задачу создания CSS . После обработки кода Sass вы получаете надлежащим образом отформатированный CSS -код.
Compass — это CSS -фреймворк с открытым исходным кодом, что позволяет использовать CSS3 и популярные шаблоны проектирования. Compass работает исключительно с Sass , что способствует написанию более чистого и быстрого CSS -кода.
В этой статье приведена подборка полезных инструментов для работы с Sass и Compass , которые помогут вам быстро и просто создавать динамические веб-приложения.
1. Compass.app
Compass — это фреймворк, который позволяет намного проще создавать и поддерживать стили и разметку. Используя Compass вы будете генерировать стили в Sass , вместо обычного CSS . Compass.app — это приложение с интерфейсом в виде панелей меню, работающее только с Sass и Compass .
Его применение позволяет дизайнерам очень просто компилировать стили, не используя интерфейс командной строки. Приложение Compass.app написано на Java (JRuby ) и работает на Mac , Linux и РС . Чтобы использовать его, вам не нужно устанавливать среду Ruby .
2. Scout
Scout — это кроссплатформенное приложение, которое запускает Sass и Compass через встроенную среду Ruby , что позволяет легко управлять всеми вашими Sass -проектами. Теперь вам не придется беспокоиться об установке Ruby или заниматься другими техническими вопросами.
3. Codekit
Codekit — это мощный компилятор, который автоматически обрабатывает при сохранении файлы Sass , Compass , Less , Stylus , Jade , Haml , Slim , CoffeeScript и Javascript .
Применение интерактивного обновления окна браузера, оптимизации изображений и быстрой отладки позволяет сделать работу с Compass и Sass чрезвычайно простой. Данное приложение также поддерживает возможность коллективной/командной работы над проектом и помогает уменьшить время загрузки ресурсов с помощью объединения и минимизации файлов.
4. Archetype
Archteype — это Compass/Sass фреймворк для создания настраиваемых, совместимых шаблонов и компонентов интерфейсов. Archteype поставляется с обширной документацией и использует оригинальный синтаксис языков программирования.
5. Susy
Susy предоставляет пользователям адаптивные сетки для Compass . Тем самым заполняя пробел, возникший после того, как из Compass сетки были удалены. Вы можете быстро добавлять для новых макетов контрольные точки медиа-запросов или задавать свои собственные параметры, используя массив сеток Susy . Данный инструмент позволяет за считанные минуты создать небольшой сайт или масштабируемую библиотеку сеток для использования в крупных проектах.
6. The Sassway
Sass Way предлагает обзор последних новостей и событий в сфере разработки CSS с помощью Sass и Compass . На ресурсе публикуются статьи, загружаемые ресурсы и учебные пособия, которые пригодятся как новичкам, так продвинутым пользователям.
7. Sassaparilla
Sassaparilla позволяет, используя Sass и Compass , значительно быстрее запускать адаптивные веб-проекты. Инструмент предназначен в основном для работы с макетами с вертикальной разбивкой элементов.
Он позволяет задавать размеры элементов в пикселях, а во время компиляции они переводятся в Em , что избавляет дизайнеров от необходимости производить сложные математические вычисления. Sassaparilla поддерживает переменные, используемые Sass , например, для определения цвета или других параметров.
8. LivingStyleGuide
LivingStyleGuide Gem — инструмент, предназначенный для упрощения создания руководств по стилям для Sass и Compass . Для того чтобы создать руководство по стилям, просто добавьте к Sass свои комментарии в одном из форматов Markdown .
9. Pondasee
Инструмент Pondasee был разработан, чтобы ускорить процесс создания веб-приложений. Он обладает всеми возможностями и функциями SCSS и Compass , и предназначен для упрощения создания шаблонов.
10. LiveReload
LiveReload встраивается в панель меню и отслеживает все изменения в файловой системе. Как только вы сохраняете файл, он обрабатывается в соответствии с заданными параметрами, и окно браузера обновляется. LiveReload работает с движками SASS , Compass , LESS , Stylus , CoffeeScript , IcedCoffeeScript , Eco , SLIM , HAML и Jade . Он настраивается всего с помощью двух чекбоксов, чтобы вам не пришлось ломать голову над большим количеством опций.
11. Koala
Koala — это GUI -приложение для компиляции CoffeeScript , Compass , Less и Sass , которое делает процесс разработки веб-дизайна более эффективным. Приложение работает на Mac , Linux , и Windows , и включает в себя такие функции, как компиляция в режиме реального времени, поддержка нескольких языков программирования и многое другое.
12. Bootstrap Sass
Bootstrap-Sass — это Sass -версия Bootstrap , которая идеально подходит для разработки Sass -приложений. Инструмент может устанавливаться с Rails , Compass или только с Sass .
13. Forge
Forge — бесплатный набор инструментов, запускаемых из командной строки. Он предназначен для загрузки и разработки в соответствующей среде тем WordPress с использованием таких языков программирования, как Sass , LESS и CoffeeScript .
Forge создает структурированную исходную папку с четкой и простой иерархией (файлы основных шаблонов, SCSS-файлы и опции темы ). При внесении изменений в процессе разработки исходная папка автоматически компилируется в локально установленную систему WordPress .
14. Prepros
Prepros — это приложение, разработанное для упрощения компиляции кода. Оно компилирует коды Sass , Scss , Compass , Less , Jade , Haml и CoffeeScript в режиме реального времени, с автоматическим обновлением окна браузера,. Приложение не имеет зависимостей и имеет такие средства, как встроенный HTTP -сервер, отслеживание файлов в фоновом режиме, уведомления об ошибках и интерактивное включение CSS .
24 марта 2012 в 13:22SCSS - немного практики, часть I
- CSS
Статей про SASS (SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.
Что такое SCSS
SCSS - "диалект" языка SASS . А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, ), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
И тоже самое на SCSS:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Я выбрал SCSS в виду того, что он проще для восприятия коллегам с ним ещё не знакомым. Ещё стоило бы отметить что обычный CSS код вполне вписывается в SCSS синтаксис.
Установка и использование
Для начала нужно установить ruby . После чего нужно установить sass-gem (gem install sass в консоли). Если всё прошло гладко, то теперь вам доступна консольная программа sass . О всех нюансах её использования вы можете прочесть здесь ― sass --help . Я расскажу лишь о двух базовых возможностях:--watch
Если запустить sass с ключом --watch , то программа будет следить за указанными вами файлами. В случае их изменения, она автоматически пересоберёт все необходимые css-файлы (не все вообще, а только связанные с изменёнными).Предположим, что у вас есть следующая структура проекта:
Css
---- scss
------ style.scss
---- style.css
Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass --watch css/scss:css/. . Т.е. sass --watch [что]:[куда] .
--update
Если вам нужно единожды обновить css-файлы, то в место --watch применяем --update . Никакой слежки проводится не будет, так же как и проверок на необходимость обновления.Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.
Практика
Итак, мы подошли к самому главному. Начнём с @import .@import
Изначально, до использования SCSS, весь CSS код движка, с которым мне по долгу службы приходится работать, находился в 1-ом огромном style.css файле. Моя IDE (Netbeans (кстати, вот плагин для подсветки синтаксиса)) работала с ним с существенными тормозами. Разбивать же его на множество файлов поменьше, и, при необходимости, склеивать их в 1 ― никто не хотел. SCSS решает этот вопрос автоматически.Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.
Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем
@import "template"; // шаблоны
В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая "схема" более производительна.
@вложенность
Одна из самых желанных "фич" для CSS ― вложенность селекторов. Пример: #some {
border: 1px solid red;
.some { background: white; }
}
/* => */
#some { border: 1px solid red; }
#some .some { background: white; }
Ещё пример:
Input {
border: 1px solid gray;
background: white;
& { color: black; }
&.some_class { display: none; }
}
/* => */
input { border: 1px solid gray; background: white; }
input { color: black; }
input.some_class { display: none; }
Символ & равносилен родительскому селектору. Допустим тег
$IE_7: "body.ie_7"; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; }
$variables
Переменные ― удобная штука. Определяются они так: $some: red;
Переменные ― не константы, их можно менять по ходу кода:) Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.
$link: #15157d;
$link_bottom: $link;
$input_font_size: 13px;
$content_bg: #F1F1F1;
$input_color: #4E4D4D;
$input_color_placeholder: #959595;
$text_color: black;
...
Предполагается, что цвет ссылок на сайте ― $link .
A { color: $link; }
span.link {
color: $link;
text-decoration: underline;
}
Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что, внезапно, выясняется, что в некотором модуле contacts , цвет ссылок другой. Есть, как минимум, два пути решения.
$contacts_link: orange;
// код модуля с использованием $contacts_link вместо $link
Второй
$__link: $link;
$link: orange;
// код модуля
$link: $__link;
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.
@математика
Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример:Block {
$block_width: 500px;
padding: 5px;
border: 1px solid black;
width: $block_width - (5px * 2) - (1px * 2);
}
При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.
Ещё пример:
Block {
$count: 10;
$margin_left: 5px;
$all_width: 1000px;
width: $all_width;
.sub_element {
width: ($all_width / $count) - $margin_left;
margin: 0 0 0 $margin_left;
}
}
Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.
А теперь цвета. Цвета можно складывать, перемножать:
Some {
$color: #010203;
color: $color;
border-color: $color - #010101;
&:hover { color: #010203 * 2; }
}
/* => */
.some { color: #010203; border-color: #000102; }
.some:hover { color: #020406; }
Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более
Привет, друзья!
Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.
Класснуть
Плюсануть
Запинить
Спонсор выпуска - хостинг партнер: partnerwp.ruВсе Sass/CSS примеры и настроенный Gulp проект для данного урока вы можете скачать с GitHub .
Sass - это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.
Преимущества Sass
- Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
- Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
- Sass - это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
- Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков - Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
- Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе - упрощенный (SASS) и развернутый CSS-подобный (SCSS).
Когда я только знакомился с CSS препроцессорами, мне, как и многим другим начинающим веб-разработчикам, была не до конца понятна сама идея использования CSS препроцессоров. Зачем делать дополнительную прослойку, использовать какие-то инструменты, усложнять CSS, думал я. Но со временем начал понимать, что изо дня в день написание CSS становилось пыткой, серой рутиной, многие действия приходилось повторять, копировать селекторы, свойства и даже целые блоки CSS кода для достижения необходимого результата. Сегодня, на примерах, я покажу вам, как можно упростить работу, используя препроцессор Sass, разнообразить разработку и даже немного поразвлечься при написании каких-то более или менее сложных функций.
Настройка окружения
В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass ). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте . Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.
Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите . После установки Node.js установите gulp командой "npm i -g gulp" (Windows) или "sudo npm i -g gulp" (Linux, OS X). Почитать: .
Npm i --save-dev gulp gulp-sass
Var gulp = require("gulp"), // Подключаем Gulp sass = require("gulp-sass"); // Подключаем Sass пакет gulp.task("sass", function() { // Создаем таск "sass" return gulp.src(["sass/**/*.sass", "sass/**/*.scss"]) // Берем источник.pipe(sass({outputStyle: "expanded"}).on("error", sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass .pipe(gulp.dest("css")) // Выгружаем результата в папку css }); gulp.task("watch", function() { gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Наблюдение за sass файлами в папке sass }); gulp.task("default", ["watch"]);
Обратите внимание на строку 6 - здесь мы используем один из стилей вывода в результирующий файл: nested - вложенный, по умолчанию; expanded - развернутый; compact - компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed - сжатый. Кроме того, благодаря обработке .on("error", sass.logError) , если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.
У вас должна быть следующая структура проекта в вашей файловой системе:
-
myproject/
-
css/
- common.css
-
sass/
- common.sass
- node_modules/
- gulpfile.js
- package.json
-
css/
Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.
Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/ . Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.
Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp .
После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/ , можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.
Синтаксис Sass
Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass - это синтаксис отступов . Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса - *.sass . Второй вариант - это синтаксис, расширяющий синтаксис CSS , Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом - *.scss .
Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли - скорее всего, ошибка именно в неправильных отступах. Еще важная деталь - если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.
SASS и SCSS синтаксис:
SASS - синтаксис отступов | SCSS - синтаксис расширения |
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color | $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } |
Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import , например, если вы скачали файл carousel.scss , то можете подключить его в ваш main.sass строкой @import "carousel" . Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass , где x.x - это номер заголовка примера из данной статьи.
Мы будем использовать синтаксис отступов.
1. Расширение возможностей CSS с помощью Sass
1.1 Правила вложения
Sass дает разработчикам замечательную возможность использовать вложение одних CSS правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.
1.2 Привязка к родительскому селектору
Если вы хотите расширить селектор, не создавая нового правила, вы можете привязать к готовому селектору дополнительные селекторы, используя знак & . Внешне это выглядит как создание дочернего селектора в иерархии, но с использованием & , мы расширяем именно родительский селектор, а не создаем дочерний.
Обратите внимание на правило body.firefox & , которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце & .
Кроме того, привязку к родителю можно использовать для создания составных селекторов:
1.3 Вложенные свойства
Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin -top, margin -bottom, margin -left, margin -right имеют общую основу margin и могут быть разбиты на вложения следующим образом:
1.4 Селекторы-шаблоны
Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend .
2. SassScript
SassScript позволяет значително расширить возможности Sass за счет использования пользовательских переменых, арифметических и прочих функций. SassScript может быть использован для автоматической генерации новых селекторов и свойств.
2.1 Переменные в Sass
Это действительно замечательная возможность - определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение .
2.2 Операции с числами и строками + интерполяция
Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.
Кроме того, в Sass есть возможность конкатенировать (соединять) строки.
Как видим из примера $summ: 10 + 20 / 2 , соблюдается приоритет в выполнении арифметических операций - сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px , мы получим 20px .
Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке.
Интерполяция - это получение нового значения, используя другие.
Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря "интегрированию" в значение другой переменной, посредством конструкции #{} , например:
Вы не можете просто взять и вставить в строку переменную, без использования интерполяции, как например, это можно сделать в PHP, в двойных кавычках. Обязательно используйте интерполяцию в переменные.
2.3 Операции с цветами
Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.
Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.
3. Директивы и правила
3.1 @import
Вы можете импортировать в ваш Sass файл sass , scss и css файлы с помощью директивы @import , при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.
@import сработает как обычный CSS @import, если:
- в пути к файлу присутствует http:// ;
- файл вызывается через url() ;
- или в импорте присутствуют медиапараметры.
Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass , *.scss или *.css .
Давайте рассмотрим некоторые примеры.
Следующие файлы импортированы не будут :
Следующие файлы будут импортированы:
Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение.css
Возможен импорт нескольких файлов, через запятую: @import "header", "media" .
Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import "header" .
Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import . Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:#main @import "example"
3.2 @at-root
Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:
Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации .
4. Выражения
Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.
4.1 Директива @if()
Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:
4.2 Директива @for
@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.
Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.
4.3 Директива @each
Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each :
4.4 Директива @while
@while циклично выводит блоки стилей, пока выражение является true .
5. Миксины
Миксины - блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin , после объявления должно быть указано имя миксина. Вызывается миксин директивой @include , которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, будет полезно.
Сразу отвечу на вопрос - как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp . Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.
На сегодня всё. Спасибо за внимание!