15 полезных инструментов Sass и Compass


Оглавление (нажмите, чтобы открыть):

Что выбрать — Compass или Bourbon?

June 09, 2014

Время от времени в Twitter, Reddit или StackOverflow возникает такой вопрос.

Почти каждый, кто работал с Sass хотя бы раз задавал его себе — что выбрать, Compass или Bourbon?

Оба проекта Compass и Bourbon являются фреймворками под Sass. Sass, как вы помните, является препроцессором CSS, не правда ли? Хорошо. Точно также, как если бы вы имели дело с jQuery или Backbone при работе в JavaScript, использование фреймворка для Sass облегчает работу с последним.

В этой статье я выскажу свое мнение по поводу использования Compass или Bourbon. Но, прежде всего, нужно сделать небольшой экскурс в историю.

История Compass и Bourbon

Compass заявляет о себе как о CSS фреймворке под Sass. Он поддерживается Chris Eppstein, одним из двух разработчиков Sass. Compass — это наполовину Ruby и наполовину Sass, он представляет из себя полный набор миксинов и инструмент под Sass. Более подробно о нем позже.

С другой стороны, Bourbon создан на Sass и для Sass великолепной командой разработчиков Thoughtbot. Если верить домашней странице проекта, Bourbon — это скорее библиотека, нежели фреймворк; простая и легковесная библиотека миксинов под Sass.

В итоге мы имеем с одной стороны Ruby/Sass фреймворк, а с другой стороны мы имеем библиотеку Sass. Совершенно разные вещи, не правда ли?

Миксины Compass и Bourbon

Если спросить пользователя Compass/Bourbon, для какой цели он использует данный инструмент, высоки шансы услышать однозначный ответ: для кросс-браузерной совместимости. Возможно, он ответит не совсем так, но ответ будет иметь приблизительно такой же смысл.

Как Compass, так и Bourbon являются огромной коллекцией миксинов для создания CSS3-эффектов; благодаря этим миксинам отпадает необходимость детально вникать в браузерные префиксы или CSS-уловки (CSS hacks).

Ниже показан пример миксина в обоих библиотеках Compass и Bourbon. Как видим, синтаксис и результат работы одинаков:

Тот факт, что Compass и Bourbon имеют одинаковый синтаксис для большинства миксинов, делает переход в использовании с Compass на Bourbon и с Bourbon на Compass очень легким.

Существует одно важное различие между этими инструментами: начиная с Compass 1.0 (вышел совместно с Sass 3.3), Compass получает информацию с сайта Can I Use. Это означает, что почти всегда данный фреймворк получает самую свежую информацию по браузерным префиксам.

В то время как библиотека Bourbon полностью зависит от обновлений, выпускаемых разработчиками данной библиотеки.

Замечание: если вы используете Autoprefixer для решения вопросов браузерных префиксов, то все вышесказанное не относится к вам.

Типографика в Compass и Bourbon

Оба — Compass и Bourbon — предоставляют набор готовых миксинов, переменных и функций для работы с типографикой. Помимо этого, Compass имеет в своем составе полноценный модуль для создания вертикального ритма, включая набор переменных и пару миксинов:

У Compass также есть возможность поддержки единиц измерения с откатом к , если вы используете в качестве значения переменной вместо .

Есть еще целая куча различных настроек, так что если вы являетесь поклонником типографики, Compass сможет ответить всем вашим требованиям.

Библиотека Bourbon обладает менее впечатляющим набором возможностей для работы с типографикой; однако у нее также есть все для быстрого старта разработки. В Bourbon есть не только возможность преобразования пикселей в или , но также такие великолепные функции, как и .

Несмотря на то, что эти функции не имеют прямого отношения к типографике, они отлично подходят для создания вертикального ритма в документе.

Собственно, Thoughtbot решили адресовать вопрос с типографикой другому их проекту (который может использоваться совместно с Bourbon) под названием Bitters. Более подробно о нем будет говориться в конце статьи.

CSS-сетки в Compass и Bourbon

Разве можно назвать фреймворк полноценным, если у него нет системы сеток (grid system), верно?

Фреймворк Compass имеет в составе систему Blueprint Grid, которая, насколько я знаю, не имеет ничего общего со старым фреймворком под названием Blueprint. Стоит сказать, что система Blueprint фреймворка Compass является неполноценной.

Среди всех людей, которые используют Compass и с которыми мне приходилось общаться, только один пробовал работать с Blueprint. Эта система настолько несовершенна, что Chris Eppstein решил убрать ее из Compass начиная с версии 1.0.0 (что соответствует Sass 3.3).

В тоже время библиотека Bourbon предоставляет пару миксинов, с помощью которых можно создать свою собственную сетку. Это функции (не стоит путать с моделью Flexbox) и .

Помимо этого, у команды Thoughtbot имеется своя собственная, отдельная от Bourbon, система сеток под названием Neat, которая позиционируется как легковесный семантичный фреймворк под Sass и Bourbon.

