Как из scss вернуть css. Скачивание и Установка SASS. Синтаксис - Sass, Scss

Привет, друзья!

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

Класснуть

Плюсануть

Запинить

Спонсор выпуска - хостинг партнер: partnerwp.ru

Все Sass/CSS примеры и настроенный Gulp проект для данного урока вы можете скачать с GitHub .

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

Преимущества Sass

• Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
• Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
• Sass - это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
• Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков - Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
• Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе - упрощенный (SASS) и развернутый CSS-подобный (SCSS).

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

Настройка окружения

В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass ). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте . Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.

Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите . После установки Node.js установите gulp командой "npm i -g gulp" (Windows) или "sudo npm i -g gulp" (Linux, OS X). Почитать: .

Npm i --save-dev gulp gulp-sass

Var gulp = require("gulp"), // Подключаем Gulp sass = require("gulp-sass"); // Подключаем Sass пакет gulp.task("sass", function() { // Создаем таск "sass" return gulp.src(["sass/**/*.sass", "sass/**/*.scss"]) // Берем источник.pipe(sass({outputStyle: "expanded"}).on("error", sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass .pipe(gulp.dest("css")) // Выгружаем результата в папку css }); gulp.task("watch", function() { gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Наблюдение за sass файлами в папке sass }); gulp.task("default", ["watch"]);

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

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

• myproject/
  • css/
    • common.css
  • sass/
    • common.sass
  • node_modules/
  • gulpfile.js
  • package.json

Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.

Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/ . Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.

Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp .

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

Синтаксис Sass

Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass - это синтаксис отступов . Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса - *.sass . Второй вариант - это синтаксис, расширяющий синтаксис CSS , Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом - *.scss .

Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли - скорее всего, ошибка именно в неправильных отступах. Еще важная деталь - если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.

SASS и SCSS синтаксис:

SASS - синтаксис отступов	SCSS - синтаксис расширения
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color	$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import , например, если вы скачали файл carousel.scss , то можете подключить его в ваш main.sass строкой @import "carousel" . Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass , где x.x - это номер заголовка примера из данной статьи.

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

1. Расширение возможностей CSS с помощью Sass

1.1 Правила вложения

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

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

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

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

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

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

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

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

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

2. SassScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 @import

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

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

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

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

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

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

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

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

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

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

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

#main @import "example"

3.2 @at-root

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

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

4. Выражения

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

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

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

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

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

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

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

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

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

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

5. Миксины

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

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

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

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

На сегодня всё. Спасибо за внимание!

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

• Препроцессинг

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

  Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

  Самый простой способ получить такой результат - использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS, используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

