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


Содержание

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.

Развёрнутое руководство по 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.

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 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.

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 от А до Я

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

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

Процесс WordPress разработки, используя Sass и Compass

В этой статье, мы посмотрим на то как использовать Sass и Compass во время разработки WordPress темы. Мы структурируем таблицы стилей согласно SMACSS и воспользуемся Compass для создания спрайтов изображений, как для ретина так и для обычных экранов устройств.

Стоит заметить, что данная статья не является введением в Sass; однако, если вы начинающий, всё равно можете ознакомиться с ней.

Требования

Перед тем как мы начнём, убедитесь, что у вас установлен Sass и Compass на компьютере. Если это не так, стоит изучить следующие инструкции:

Существует несколько приложений с графическим интерфейсом для работы с Sass и Compass, но я буду использовать терминал (если вы на Wiondows, воспользуйтесь командной строкой). Используйте тот инструмент, который больше вам подходит.

Настраиваем проект

Давайте начнём, создав каталог для нашего проекта. Создайте новый каталог на рабочем столе и назовите его tutsplus . Внутри него создайте два каталога: sass и images . В каталоге sass будут находиться наши Sass файлы, которые будут формировать таблицу стилей для нашей темы, style.css .

Откройте каталог images и создайте в нём две новые директории для иконок нашей темы. Назовите их icons и icons@2x . Позже мы будем использовать изображения в этих каталогах для создания спрайтов, для нашей темы. На данный момент структура директорий должна выглядеть следующим образом:

Конфигурация Compass

Мы будем использовать Compass, чтобы отслеживать ( watch ) изменения файлов в каталоге sass , когда это произойдёт, Sass скомпилирует наши стили. Каждый раз когда мы запускаем Compass, он ищет файл конфигурации в текущей директории. Название файла — config.rb .

Для создания файла конфигурации откройте терминал/командную строку, перейдите в каталог tutsplus на вашем рабочем столе:

Далее запустите команду compass config config.rb . Данная команда создаст файл конфигурации для вас. Откройте файл в текстовом редакторе и добавьте следующие изменения:

  1. Поменяйте css_dir = «stylesheets» на: css_dir = «/» . Это даст понять Compass, что конечный файл с CSS следует поместить в корне нашей темы, так как это то место где WordPress будет искать style.css .
  2. Установите предпочитаемый тип конечного CSS. В моём случае я выбрал «расширенный» добавив на строке 12 output_style = :expanded .
  3. Раскомментируйте строку 14 и 17 удалив хеш символ, тем самым данные строки будут выглядеть следующим образом relative_assets = ture и line_comments = false .

Сохраните изменения. Теперь ваш файл config.rb должен выглядеть, как в примере ниже:

Отслеживаем изменения

Отлично! Теперь когда у нас есть файл с конфигурацией, настало время создать наш первый Sass файл. Создайте новый файл внутри каталога sass и назовите его style.scss . Далее, запустите терминал и перейдите в каталог /Desktop/tutsplus/ .

Запустите команду compass watch . Данная команда начнёт процесс отслеживания изменений файлов Sass в каталоге sass . После того как будет найден файл style.scss он будет скомпилирован и в итоге мы получим style.css в директории tutsplus .

Обратите внимание все файлы внутри каталога sass , имя которых не начинается с нижнего подчеркивания, будут обработаны и скомпилированный результат попадёт в каталог tutsplus . Это как раз то что нам нужно для нашего style.scss файла.

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

Декомпозиция

Мы собираемся разделить наш style.scss на несколько компонентов используя руководства (style guides) SMACSS (Scalable and Modular Architecture for CSS). Автор SMACSS — Jonathan Snook, он написал книгу об этой замечательной методологии, которую я настоятельно рекомендую вам прочитать. В том случае, если вы зарегестрированный пользователь Tuts+, скачать данную книгу можно здесь.

SMACSS подразделяет ваш CSS на следующие пять категорий:

  1. Основные стили (Base)
  2. Структура (Layout)
  3. Модуль (Module)
  4. Состояние (State)
  5. Тема (Theme)


Давайте создадим каталог для каждой из этих категорий внутри каталога sass . Используем следующие названия: base , layouts , modules , states и themes .

Структура нашего SMACSS каталога

В нашем base каталоге, поместите все таблицы стилей, которые соответствуют правилу Base стилей SMACSS. Данные таблицы стилей должны использовать стили только для селекторов элемента. Также это место подойдёт для того, чтобы добавить сюда сброс (reset) CSS стилей браузера по умолчанию.

Compass включает сброс стилей по умолчанию от Eric Meyer. Однако для данного проекта я буду использовать normalize.css. Скачайте файл normalize.css и поместите его в директорию base , после чего переименуйте его в _noarmalize.scss . Не забудьте изменить файловое расширение с css на scss .

Далее, нам следует импортировать normalize таблицу стилей в наш style.scss . Для этого откройте style.scss и добавьте:

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

Layouts

Здесь мы поместим файлы отвечающие за структура. К примеру, здесь будут находится стили для шапки, сайдбара, футера и стили отвечающие за структуру нашей страницы — _header.scss , _sidebar.scss , _footer.scss и _page.scss .

Вы можете использовать l- префикс для классов отвечающих за структуру:

Также это место подойдёт для стилей сетки. Как и в случае с base вы можете ознакомиться с правилами для стилей структуры SMACSS.

Modules

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

Модуль может содержать подмодули (sub modules). Вот вам пример модуля виджета, его заголовок — подмодуль:

Здесь мы используем BEM (Block Element Modifier) правила именования классов.

States

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

Давайте создадим один из них прямо сейчас.