Таким образом, библиотека Bourbon не имеет в своем составе системы сеток (grid system), но можно свободно воспользоваться для этой цели фреймворком Neat.

Если сделать краткий итог по вопросу системы сеток, то можно сказать следующее. Если необходима система сеток с тесной интеграцией Sass-фреймворка, то мое мнение — это использовать связку Bourbon + Neat. Оба проекта были созданы одними и теми же людьми; в обоих проектах была заложена одна и таже основная идея. Это можно сравнить как два кусочка одного пазла.

Примечание переводчика: автор статьи упоминает о стороннем проекте Neat (система сеток) для библиотеки Bourbon. Но почему-то ни словом не говорит о проекте Susy?

Helpers

Одной интересной вещью Sass-фреймворков являются так называемые helpers. Helpers — это предустановленные CSS-правила, которые можно использовать в таблицах стилей как есть, для сокращения времени разработки проекта.

Например, Compass имеет набор helpers для float-clearing (включая несколько способов, как это сделать) и несколько CSS-хаков для старых версий браузера Internet Explorer; сброс стилей (несколько вариантов); несколько способов замещения текста изображением и многое другое.

В Bourbon такие helpers называются add-ons, но они выполняют туже работу; правда, в Bourbon их немного меньше, чем в Compass. Стоит сказать, что команда Thoughtbot включила с состав проекта Bitters большое количество helpers. Как было уже сказано выше, Bitters является сторонним проектом, который имеет прекрасную интеграцию с Bourbon и служит для целей создания типографики в проекте.

Спрайты Compass и Bourbon

Спросите пользователя Compass, почему он из месяца в месяц и из года в год использует эту библиотеку; клянусь, что в ответ услышим что-то о системе создания спрайтов. Это та вещь, которую Compass действительно выполняет хорошо. Благодаря тому, что Compass написан на языке Ruby, он может выполнять некоторые очень интересные вещи с файловой системой. Одной из таких фишек является способность создавать спрайты из коллекции изображений, размещенных в одной папке. Замечательно, не правда ли?

Помимо автомагического способа генерации спрайтов, Compass предоставляет пару интересных функций для доступа к файлу изображений прямо из таблицы стилей, наподобие , и даже для преобразования файла изображения в Base64:

Так как Bourbon построен только на Sass, у него нет возможности доступа к файловой системе и эта библиотека не может выполнить таких вещей, какие может Compass. Поэтому, если вы ищете способ динамического создания спрайтов и не хотите заморачиваться с такими менеджерами задач, как Grunt, Gulp или Ant, то выбор для вас очевиден.

И так, что же получаем в итоге — Compass или Bourbon?

Если спросить об этом меня, то я отвечу: никакой из них. Долгое время я был пользователем библиотеки Compass, покуда не отказался от его применения.

На сегодняшний день я предпочитаю добавлять в создаваемый Sass-проект свои собственные инструменты, нежели использовать весь фреймворк целиком. Но это что касается меня лично. Я думаю, что в большинстве случаев было бы лучше использовать весь фреймворк, по крайней мере, в случае больших проектов.

Поэтому я считаю, что имеется только два критерия, которые должны решать для вас вопрос выбора. И главным среди этих двух критериев является следующий (который вы должны задать самому себе): нужны ли мне возможности по обработке изображений (размеры изображений, спрайты и так далее)?

Библиотека Compass великолепно подходит для этих целей, но она выполняет свою задачу медленно, слишком медленно. Поэтому, если вас не устраивает такой факт, то посмотрите в сторону Bourbon. Эта библиотека замечательно быстрая хотя бы потому, что состоит из одних Sass-миксинов, выполняющих задачи Sass внутри таблиц стилей Sass.

Если вы решили использовать библиотеку Bourbon, то я бы рекомендовал вам также задействовать другие проекты команды Thoughtbot: Neat в качестве системы сеток (grid system), Bitters для типографики и еще не упомянутый до этого момента Refills (который является полной альтернативой фреймворка Bootstrap) с полным набором компонентов, готовый для использования в создаваемом проекте.

Примечание переводчика: в этой статье дан сравнительный обзор двух фреймворков — Compass и Bourbon. Лично для меня было бы интереснее посмотреть практические примеры использования библиотеки Bourbon.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Sass для самых маленьких — подробное руководство

Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.


Все примеры и настроенный проект данного урока вы можете скачать с нашего сайта

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). Почитать: Подробное руководство Gulp.

В папке вашего проекта выполните команду npm init и заполните пошагово информацию о вашем новом проекте. Пример, также, есть на странице руководства Gulp.

Далее установим в проект пакеты gulp и gulp-sass командой:

Далее в папке проекта создадим gulpfile.js следующего содержания:

Обратите внимание на строку 6 — здесь мы используем один из стилей вывода в результирующий файл: nested — вложенный, по умолчанию; expanded — развернутый; compact — компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed — сжатый. Кроме того, благодаря обработке .on(‘error’, sass.logError), если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.

У вас должна быть следующая структура проекта в вашей файловой системе:

    myproject/

      css/

        common.css

      sass/

        common.sass

      node_modules/gulpfile.jspackage.json

Запускаем выполнение 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 — синтаксис расширения

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), 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 правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.

Sass CSS — готовый результат
Sass CSS — готовый результат

1.2 Привязка к родительскому селектору

Если вы хотите расширить селектор, не создавая нового правила, вы можете привязать к готовому селектору дополнительные селекторы, используя знак &. Внешне это выглядит как создание дочернего селектора в иерархии, но с использованием &, мы расширяем именно родительский селектор, а не создаем дочерний.

Sass CSS — готовый результат
Sass CSS — готовый результат

Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.

Кроме того, привязку к родителю можно использовать для создания составных селекторов:

Sass CSS — готовый результат

1.3 Вложенные свойства

Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin-top, margin-bottom, margin-left, margin-right имеют общую основу margin и могут быть разбиты на вложения следующим образом:

Sass CSS — готовый результат

1.4 Селекторы-шаблоны

Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend.

Sass CSS — готовый результат


2. SassScript

SassScript позволяет значително расширить возможности Sass за счет использования пользовательских переменых, арифметических и прочих функций. SassScript может быть использован для автоматической генерации новых селекторов и свойств.

2.1 Переменные в Sass

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

Sass CSS — готовый результат

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения ( , =, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Sass CSS — готовый результат

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px, мы получим 20px.

Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке.

Интерполяция — это получение нового значения, используя другие.

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #<>, например:

Sass CSS — готовый результат

Вы не можете просто взять и вставить в строку переменную, без использования интерполяции, как например, это можно сделать в PHP, в двойных кавычках. Обязательно используйте интерполяцию в переменные.

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

Sass CSS — готовый результат

Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.

Sass CSS — готовый результат

3. Директивы и правила

3.1 @import

Вы можете импортировать в ваш Sass файл sass, scss и css файлы с помощью директивы @import, при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.

@import сработает как обычный CSS @import, если:

  • в пути к файлу присутствует http://;
  • файл вызывается через url();
  • или в импорте присутствуют медиапараметры.

Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass, *.scss или *.css.

Давайте рассмотрим некоторые примеры.

Следующие файлы импортированы не будут:

Sass CSS — готовый результат

Следующие файлы будут импортированы:

Sass CSS — готовый результат

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css

Возможен импорт нескольких файлов, через запятую: @import «header», «media».

Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import «header».

Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import. Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:

3.2 @at-root

Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:

Sass CSS — готовый результат

Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации.

4. Выражения

Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.

4.1 Директива @if()

Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:

Sass CSS — готовый результат

4.2 Директива @for

@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.

Sass CSS — готовый результат

Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.

4.3 Директива @each

Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each:

Sass CSS — готовый результат

4.4 Директива @while


@while циклично выводит блоки стилей, пока выражение является true.

Sass CSS — готовый результат

5. Миксины

Миксины — блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.

Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.

Sass CSS — готовый результат

Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, почитайте документацию, будет полезно.

Сразу отвечу на вопрос — как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp. Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Развёрнутое руководство по Sass/SCSS

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.

Содержание статьи

Зачем использовать Sass/SCSS вместо CSS?

  1. Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
  2. Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
  3. Улучшенные математические операции— можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
  4. Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
  5. Директивы @for , @while и выражение @if-else — можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь — в итоге на выходе будет обычный CSS.
  6. Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
  7. Функции можно создавать определения CSS в виде функций для многократного использования.

Препроцессор Sass

Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.

Синтаксис

SCSS особо не добавляет никаких новых возможностей CSS, кроме нового синтаксиса, часто сокращающего время написания кода.

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS — (.sass) Syntactically Awesome Style Sheets.

«Бастион», Москва, от 80 000 до 200 000 ₽

SCSS — (.scss) Sassy Cascading Style Sheets.

Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

Sass — первая спецификация для SCSS с расширением файла .sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss .

Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире ( — ), а в препроцессорах знаком доллара ( $ ).

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

Те же вложенные элементы с помощью SCSS:

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

Это особенно полезно при управлении перегруженными макетами. Таким образом, выравнивание, в котором вложенные свойства записаны в коде, полностью соответствует действительной структуре макета приложения.

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

В SCSS используется директива & .

С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.

Результат компиляции Sass (из предыдущего примера) в CSS ниже.


В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).

Миксины (они же примеси)

Миксины объявляются директивой @mixin . После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible() , который далее будет включён, например, в класс .centered-elements следующим образом:

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz- ).

Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:

Арифметические операции

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).

Сложение и вычитание

Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Таким же образом работает вычитание, но со знаком минус.

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел ( 5*6 == 5 * 6 ).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

Есть три помощника, которые намекнут на возможность деления:

  1. Значение (или любая его часть) хранится в переменной или возвращается функцией.
  2. Значения заключены в круглые скобки.
  3. Значение используется как часть другого арифметического выражения.

Результат компиляции в CSS:

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .

Ниже показано, как работают директивы @if и @else , вложенные в миксин.

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Логические операторы

Описание логических операторов

Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом.

Пример ниже демонстрирует, как делать не надо.

Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.

Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:

Пример сложения нескольких строк:

Сложение строк и чисел:

Обратите внимание Свойство content работает только с псевдоселекторами :before и :after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции ( fucntion() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if() — это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

@if — это директива, использующаяся для разветвления на основе условия.

Ниже показано комбо-разветвление с добавлением директивы @else .


Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

Результат компиляции в CSS:

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

Результат компиляции в CSS:

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

После применения класса .name ширина элемента будет равна 300 пикселям.

Результат в браузере:

Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера. Мы, кстати, уже говорили об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.

Ниже рассмотрим пару примеров для создания интересных анимационных эффектов с помощью функции sin() , в которых количество кода сведено к минимуму. Далее можете масштабировать эти знания на создание интерактивных элементов пользовательского интерфейса (движение по кругу, волнистая анимация).

Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

Использование функции rad() :

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() .

Заключение

Как видите, CSS уже достаточно эволюционировал, чтобы порой заменять JavaScript. Это упрощает работу и экономит время. Кстати, загляните в одну из наших статей, в которой описаны возможности современного CSS.

Установка compass на windows

Перед началом установки Compass вы должны установить Ruby. Для установки Ruby на Windows воспользуйтесьRubyinstaller.
Откройте командную строку и введите следующие команды:

Чтобы установить предыдущую версию compass введите команду:

Настройка Compass

Для начала работы с Compass необходимо создать его конфигурацию. В корневой папке вашего проекта создайте файл config . rb . Добавьте в него следующие строки:

preferred_syntax — выбор синтаксис : sass или : scss . По-умолчанию, установлен : scss .
http_path — путь к проекту. Например, если для разработки вы используете папку dev / , то необходимо в config.rb указать http_path = «dev/»
css_dir — путь к файлам CSS. Путь указывается в зависимости от project_path . По-умолчанию, установлен «stylesheets» .
sass_dir — путь к файлам SASS. Путь указывается в зависимости от project_path . По-умолчанию, установлен «sass» .
images_dir — путь к папке, в которой хранятся изображения. По-умолчанию «images» .
images_path — полный путь к изображениям. По-умолчанию project_path > / images_dir > .

javascripts_dir — путь к javascript файлам. По-умолчанию «javascripts» .
line_comments — определяет будут ли добавлены комментарии в скомпилированный CSS файл. В комментарии указывается адрес строки в файле Scss из которого скомпилировался данный класс. Имеет значения true или false.
output_style = : compressed — скомпилированный CSS будет сжат. Также могут быть заданы значения : nested , : expanded , : compact .

25 Essential Sass and Compass Tools

CSS’ simplicity is one of its defining features, and a big reason for its popularity. However, as websites and applications become more complex, the size and complexity of stylesheets also increase. CSS can quickly become verbose and repetitive.

But a preprocessor like Sass expands the capabilities of CSS by allowing you to use variables to store values, create mixins for common snippets, nest declarations and help improve the maintainability of the entire project.

Created in 2006, Sass has two syntaxes: the original (also called the «indented syntax») and SCSS, or «Sassy CSS,» the more popular of the two, as it makes converting an existing website to Sass simple (by changing the file extension from .css to .scss). It doesn’t depend on indentation — it’s written just like CSS, making it easier to adopt.

Compass is the companion open-source CSS authoring framework for Sass.

There are a variety of tutorials, guides, podcasts, videos, presentations and even books on Sass. In this article, we’ll cover the best practical resources and applications to kickstart or advance your Sass knowledge.

Have we missed one of your preferred Sass and Compass resources? If so, please share it with our readers in the comments below.

1. The Sass Way

The Sass Way covers the latest news and topics on crafting CSS using Sass and Compass, with articles, resources and tutorials to suit both beginners and advanced users. With a team of writers and contributors, it’s regularly updated, and you can follow on RSS, Twitter and Facebook.

2. Compass.app

Compass.app is a menu bar-only app for Sass and Compass that helps to compile stylesheets easily, without resorting to a command line interface. It’s written in Java (JRuby) and is cross-platform, with no need to install a Ruby environment to use it. It boasts both LiveReload support and Compass Extensions support.

3. Scout

Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, letting you manage your projects effortlessly. There’s no need to deal with setting up Ruby or learning command line. Scout does all the «heavy lifting» and aims to help improve your CSS workflow by giving you more control, organization and optimization.

4. Compass Recipes


Providing a host of CSS recipes made with Compass and Sass, all ready to use, Compass Recipes offers a wealth of backgrounds, effects, icon fonts, forms, layouts, media queries and much more. It’s also hosted on GitHub, available to fork.

5. Bourbon

Bourbon is a simple, lightweight and comprehensive library of Sass mixins designed to be simple and easy to use. No configuration is required — the mixins aim to be as vanilla as possible, which means they should be close to the original CSS syntax. The prefixes also ensure graceful degradation for older browsers.

6. Bourbon Neat

Neat is a semantic grid framework built on top of Sass and Bourbon. It’s simple yet powerful enough to handle any responsive layout. It promotes clean, semantic markup, relying entirely on Sass mixins, and does not pollute your HTML with presentation classes and extra wrapping divs.

7. Susy

Susy provides responsive grids for Compass, filling the void left when grids were stripped from Compass. You can quickly add media-query breakpoints for new layouts, or create your own math using Susy’s array of grid helpers. It has the power to help you build a site in minutes, or create a scalable grid library for use in large projects.

8. Codekit

Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript and Javascript files automatically each time you save. With live browser reloads, image optimization and easy debugging, it makes working with Compass and Sass a breeze. The app also offers team collaboration and helps reduce load times by combining and minifying files.

9. Sassy Buttons

Sassy Buttons is a compass extension that helps you create customizable, attractive CSS3 buttons that are cross-browser compatible, using only a few lines of Sass. The extension gives you a set of mixins and defaults to create your custom buttons. The provided defaults can be customized, with five different gradients and three text styles to choose from.

10. LiveReload

LiveReload resides in your menu bar and monitors changes in the file system. As soon as you save a file, it is preprocessed as required, and the browser is refreshed. It ships with SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade, and is controlled by two main checkboxes, so you won’t get lost.

11. Hammer

Hammer has been dubbed a «game changer» for web development. It ships with built-in support for Sass (with Bourbon), with automatic language compilation, to HTML, CSS and JavaScript. It boasts HTML includes, clever paths, variables, auto reload, to-dos and dynamic image placeholders. Also of interest is companion menu bar app Anvil, which runs local Hammer builds, and Rock Hammer, a curated project library for Hammer.

12. Forge

Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment, using front-end languages like Sass, Less and CoffeeScript. It creates a source folder with base template files, SCSS files and theme options, then automatically compiles to your local WordPress install(s) as you save changes. When you are ready to distribute your theme, Forge will build it to a folder of your choice or bundle the theme into an easily installed zip package.

13. Normalize.css (with Sass or Compass)

Normalize.css is a popular HTML5-ready alternative to CSS resets. It makes browsers render all elements more consistently and in line with modern standards, precisely targeting only the styles that need normalizing. This is the Sass/Compass port of that file, which utilizes legacy IE support variables, a CSS3 box sizing mixin and vertical rhythm mixins.

14. Sass for WordPress

Sass for WordPress is a plugin that enables the use of Sass in WordPress projects, with support for both Sass and SCSS syntax. It watches for changes to your Sass files and re-compiles your CSS when needed. We recommend you run the plugin locally when developing your theme(s) and upload the compiled CSS along with the reset of your theme, if you can’t or don’t want to install the Sass and Compass gems on your hosting environment.

15. Sassaparilla

Sassaparilla is a fast way to start your responsive web design projects, harnessing the power of Sass and Compass. Its core focus is on better, beautiful typography with the correct vertical rhythm. It allows you to work in pixels, then compiles in Ems, and works with CSS variables, keeping them all in one place for safe keeping. Setup is simple, with extensive documentation, available on GitHub to fork.

16. Sass Modular Scale

Sassy Modular Scale is a Sass-based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown’s Modular Scale, and can be used as a Compass Extension or installed as a Ruby gem. Included are functions for a number of classic design and musical scale ratios, with the ability to add your own ratios, as well.

17. MVCSS

MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style, broken down into three primary sections: application, core and modules. The architecture and accompanying Styleguide and Library mesh preferred practices and other well-documented methods, such as OOCSS, BEM and SMACSS, into one place.

18. Bootstrap Sass

Bootstrap Sass is a Sass-powered version of Twitter’s Bootstrap, ready to drop right into your Sass-powered projects. Installation is straightforward: Set up your Ruby On Rails installation, import Bootstrap in an SCSS file to get of all Bootstrap’s styles, mixins and variables, then include Bootstrap’s JavaScript files. Once you have installed the gem and created a new project, you will start with a styles.scss file ready for your alterations, a compiled stylesheet and a copy of the Bootstrap JavaScript and images in their respective folders.

19. Prepros

Prepros is an app dedicated to making compiling code easier. It compiles all of your Sass, Scss, Compass, Less, Jade, Haml and CoffeeScript in real time, with live browser refresh to keep your preprocessing workflow seamless. It has no dependencies and features a built-in HTTP server, background file watch, error notification and live CSS injection. There is also a Chrome Extension for Live Browser Refresh, but please note, it is a Windows-only application.

20. Assembling Sass

Assembling Sass is a free online course from Code School to learn Sass and start improving your front-end workflow, so you can use Sass for efficient, time-saving styling on large-scale applications. It boasts a solid understanding of Sass, from the foundation to variables, mixins and CSS management to simplifying and optimizing your responsive workflow.

21. Sass Style Guide

CSS Style Guides are common; however, Chris Coyier of CSS Tricks extends this idea to cover choices unique to Sass. While there are common rules you should follow for any style guide, this is a specific list to Sass, including guidelines on nesting, variables, vendor and global dependancies, partials, line mapping, comments, media queries and CSS.

22. FireSass (for Firebug)

FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles, making it useful for Sass development. To use, just download and install FireSass, then enable Sass’s «debug_info» option. Please note: It hasn’t been updated for some months, but it’s worth exploring as a useful tool in your workflow.

23. Zocial

Zocial is a CSS3 social buttons Sass framework. And the vector icons are implemented with a Sass @font-face mixin, usable as a Compass extension. The project includes buttons for Twitter, Facebook, Google+, GitHub, RSS, Smashing Magazine and many more. There is also full documentation on how to get started.

24. Breakpoint

Breakpoint makes writing media queries in Sass super simple — just create a variable using a simplified syntax, based on most commonly used media queries, then call it using the «breakpoint» mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself to handling cross-browser compatibility issues.

25. Grails Sass/Scss Plugin

Grails is an open source, full stack web application framework, used by companies such as LinkedIn, Sky and Netflix. It takes advantage of the Groovy programming language to provide a productive and streamlined development experience. This plugin adds Compass, Sass and Scss support to Grails, and automatically compiles the code.

Используйте Compass и Sass для CSS в следующем проекте

Sass можно назвать CSS 2.0; он обладает отличными функциями, позволяющие писать гибкий код и экономить при этом время. Сегодня, в данной статье мы разберём основы!

Что такое Sass?

Проще говоря Sass другой подход при работе с CSS. Позволяет вам сохранять простоту и читабельность CSS кода. Код ниже:

После компиляции выглядит следующим образом:

Вы можете ознакомиться с Sass документацией на http://sass-lang.com/

Что такое Compass?

Compass делает работу с Sass ещё проще. Автор проекта Chris Eppstein, также добавил поддержку некоторых сконвертированных фреймворков, таких как Blueprint, YUI и 960.gs. Compass легко интегрировать в проекты основанные на Ruby, но его также легко добавить в любой другой проект. Compass является технологией с открытым исходным кодом и отлично документирован. Вы можете ознакомиться с исходниками и документацией.

Установка


Оба инструмента, Sass (является частью проекта Haml) и Compass устанавливаются, как Ruby гемы. Если вы не понимаете о чём идёт речь, обратите внимание на мой предыдущий туториал Ruby on Rails для дизайнеров «Step 1 — установка Ruby on Rails», и продолжайте скролить вниз пока не найдёте часть под названием «Установка Rails».

Для установки обоих гемов нам достаточно запустить одну команду:

После того как вы увидите сообщение, что оба гема успешно установлены, можете дальше следовать инструкциям в данном туториале.

Настройка проекта

Если вы работаете с проектом основанным на Ruby ознакомьтесь с документаций, так как там скорее всего вы найдёте объяснение как интегрировать оба инструмента в фреймворк, с которым вы работаете, но я подозреваю, что мы имеем дело с обычнм HTML или подобным проектом.

Команда compass обладает множеством опций и если запустить compass —help, вам отобразится подсказка с перечнем данных опций:

К слову: вторая строка сверху гласит «Loading haml-edge gem.» это потому что я использую последнюю версию, вам не стоит беспокоится если ваш вывод отличается от моего.

Теперь мы начнём работу над Compass проектом. Для его создания запустите следующую команду (включая точку в конце, которая сообщает compass где мы хотим разместить проект!)

Вы должны увидеть:

После инициализации, Compass обычно создаёт папку по умолчания для Sass под названием src, но мне хотелось изменить это, поэтому я добавил опцию. Если вы внимательно посмотрите в каталоге проекта есть файл под названием config.rb и две другие директории.

Файл config.rb отвечает за конфигурацию от которой зависит Compass, но в большинстве случаев вам даже не придётся его трогать. Также, как упоминалось в сообщении, которое мы видели после создания проекта, на наш выбор есть три способа как будет обрабатываться наш Sass:

  • compass — используя данную опцию, вам нужно находиться в подходящем каталоге и Compass скомпилирует Sass единожды.
  • compass -u путь/к/проекту — тоже самое, что и команда выше, но на этот раз вам не нужно находиться в директории проекта, вам следует передать путь к проекту в качестве параметра команде.
  • compass —watch [путь/к/проекту] — данная команда довольно удобная, так как запустив её, Compass будет отслеживать изменения в Sass файлах и после того, как они появятся автоматически перекомпилирует соответствующий файл.

    Теперь когда вы знаете, как настроить проект, я объясню некоторые правила работы с Sass

    Синтаксис Sass

    Обычно, работая с CSS, вы пишите что-то вроде:

    Проблема в том, что в данном случае вы повторяете одно и тоже имя много раз. Давайте сделаем тоже самое с Sass. Я буду работать с screen.sass файлом, так что удалите всё и ваш Sass будет выглядеть как:

    По мне, так такой вариант гораздо проще читать и писать, не нужно квадратных скобок и точек с запятой. Sass понимает вложенность согласно отступам.

    Первый селектор не имеет отступа. Также все свойства (цвет, высота, ширина и так далее) начинаются с двоеточия (данный синтаксис устарел, двоеточие следует ставить после названия свойства, речь идёт о Sass Indented Syntax, примечание переводчика). Соответственно свойства #header обладают отступом. Не важно используются-ли табы или пробелы, но использовать стоит что-то одно, иначе вы увидите ошибку (которую я скоро вам покажу).

    После свойств идёт следующий селектор. Так как он также обладает отступом, как и свойства, конечный CSS будет выглядеть, как #header a .

    Теперь когда мы немного разобрались, давайте попробуем скомпилировать Sass: (в директории нашего проекта)

    Давайте предположим, что для отступов вы использовали, как табы, так и пробелы, Compass выдаст ошибку:

    Зная CSS, процесс обучения Sass не вызовет у вас сложностей, так как главная разница — это правила форматирования. Далее, мы будем работать с более продвинутыми (но в тоже время более крутыми!) частями Sass.

    Полезные особенности Sass

    Переменные

    Одна из потрясающих особенностей Sass — возможность использовать переменные, к примеру:

    После компиляции мы получим:

    Математические выражения

    Возможно заголовок покажется вам забавным, но это правда вы можете выполнять математические выражения в Sass! Для демонстрации мы будем использовать интерактивный режим Sass, запустите:

    Немного поигравшись, можно получить следующие результаты:

    Начинаем работать с препроцессором Sass

    Дата публикации: 2013-10-08

    От автора: Препроцессоры – популярный способ упрощения и написания более управляемого CSS, а также применения фреймворков для написания лучшего CSS. Давайте рассмотрим основные принципы и узнаем, как создать полностью насыщенную CSS3 кнопку с градиентами, тенями и переходами, предоставив при этом препроцессору Sass и фреймворку Compass возможность проделать за нас всю сложную работу.

    Погодите, препро-что?!

    Думаю, если вы во всем этом новичок, то сочетание «препроцессор CSS» сбивает вас с толку! Успокойтесь, не нужно сильно волноваться. Препроцессор CSS берет ваш написанный в специальном файле CSS, компилирует его и записывает ваш CSS в отдельный файл. Он помогает вам писать CSS удобным для разработчика способом, но, помимо этого, способен упростить и лучше управлять вашим CSS.

    В этом учебнике мы будем делать очень простую кнопку с тремя состояниями, полную великолепных свойств CSS3 вроде градиентов, теней блока и переходов, полагаясь в то же время на препроцессор, чтобы тот сделал за нас тяжелую работу. Существует несколько языков препроцессоров, но я очень рекомендую использовать Sass и построенный на нем популярный фреймворк Compass. Sass можно применять для структуризации своего CSS, тогда как Compass можно использовать для укрепления стилей и обеспечения альтернативными вариантами.

    Что вам понадобится и как начать

    Первое, что следует сделать – взять программу для компиляции вашего кода, и хотя вы могли бы установить все с помощью командной строки, легче сохранять контроль с помощью приложения. Я очень рекомендую попробовать для этого учебника CodeKit, так что берите пробную копию и можно начинать.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Заведите для нашего проекта папку, укомплектованную файлом index.html, готовым к принятию кода. Далее войдите в CodeKit, перейдите в меню Файл/File и выберите Новый проект Compass (New Compass Project). Далее перед вами предстанет диалог, запрашивающий, где находится папка вашего проекта и куда нужно компилировать, и убедитесь, что установки соответствуют следующим:

    Мы определили, где находятся наши файлы Sass, куда они компилируются, и каким образом Compass будет записывать CSS. Здесь я установил расширенное (expanded ) отображение для того, чтобы можно было посмотреть, как выглядит мой CSS, тогда как установка на сжатое (compressed) отображение уменьшит CSS. Как вы захотите организовать свой проект – решать вам. Затем Compass создаст проект, а также местоположение наших папок CSS и Sass.

    Начинаем работать с кодом Sass

    В своем файле HTML нам нужен лишь очень простой код и ссылка на файл CSS в папке CSS нашего проекта.

    SASS на windows при помощи compass.app

    Сначала я хотел описать установка и работу с бесплатным приложением Scout App, но, так как в данный момент (16.02.2013) страничка с приложением недоступна, я решил обратить свое внимание на платное приложение ($10) compass.app. Итак, этой статье приведена описание того как можно быстро начать работать с SASS в среде windows без использования командной строки.

    Сompass.app, как и Scout App, запускает SASS и Compass в автономной среде Ruby, что делает минимально простым старт работы с препроцессорами. Еще один немаловажный момент состоит в том, что мы не будем использовать командную строку.

    Для начала нам нужно купить приложение compass.app, а затем установить на компьютере. После установки приложения в трее появится соответствующая иконка. Теперь можно создавать проект. Для этого создайте папку со следующей структурой:

    Файл с расширением .css создавать не надо, так как он будет сгенерирован автоматически. Затем кликните по иконке compass.app в трее и выберите опцию Watch a folder .

    Все, вы можете смело кодировать на SASS, и ваши изменении будут автоматически вноситься в файл .css , расположенный в папке stylesheets (не забудьте подключить его в ваш основной файл, например, index.html ).

    Если вы хотите ужать ваш .css файл, в файле config.rb нужно вставить следующую инструкцию:

    Следующая инструкция «разворачивает» ваши стили:

    Как вы видите, мы без труда развернули проект и можем кодировать на SASS.

    Альтернативная документация для Compass

    Опубликовал Александр Шабуневич — 20 Сентябрь 2012, 12:04

    Вчера я написал про CSS-препроцессоры, похвалив SASS и Compass. Но когда я начал пользоваться Компасом, то выяснилось, что документация у последнего оставляет желать лучшего. Нет, она полная и всё описывает, но вот пользоваться ей не очень удобно: простые статичные страницы с несколькими уровнями иерархии. И, как назло, нет даже шпаргалок (cheatsheets), перечисляющих примеси (mixins) и функции. В общем, пришлось делать что-то самому.

    Сначала я хотел сделать именно шпаргалку в формате PDF по аналогии с Zen Coding, но в процессе понял, что информативность страдает: примеров нет, описаний не уместишь. Тогда я вспомнил про чудесный альтернативный API-браузер jQuery, которым сам постоянно пользуюсь. Он работает через AJAX, имеет мгновенный поиск и вообще очень удобен. А так как исходники документации для Компаса свободно доступны, я решил сделать аналогичный проект для него.

    Сайт и документация Компаса написаны на мини-движке nanoc, который генерирует статичные страницы из набора haml- и sass- компонентов. Пару вечеров у меня ушло на то, чтобы разобраться что там к чему, а также вспомнить Ruby, который я когда-то давно пытался изучать, но потом забросил. Вообще, руби клевый язык — мне он понравился даже больше питона. И хотя мой код вышел кривым, я видел как его пишут люди с опытом.

    В целом, документацию я сделал как планировал. Пришлось вырезать примеры — точнее, дать ссылки на оригинальный сайт. Зато на главной есть список всех функций и примесей для быстрого доступа. В целом, как мне кажется, получилось удачно — лично для меня гораздо удобнее оригинала. Оформление хотел сделать своё, но потом решил, что надежнее придерживаться авторских стилей, тем более что они мне нравятся.

    Разница между компасом и сасси?

    Я знаю, что это своего рода глупый вопрос, но я искал Google, и я не могу найти ответы:/Итак, какая разница между SASS и Compass, SASS и SCSS? Я очень смущен этим.

    Спасибо за любую информацию:)

    В случае чрезмерного упрощения Compass является основой, а Sass — абстракцией языка. Вы пишете код Sass (и компилируете его в стандартный CSS) в контексте Compass. SCSS — это просто самый последний синтаксис языка Sass. Насколько я могу судить, он был создан с единственной целью — быть более похожим на CSS в своем синтаксисе. Весь синтаксический сахар Sass, но более знакомый разработчикам интерфейсов, удобный с CSS.

    В общем: «Sass» — это имя для препроцессора css — означает: полезный инструмент для разработчиков для написания коротких форм заполнителей, которые автоматически компилируются в обычный код css. У Sass есть два разных способа написания кода короткой формы: SCSS и SASS. Разница между SCSS и SASS очень проста: SCSS — это обычный CSS с дополнительными функциями. Каждый файл CSS может быть переименован как .scss и будет проверяться. SASS использует более короткую форму письма, пропуская все фигурные скобки. Чтобы преобразовать файл .css в действительный файл .sass, вам нужно изменить код css.

    Компас — это так называемая среда css, которая управляется с помощью инструментов командной строки. Компас поддерживает разработку, предоставляя предопределенные функции, микшины и т.д., Чтобы ускорить кодирование и предотвратить ошибки при записи. например, компас позволяет вам вызывать тень коробки со всеми полиполками, просто написав «@include box-shadow();». все css-код добавляется самим компасом при компиляции файла с помощью «compass compile». Компас — один из самых используемых инструментов для работы в крупных проектах разработки frontend.

    Мастер Йода рекомендует:  Как изогнуть и выровнять текст по кругу с помощью CSS
  • Добавить комментарий