• Переменные

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

  Синтаксис SCSS

  $font-stack : Helvetica , sans-serif ; $primary-color : #333 ; body { font : 100% $font-stack ; color : $primary-color ; }

  Синтаксис Sass

  $font-stack : Helvetica , sans-serif $primary-color : #333 body font : 100% $font-stack color : $primary-color

  Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

  body { font : 100% Helvetica , sans-serif ; color : #333 ; }

• Вложенности

  При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

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

  Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

  Синтаксис SCSS

  nav { ul { margin : 0 ; padding : 0 ; list-style : none ; } li { display : inline-block ; } a { display : block ; padding : 6px 12px ; text-decoration : none ; } }

  Синтаксис Sass

  nav ul margin : 0 padding : 0 list-style : none li display : inline-block a display : block padding : 6px 12px text-decoration : none

  Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS-файл более читабельным. Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

  nav ul { margin : 0 ; padding : 0 ; list-style : none ; } nav li { display : inline-block ; } nav a { display : block ; padding : 6px 12px ; text-decoration : none ; }

• Фрагментирование

  Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент - это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .

• Импорт

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

  Например, у вас есть несколько фрагментов Sass-файлов - _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .

  Синтаксис SCSS

  // _reset.scss html , body , ul , ol { margin : 0 ; padding : 0 ; } // base.scss @import "reset" ; body { font : 100% Helvetica , sans-serif ; background-color : #efefef ; }

  Синтаксис Sass

  // _reset.sass html , body , ul , ol margin : 0 padding : 0 // base.sass @import reset body font : 100% Helvetica , sans-serif background-color : #efefef

  Обратите внимание на то, что мы используем @import "reset"; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение.scss . Sass - умный язык и он сам догадается. Когда CSS сгенерируется вы получите:

  html , body , ul , ol { margin : 0 ; padding : 0 ; } body { font : 100% Helvetica , sans-serif ; background-color : #efefef ; }

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

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

  Синтаксис SCSS

  @mixin border-radius ($radius ) { -webkit-border-radius : $radius ; -moz-border-radius : $radius ; -ms-border-radius : $radius ; border-radius : $radius ; } .box { @include border-radius (10px ); }

  Синтаксис Sass

  =border-radius ($radius ) -webkit-border-radius : $radius -moz-border-radius : $radius -ms-border-radius : $radius border-radius : $radius .box +border-radius (10px )

  Для создания миксина используйте директиву @mixin + название этого миксина. Мы назвали наш миксин border-radius . Также, в миксине мы используем переменную $radius внутри скобок, тем самым позволяя себе передавать в переменной все, что захотим. После того, как вы создали миксин, вы можете его использовать в качестве параметра CSS, начиная вызов с @include и имени миксина. Когда ваш CSS скомпилируется вы получите следующее:

  .box { -webkit-border-radius : 10px ; -moz-border-radius : 10px ; -ms-border-radius : 10px ; border-radius : 10px ; }

• Расширение/Наследование

  Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами.

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

  Синтаксис SCSS

  %equal-heights { display : flex ; flex-wrap : wrap ; } %message-shared { border : 1px solid #ccc ; padding : 10px ; color : #333 ; } .message { @extend %message-shared ; } .success { @extend %message-shared ; border-color : green ; } .error { @extend %message-shared ; border-color : red ; } .warning { @extend %message-shared ; border-color : yellow ; }

  Синтаксис Sass

  // Данный отрывок кода не попадет в CSS, так как %equal-heights никогда не расширялся. %equal-heights display : flex flex-wrap : wrap // Данный отрывок кода попадет в CSS потому, что %message-shared расширен. %message-shared border : 1px solid #ccc padding : 10px color : #333 .message @extend %message-shared .success @extend %message-shared border-color : green .error @extend %message-shared border-color : red .warning @extend %message-shared border-color : yellow

  Вышеуказанный код сообщает классам.message , .success , .error и.warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и.message , .success , .error и.warning тоже будут вызваны. Магия происходит в сгенерированном CSS, где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

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

  Когда вы генерируете ваш CSS, то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS, так как ни разу не был использован.

  .message , .success , .error , .warning { border : 1px solid #cccccc ; padding : 10px ; color : #333 ; } .success { border-color : green ; } .error { border-color : red ; } .warning { border-color : yellow ; }

• Математические операторы

  Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , - , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .

  Синтаксис SCSS

  .container { width : 100% ; } article [ role = "main" ] { float : left ; width : 600px / 960px * 100% ; } aside [ role = "complementary" ] { float : right ; width : 300px / 960px * 100% ; }

  Синтаксис Sass

  .container width : 100% article [ role = "main" ] float : left width : 600px / 960px * 100% aside [ role = "complementary" ] float : right width : 300px / 960px * 100%

  Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

  .container { width : 100% ; } article [ role = "main" ] { float : left ; width : 62.5% ; } aside [ role = "complementary" ] { float : right ; width : 31.25% ; }

Перевод статьи: The Absolute Beginner’s Guide to Sass.
Andrew Chalkley.

Что такое SASS?

SASS является аббревиатурой от Syntactically Awesome Stylesheets — метаязык на основе CSS, название которого можно перевести как «CSS c превосходным синтаксисом» , разработанный Хемптоном Кэтлином (Hampton Catlin).

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

Приходилось ли вам, к примеру, когда-нибудь, угождая определенному нерешительному клиенту, заниматься просмотром всего содержимого файла стилей для того чтобы отыскать определенное HEX-значение цвета с целью его замены на другое? Или же обращаться к не всегда находящемуся под рукой приложению-калькулятору, чтобы просчитать ширину колонки для многоколоночного шаблона?

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

В принципе, код SASS похож на CSS, но основной отличительной чертой, которая сразу же бросается в глаза является отсутствие точки с запятой после каждой пары свойство-значение и фигурных скобок.

В качестве примера возьмем следующий фрагмент CSS кода:

#skyscraper_ad
{
display: block;
width: 120px;
height: 600px;
}

#leaderboard_ad
{
display: block;
width: 728px;
height: 90px;
}

Который эквивалентен вот такому SASS:

#skyscraper_ad
display: block
width: 120px
height: 600px

#leaderboard_ad
display: block
width: 728px
height: 90px

В SASS для обозначения вложенности фрагментов кода используется интервал (отступ в начале следующей строки) равный двум пробелам. (*В последнем сниппете для наглядности я выделил эти пробелы красным фоном. )

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

Переменные.

В SASS для объявления переменной необходимо перед ее именем использовать символ доллара $ . И если имя вашей переменной, допустим, red , то после двоеточия мы можем указать соответствующее ей вот такое значение:

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

Так, в следующем примере цвет шрифта в параграфах будет тоже красным, но темнее, чем используемый в h1 заголовках:

$red: #FF4848
$fontsize: 12px
h1
color: $red

p
color: darken($red, 10%)

С переменными вы можете производить арифметические действия, такие как сложение и вычитание, при условии, что используемые для этого значения имеют один и тот же тип данных. Если, к примеру, нам необходимо применить более темный оттенок, то все что нам нужно сделать, это вычесть из уже используемого в коде значения цвета, хранящегося в переменной, небольшое шестнадцатеричное HEX-значение, равное, скажем, #101 . Это же касается и случая, когда необходимо изменить значение размера шрифта, допустим, увеличить на 10 пикселей, для этого мы просто прибавляем недостающие пиксели:

p.addition_and_subtraction
color: $red — #101
font-size: $fontsize + 10px

Вложенность.

В SASS вложенность бывает двух типов.

Вложенность селекторов.

Это первый тип вложенности, который схож с тем, какой используется для структурирования HTML кода:

$fontsize: 12px

Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

Если вы взгляните на сгенерированный в результате CSS код, то какие-либо комментарии будут излишни. Путем вложенности класса .name в класс .speaker (*тем же способом — с помощью двух пробелов в начале следующей строки ) создается CSS селектор .speaker.name . Это же касается и следующего имени класса .position , расположенного после декларирования свойств для первого селектора, в результате вложенности которого образуется второй селектор .speaker.position :

Speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }

Вложенность свойств.

Второй тип вложенности позволяет структурировать свойства с одним префиксом (* font-family , font-size , font-weight или border-style , border-color , border-radius и т.д. ):

$fontsize: 12px

Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

В представленном выше примере мы используем объявление родительского, универсального свойства font: и далее на новой строке после двухпробельного отступа указываем вторую часть свойства, которая обычно находится после дефиса.

То есть если мы укажем свойство font: , на следующей строке после двух пробелов свойство weight: , то в результате это будет эквивалентно хорошо знакомому нам свойству font-weight .

Speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }

В модуле обеспечивается поддержка всех дефис-содержащих свойств.

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

Миксины.

Еще одной прекрасной возможностью SASS являются миксины .

Миксины позволяют вам повторно использовать целые фрагменты SASS кода и при необходимости даже передавать им аргументы. И что немаловажно, вы также можете указывать их исходные значения.

Для того чтобы определить миксин используйте специально зарезервированное в SASS ключевое слово @mixin , а после него укажите выбранное вами имя миксина. Если есть необходимость в аргументах, то перечислите их в круглых скобках. Значения, устанавливаемые для аргумента по умолчанию, указываются при определении миксина через двоеточие. (*Другими словами, миксины представляют собой CSS функции. )

Процедура использования миксинов очень проста – после ключевого слова @include укажите имя нужного миксина и перечислите в скобках необходимые параметры, если таковые имеются.

Взгляните на следующий пример:

@mixin border-radius($amount: 5px) /* определяем миксин */
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount

h1 /* используем миксин */
@include border-radius(2px)

Speaker
@include border-radius

Этот SASS после компиляции будет преобразован в представленный ниже CSS код:

h1 {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2x; }

Speaker {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }

Для заголовка h1 мы явно указали значение радиуса закругления углов границы, но для элемента с именем класса .speaker мы этого не делали, поэтому было взято дефолтное значение 5px.

Наследование селекторов.

Другой превосходной особенностью SASS синтаксиса является способность селекторов наследовать все стили, определенные для других селекторов. Чтобы воспользоваться такой возможностью, необходимо использовать ключевое слово @extend , после которого указать селектор, все свойства которого вы хотите унаследовать:

h1
border: 4px solid #ff9aa9

Speaker
@extend h1
border-width: 2px

Что будет скомпилировано в:

h1,.speaker {
border: 4px solid #ff9aa9; }

Speaker {
border-width: 2px; }

(*Заметьте, декларация border: 4px solid #ff9aa9; не повторяется в рамках правила с селектором .speaker , а вместо этого к первому правилу добавляется второй селектор. Другими словами, дублирования кода нет. )

Попробуйте SASS в действии.

Онлайн.

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

Но до того, как вы начнете экспериментировать, в нижней области страницы выберите опцию «Indented Syntax» .

Установив на ПК.

Сам SASS является приложением (gem ) платформы Ruby. Поэтому для его установки без предварительной инсталляции самой платформы и менеджера пакетов этого языка программирования RubyGems не обойтись. После успешной установки самой платформы и менеджера выполните в консоли следующую команду:

gem install sass

SASS модуль может быть использован как инструмент конвертирования ваших SASS файлов в файлы CSS формата в режиме командной строки.

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

sass --watch sass_folder:stylesheets_folder

Где sass_folder — это путь к папке, содержащей SASS файлы (то есть с расширением.sass), а stylesheets_folder — путь к папке, в которой будут сохраняться получающиеся после компиляции, результирующие CSS файлы. Команда --watch сообщает модулю, что он должен следить (watch ) за любыми изменениями в указанной папке и если таковые имеются, то после их сохранения конвертировать исходные.sass файлы в эквивалентные им.css файлы.

Обратное конвертирование CSS в SASS.

Вы можете начать использование SASS с того, что сконвертируете стили, используемые в своих уже функционирующих проектах в этот формат с помощью утилиты "sass-convert".

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

sass-convert --from css --to sass –R.

Где флаг -R задает рекурсивный способ выполнения операции. А следующая за ним точка . означает, что получаемые в результате конвертации.sass файлы будут сохранены в текущей директории. (*При необходимости вместо точки можно указать путь к папке, в которой нужно сохранить результирующие файлы. )

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

Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — « ». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.

Что такое Sass?

Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.

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

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

Как установить Sass?

Чтобы начать использовать Sass вам нужно скачать и установить Ruby с официального сайта, прописать одну команду в консоль (чтобы установить Sass) и все готово. Ниже весь процесс расписан поэтапно.

1. Устанавливаем Ruby . Заходим на официальный сайт в раздел загрузки , выбираем билд (версию) Windows и скачиваем. Например, я использую Windows 7 (64 битовую), поэтому я буду скачивать Ruby 2.2.4 (x64) .
2. Следуйте всем указаниям установщика.
3. После успешной установки Ruby откройте Windows консоль и пропишите gem install sass и после этого запустится процесс установки Sass. Если во время установки у вас выдает ошибку, то попробуйте поменять gem на sudo и в итоге у вас должна получиться вот такая строка sudo gem install sass .

Тестируем

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

1. Откройте командную строку Windows
2. Пропишите туда sass -v . Если вы все правильно установили, то у вас должно появиться что-то вроде такой строки Sass 3.4.19 (Selective Steve) .

PS. Если у вас ничего не выводиться, возможно вы не находитесь в правильной директории. Для начала вам нужно прописать cd и дальше путь до того места куда вы установили Ruby. В моем случае это будет вот так cd D:\Programs\Ruby22\bin\ . После того как вы попадете в эту директиву, вам нужно прописать sass -v . Если у вас все равно ничего не показывает, то повторите процесс установки с самого начала и после чего вернитесь снова сюда.

Применяем Sass в работе

Для начала давайте создадим простой файл, который будет называться style.scss и внутри мы напишем следующее:

Main-wrapper { width: 1024px; margin: 0 auto; .sidebar { float: left; width: 30%; } .container { width: 67%; float: right; } }

Обратите внимание, что формат файла.scss, а не.css. Для.scss используется немного другой синтаксис, но он элементарный и вполне понятный с самого начала (если вы раньше когда-либо использовали css). А если вы читаете эту статья, я ожидаю, что вы уже знакомы с ним.

И так продолжим с style.css:

Как вы можете заметить, Sass взял все содержимое файла style.scss и сделал из него обычный CSS файл.

Так же обратите внимание, что в scss, все стили пишутся в древовидном виде (то есть класс внутри класса).

Например это:

Main-wrapper { display: block; .sidebar { float: left; width: 30%; .block { display: none; } } }

Превратиться в:

Main-wrapper { display: block; } .main-wrapper .sidebar {float: left; width: 30%;} .main-wrapper .sidebar .block {display: none; }

Конечно же SCSS намного удобнее.

Вот некоторые из плюсов SCSS:

• Группирование стилей
• Возможность быстро найти нужный класс/id
• Использование одних и тех же стилей в нескольких местах

Вы намерное спросите, а что такое --watch ? Данная команда принуждает Sass следит за каждым изменением style.scss. То есть каждый раз, когда вы будите сохранять новую копию этого файла, Sass обратит на это внимание и скомпилирует свежую версию CSS.

PS. Если у вас уже имеется скомпилированая версия CSS в той же папке где и style.scss, то он их перезапишет на более новую.

Важные моменты

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

Для того, чтобы создать CSS файл, изначально нужно создать SCSS файл в котором указывать стили для компиляции CSS.

Если во время компиляции у вас возникает ошибка, скорее всего вы ошиблись в синтаксисе Sass. Внимательно проверьте файл и попробуйте скомпилируйте заново.

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

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

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье - это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют.scss расширение.

Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение.sass .

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

# Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass

Использование Sass

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

Для запуска Sass из командной строки просто используйте:

sass input.scss output.css

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

sass --watch input.scss:output.css

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

sass --watch app/sass:public/stylesheets

Используйте sass --help для полной документации.

Селекторы

CSS vs. SCSS селекторы.

#main { color: #999; } #main .content { color: #bfbfbf; }

CSS отрывок выше, может быть написан в SCSS таким образом:

#main{ color: #999; .content{ color: #bfbfbf; } }

Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:

#main h1 { color: #00ff00; width: 97%; .title { background-color: #ff0000; color: #000000; } }

Будет скомпилировано в:

#main h1 { color: #00ff00; width: 97%; } #main h1 .title{ background-color: #ff0000; color: #000000; }

Ссылаясь на родительский селектор:

#wrapper h1{ width:20px; &:hover{ width:25px; } }

& будет заменен родительским селектором. То есть код выше, будет эквиалентен:

#wrapper h1{ width:20px; } #wrapper h1:hover{ width:25px; }

Импорты

Нормальный импорт.

@import “foo.css”; //импортирует foo.css @import “foo” screen; //импортирует foo.scss @import “foo.scss” screen; //импортирует foo.scss @import “foo1”,”foo2" screen; //импортирует foo1.scss и foo2 scss

Частичный

Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.

@import “colors”; //_colors.scss будет импортирован @import “utils/foo.scss”; // Это импортирует fo.scss в папку utils.

Вложенные импорты:

Если demo.scss включает в себя:

Example { color: red; }

#main { @import “demo”; }

Будет скомпилировано в

#main .example { color: red; }

Переменные

SCSS переменные начинаются с символа $ .

$width: 10px; $headercolor:red; #main h1{ width: $width; color:$headercolor; }

Будет скомпилировано в:

#main h1{ width: 10px; color:red; }

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

#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }

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

Вы также можете производить разные операции в SCSS. Для примера:

P { font: 10px/8px; // Чистый CSS без деления $width: 1000px; width: $width/2; // Использование переменных в делении width: round(1.5)/2; // Использование функции и деления height: (500px/2); // Использование скобок и деления margin-left: 5px + 8px/2px; // Использование сложения и деления font: (italic bold 10px/8px); // В списке, скобке на учитываются }

Скомпилируется в:

Вставка: #{}

Вы можете использовать переменные в свойствах имен и значения, используя #{} . Для примера:

$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }

Скомпилируется в:

P.foo { border-color: blue; }

Управляющие директивы

@if

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }

Скомпилируется в:

P { border: 1px solid; }

@for

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

Скомпилируется в:

Item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

@each

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$header} { font-size: $size; } }

Скомпилируется в:

H1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }

@while

$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }

Скомпилируется в:

Item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

Миксины

Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .

Рассмотрите следующий пример:

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } .page-title { @include large-text; padding: 4px; margin-top: 10px; }

Скомпилируется в:

Page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

Вы также можете использовать составные миксины, например как:

@mixin mixin-one{ color: red; } @mixin mixin-two{ width:20px; } .page-title { @include mixin-one; @include mixin-two; }

Вы также можете передавать переменные в миксинах:

$globel-prefixes:webkit moz ms o; @mixin prefixer ($property,$value,$prefixes:null){ @if $prefixes==null{ @each $prefix in $globel-prefixes { -#{$prefix}-#{$property}: $value; } } @else { @each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; } } #{$property}: $value; } *{ @include prefixer(box-sizing,border-box); }

Будет скомпилено в:

*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

Функции

Вы также можете определять функции, возвращающие значение. Для примера.

$no-of-columns:12; $gutter-width:2%; @function get-column-width($i){ @return (100% - ($no-of-columns/$i - 1) * $gutter-width) / $no-of-columns * $i; } .col-6 { width:get-column-width(6); }

Будет скомпилировано в:

Col-6 { width: 49%; }

Расширения

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

Normal Blue

Оба будут иметь одинаковые стили, кроме цвета.

Btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend .btn; background:blue; }

Это будет скомпилировано в:

Btn,.btn-blue{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ background:blue; }

Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.

Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.

%btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend %btn; background:blue; } .btn-red{ @extend %btn; background:red; } Будет скомпилировано в: .btn-blue{ margin:10px; color:black; width:200px; height:100px; background:blue; } .btn-red{ margin:10px; color:black; width:200px; height:100px; background:red; }