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

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

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

Sass для самых маленьких. подробное руководство - Видеоурок
Смотреть урок на YouTube
Все курсы канала WebDesign Master

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

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.

npm init в терминале

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

npm i --save-dev gulp sass gulp-sass

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

var gulp = require('gulp'), // Подключаем Gulp
    sass = require('gulp-sass')(require('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 правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.

Sass CSS - готовый результат 
#main p
  color: #00ff00
  width: 97%

  .redbox
    background-color: #ff0000
    color: #000000

#main p {
  color: #00ff00;
  width: 97%;
}

#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}
Sass CSS - готовый результат 
#main
  width: 97%

  p, div 
    font-size: 2em
    a
      font-weight: bold

  pre
    font-size: 3em

#main {
  width: 97%;
}

#main p, #main div {
  font-size: 2em;
}

#main p a, #main div a {
  font-weight: bold;
}

#main pre {
  font-size: 3em;
}

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

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

Sass CSS - готовый результат 
#main
  color: black

  a
    font-weight: bold

    &:hover
      color: red

#main {
  color: black;
}

#main a {
  font-weight: bold;
}

#main a:hover {
  color: red;
}
Sass CSS - готовый результат 
a
  font-weight: bold
  text-decoration: none

  &:hover
    text-decoration: underline

  body.firefox &
    font-weight: normal

a {
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body.firefox a {
  font-weight: normal;
}
Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.

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

Sass CSS - готовый результат 
#main
  color: black

  &-sidebar
    border: 1px solid

#main {
  color: black;
}

#main-sidebar {
  border: 1px solid;
}

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

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

Sass CSS - готовый результат 
.selector
  margin:
    top: 10px
    bottom: 15px
    left: 20px
    right: 30px

.selector {
  margin-top: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 30px;
}

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

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

Sass CSS - готовый результат 
%item-base
  display: inline-block
  transition: all .5s ease
  max-width: 320px

.item-type-one
  @extend %item-base
  margin-top: 20px

.item-type-two
  @extend %item-base
  margin-top: 10px

.item-type-one, .item-type-two {
  display: inline-block;
  transition: all .5s ease;
  max-width: 320px;
}

.item-type-one {
  margin-top: 20px;
}

.item-type-two {
  margin-top: 10px;
}

2. SassScript

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

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

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

Sass CSS - готовый результат 
$accent: #FF9910

.button
  background-color: $accent
  color: #fff

.button {
  background-color: #FF9910;
  color: #fff;
}

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

Внимание! Деление в настоящее время следует выполнять функцией math.div(), а не прямым слешем, как будет показано ниже. Например: 
// Неправильно:
$summ: 10 + 20 / 2

// Правильно:
$summ: 10 + math.div(20, 2)
Обратите внимание, что для использования функции math.div() необходимо указать в самом начале sass-файла директиву подключения «@use 'sass:math'». Скачиваем и смотрим примеры из урока.

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

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

Sass CSS - готовый результат 
$summ: 10 + math.div(20, 2)
$cn: content

.selector
  margin:
    top: $summ + px
    bottom: 12px + 8px
  background-color: trans + parent
  #{$cn}: "con" + "tent"

.selector {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: transparent;
  content: "content";
}

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

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

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

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

Sass CSS - готовый результат 
$in: интер

.interpol
  content: "#{$in}поляция"

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

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

Внимание! Сложение цветов теперь следует выполнять посредством функции color.mix(), а не «+»: 
// Неправильно:
#440203 + #550506

// Правильно:
color.mix(#440203, #550506)

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

Sass CSS - готовый результат 
$color1: color.mix(#440203, #550506)
$color2: color.mix(rgba(180, 0, 0, .75), rgba(20, 255, 0, .75))

body
  background-color: $color1
  color: $color2

body {
  background-color: #990709;
  color: #020406;
  border-color: rgba(200, 255, 0, 0.75);
}
Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.
Sass CSS - готовый результат 
$translucent-red: rgba(255, 0, 0, 0.5);

p
  color: opacify($translucent-red, 0.3)
  background-color: transparentize($translucent-red, 0.25)

.selector
  background-color: rgba(#333, 0.75)

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25);
}

.selector {
  background-color: rgba(51, 51, 51, 0.75);
}

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

3.1 @import

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

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

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

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

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

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

Sass CSS - готовый результат 
@import "foo" screen;
@import "https://foo.com/bar";
@import url(foo);

@import "foo" screen;
@import "https://foo.com/bar";
@import url(foo);

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

Sass CSS - готовый результат 
@import "foo.css";
@import "media.sass";
@import "media.scss";
@import "media"; // Если импортируем media.css или _media.sass / _media.scss

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

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

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

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

3.2 @at-root

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

Sass CSS - готовый результат 
.selector
  margin-top: 10px

  @at-root
    .item
      background-color: #ccc

  .item
    background-color: #fff

.selector {
  margin-top: 10px;
}

.item {
  background-color: #ccc;
}

.selector .item {
  background-color: #fff;
}

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

4. Выражения

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

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

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

Sass CSS - готовый результат 
$var: 5

.selector
  @if $var >= 5
    content: '>= 5'
  @else if $var <= 5
    content: '<= 5'
  @else
    content: ''

.selector {
  content: '>= 5';
}

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

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

Sass CSS - готовый результат 
@for $i from 1 to 11 //through вместо to, если требуется "включительно"
  .item-#{$i}
    background-image: url(img/#{$i}.jpg)

.item-1 {
  background-image: url(img/1.jpg);
}

.item-2 {
  background-image: url(img/2.jpg);
}

.item-3 {
  background-image: url(img/3.jpg);
}

.item-4 {
  background-image: url(img/4.jpg);
}

.item-5 {
  background-image: url(img/5.jpg);
}

.item-6 {
  background-image: url(img/6.jpg);
}

.item-7 {
  background-image: url(img/7.jpg);
}

.item-8 {
  background-image: url(img/8.jpg);
}

.item-9 {
  background-image: url(img/9.jpg);
}

.item-10 {
  background-image: url(img/10.jpg);
}

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

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

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

Sass CSS - готовый результат 
@each $name in carousel, block, vertical, reviews, footer
  .section-#{$name}
    background-image: url(img/#{$name}.jpg)

.section-carousel {
  background-image: url(img/carousel.jpg);
}

.section-block {
  background-image: url(img/block.jpg);
}

.section-vertical {
  background-image: url(img/vertical.jpg);
}

.section-reviews {
  background-image: url(img/reviews.jpg);
}

.section-footer {
  background-image: url(img/footer.jpg);
}

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

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

Sass CSS - готовый результат 
$i: 7
@while $i > 0
  .item-#{$i}
    width: 1em * $i
  $i: $i - 3

.item-7 {
  width: 7em;
}

.item-4 {
  width: 4em;
}

.item-1 {
  width: 1em;
}

5. Миксины

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

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

Примеры:

Sass CSS - готовый результат 
@mixin border($color)
  border: $color 1px solid

p
  @include border(#333)


@mixin transition($time)
  -webkit-transition: all $time ease;
  -moz-transition:    all $time ease;
  -o-transition:      all $time ease;
  transition:         all $time ease;

p
  @include transition(.25s)

p {
  border: #333 1px solid;
}

p {
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

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

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

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

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс
Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих
Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»