Создайте новый файл в текстовом редакторе и сохраните его как _media_queries.scss в каталоге /sass/states/ . Скопируйте стили ниже для экранов различных размеров в данный файл.

Не забудьте импортировать новую таблицу стилей в ваш style.scss :

Если к примеру, у вас есть сайдбар навигация, которая скрыта на мобильных устройствах, в данный каталог следует поместить стили отвечающее за состояние открытой навигации .is-open или скрытой .is-closed , но в большинстве случаев данные стили больше подходят для layout или как файл модуля off-canvas навигации.

Themes

Подходящее место, для кастомных стилей WordPress плагинов. К примеру, допустим, вы можете поместить кастомные стили для Contact Form 7 плагина.

Theme Info

Каждый файл style.css WordPress темы содержит мета информацию, к примеру название темы, автора, версию и так далее. Мы можем воспользоваться переменными Sass, чтобы с лёгкостью изменить информацию о каждой теме, которую мы создаём.

Сперва создайте новый файл _vars.scss и сохраните его в папке sass . В этот файл мы добавим наши переменные. В том случае если данный файл окажется слишком большим, разделите его на несколько файлов.

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

Теперь мы должны создать файл, который будет использовать данные переменные. В текстовом редакторе создайте файл _theme_info.scss и сохраните его в sass каталоге. Заполните _theme_info.scss следующим контентом.

Ну и наконец импортируйте новый файл в style.scss , также как и компоненты Compass:

Теперь если открыть скомпилированный style.css в нём будет содержаться блок комментариев с информацией о WordPress теме со значениями переменных, который мы задали в _vars.scss .

Helpers

Хорошая практика использовать небольшие CSS классы для стилизации элементов, вместо использования специфичного селектора. Следуйте DRY принципу, не повторяйтесь — Don’t Repeat Yourself. Мы можем создать таблицу стилей для небольшого класса хлепера (helper). Для примера, я определю хелперы для структуры и типографии.

Создайте новый файл под названием _helpers.scss и сохраните его в sass каталоге. Опять также как и с файлом переменных, если файл содержащий хелперы разрастётся, советую вам разделить его на небольшие файлы.

Откройте недавно созданный файл и скопируйте следующий контент:

Как вы можете заметить мы используем префикс f- для классов относящихся к стилизации шрифтов, префикс t- для классов текстовой стилизации. Сохраните файл и импортируйте в style.scss :

Генерация спрайтов

Compass обладает невероятно полезными функциями для генерации спрайтов изображений. Мы добавим наши иконки в каталог icons и icons@2s , icons@2s будет содержать те же иконки, но размером в два раза больше для устройств с ретина экранами.

Для примера, я добавлю два файла иконок: checkmark.png и star.png , которые можно найти в исходных файлах, которые можно скачать для данного туториала.

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

Compass найдёт все файлы *.png изображений внутри каталога иконок и сгенерирует два спрайта изображений в каталоге images . После чего нам следует создать CSS класс для данных изображений.

Чтобы найти необходимую позицию изображения в спрайте, мы сделаем два хелпер миксина. Для этого, создайте новый файл и назовите его _mixins.scss , откройте его и скопируйте следующий код:

Оба миксина принимают название, а также спрайт в качестве аргументов. Миксин установит ширину, высоту и позицию фона для иконки в сгенерированном спрайте. retina_sprite_icon установит соответствующий размер фона для ретина иконок.

Теперь пришло время добавить классы для иконок. Создайте _icons.scss и сохраните его внутри каталога /sass/modules/ . Затем, скопируйте в него следующее содержание:

Мы обходим циклом список с именами иконок, который определён в $theme_icons и генерируем стили для ретина и обычных иконок, используя миксин. Далее мы создаём класс .icon , который будет являться основным модулем наших иконок, после чего модуль классов модификаторов для каждой иконки в списке.

В этом примере, создаётся .icon—checkmark и .icon—star классы. Вот пример использования иконки звёздочки (star icon):

Наконец, давайте импортируем миксины и модуль иконок в style.scss :

Заключение


Sass и Compass довольно мощные инструменты и могут значительно облегчить работу во время разработки WordPress темы или WordPress плагина. Данная статья поможет вам начать использовать данные инструменты для создания более эффективного рабочего процесса с WordPress.

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

Установка Sass

Приложения

Есть множество приложений под Windows, Mac и Linux, которые помогут в освоении и работе с Sass. Большинство из них бесплатные, но некоторые из них все-таки платные (но это того стоит).

  • CodeKit (Платно) Mac
  • Compass.app (Условно-бесплатно) Mac Windows Linux
  • Ghostlab (Платно) Mac Windows
  • Hammer (Платно) Mac
  • Koala (Бесплатно) Mac Windows Linux
  • LiveReload (Условно-бесплатно) Mac Windows
  • Prepros (Платно) Mac Windows Linux
  • Scout-App (Бесплатно) Windows Linux Mac

Командная строка

Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass . Например:

Используя любой способ установки Sass, запустите команду sass —version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass —help для получения информации по использованию Sass в командной строке.

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

Установка в любом месте (Standalone) Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH . Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно. Установка в любом месте (npm)

Если вы используете Node.js, то вы можете установить Sass c помощью npm:

Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости! Установка в Windows (Chocolatey)

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

Установка в Mac OS X (Homebrew)

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

Установка 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.

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

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

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

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

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

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

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

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

Препроцессоры. Быстрый старт

Изучите азы работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

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

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

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

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

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

Я знаю, что это своего рода глупый вопрос, но я искал 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.

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

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

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

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

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

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

Цукерберг рекомендует:  Вакансии Owl-Studio
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих