Ruby on Rails c нуля!

Вот и дошли мои руки, ноги и сознание до изучения такой штуковины, как SASS / SCSS.

SASS — это синтаксический сахар для CSS. Аббревиатура SASS расшифровывается как Syntactically Awesome StyleSheets.

SCSS — это новое название SASS начиная с 3й версии и расшифровывается как Sassy CSS. Основное отличие SCSS — это улучшенная поддержка CSS3 и то, что в SCSS можно писать на каноническом CSS (можно сказать, что SCSS является надмножеством CSS).

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

Я уже писал на RubyDev об использовании языка HAML в Rails и с тех пор я стал его активно использовать вместо стандартного ERB. В этой статье я расскажу об SASS / SCSS. SASS / SCSS является проектом созданным под вдохновением от HAML, кроме того, чаще всего SCSS и HAML используются вместе. Эту статью о SASS / SCSS и статью о HAML можете считать предисловием к грядущим статьям по Compass и AssetsPipeline в Rails 3.1. Конкретно в данной статье рассматривается использование SASS / SCSS в приложении на Rails 3.0.9.

Установка SASS/SCSS

SASS/SCSS поставляется в виде обыкновенного gem’а, соответственно устанавливается традиционным способом:

$ gem install sass

Мы также можем добавить запись gem ‘sass’, «~>3.1″ в файл Gemfile и выполнить команду:

$ bundle install

Тестовое приложение

В качестве тестового приложения я взял кусок с разрабатываемого мною RubyDev 2.0 на Rails 3.1.1 и мигрировал его на Rails 3.0.9. Большой разницы между работой с SASS / SCSS в 3.0 и 3.1 нету, разница будет описана в отдельной статье об Assets Pipeline в Rails 3.1.

На данный момент CSS нашего приложения выглядит следующим образом:

#../public/stylesheets/style.css
body{
  background:#F5F6F7;
  font:12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
  color:#333;}

#wrapper{
  width:1000px;
  margin:20px auto;}

#header{margin:0 0 20px;overflow:hidden;}
#header>h1{
  margin:10px 0 0;
  color:#333;
  font-size:1.7em;
  float:left;
  width:300px;}

#menu{
  float:left;
  background:#339;
  padding:7px 10px;
  margin:5px;
  border-radius:4px;
  box-shadow:0 0 3px #ccc;}

#menu>a{
  color:#fff;
  float:left;
  padding:10px;
  margin:-7px 0;}

#menu>a:hover{
  color:#00BFFF;
  background:#228;}

#content{
  background:#fff;
  border-radius:4px;
  padding:20px;
  width:700px;
  float:left;
  border:1px solid #ccc;
  box-shadow: 0 0 3px #ccc;
}

#right-bar{
  float:left;
  width:205px;
  background:#fff;
  margin:0 0 0 10px;
  padding:20px;
  border-radius:4px;
  border:1px solid #ccc;
  box-shadow:0 0 3px #ccc;
}

.post{margin:0 0 40px;}
.post>h1>a{
  font-size:1.7em;
  color:#44c;}

.datetime{
  font-size:.75em;
  color:#ccc;}

В качестве решения для обнуления стилей я использую reset.css от YUI, его трансформировать в SCSS нет смысла, да и трансформировать там особо нечего.
Наше знакомство с SASS/SCSS будет сводиться к тому, что мы перепишем наши стили с канонического CSS на SCSS. Помните, что CSS совместим с SCSS (SASS 3), но не совместим с SASS < 3 версии так как там используется отличающийся синтаксис. Мы будем использовать самую последнюю версию SASS — SCSS 3.1.10.

Разбиение мифов о производительности
Многие начинающие разработки боятся использовать HAML и SASS потому, что это якобы очень затратно с точки зрения производительности. На самом деле это затратно только в development — окружении, но в production HAML уступает стандартному ERB всего на жалкие 2-5%, зато значительно упрощает написание кода представлений и делает его значительно более читабельным и легко поддерживаемым.Что касается SASS, то SASS же вообще не уступает каноническому CSS поскольку таблицы стилей не имеет смысла рендерить каждый раз и в production окружении SASS / SCSS компилируется в CSS при первом запросе, на все остальные запросы выдается уже приготовленный и приправленный по всем канонам CSS-кухни CSS код.

Вопрос производительности вообще не должен вас волновать, если вы не работаете над каким-нибудь Twitter’ом или Facebook’ом, иначе вам стоит отказаться от Ruby и Rails и посмотреть в сторону замечательных языков Си, или, что еще лучше, Assembler.

О процессе
Дальнейший процесс изучения работы с SASS / SCSS пройдет следующим образом — мы по очереди рассмотрим все основные возможности SASS / SCSS и будем их поочередно применять к нашему коду, после чего подведем итоги — сравним читабельность и размер обоих вариантов на CSS и на SASS.

Организация проекта и компиляция SASS / SCSS в CSS
Для начала поменяем расширения файлов с *.css на *.scss и переместим их в поддиректорию /sass, которая по умолчанию должна находиться в директории ../public/stylesheets/. При запуске сервера приложения и запросе к серверу — автоматически будут сгенерированы *.css — файлы с соответствующими *.scss-файлам именами.

1. Переменные
Переменные в SCSS — одна из наиболее востребованных в CSS возможностей. Переменные позволяют определять значения свойств в определенной переменной, а затем использовать переменную с понятным именем в коде таблиц стилей. Например, вместо #0000cc мы можем использовать переменную $cblue с этим значением, чем сделаем код более читабельным и получим возможность переопределять параметры в одном месте. Пример:

$cblue: #0000cc;

2. Вложенные селекторы

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

#content{
  color:#cc0000;
  p {
    font-size:.8em;
  }
}

Результат:

#content{
  color:#cc0000;
}
#content p {
  font-size: .8em;
}

Пример с родительским указателем:

a{
  color: #22f;
  &:hover: {
    color: #f22;
  }
}

результат:

a{color: #22f;}
a:hover{color: #f22;}

3. Вложенные свойства
SASS позволяет использовать более лаконичный синтаксис для объявления свойств, которые имеют префиксы, например font-size, font-weight и т.д.. Пример:

.bold-text-block{
  font: {
    size: 1.1em;
    weight: bold;
  }
}

4. Примеси

SASS/SCSS также как и Ruby имеет концепцию примесей. Примеси — это специально объявленные куски SCSS кода, которые могут подмешиваться в другие стили. Примеси будут очень полезны для выDRYивания вашего CSS кода ведь весь повторяющийся код можно вынести в отдельный подмешиваемый блок — примесь. Примеси создаются при помощи специальной директивы @mixin за которой следует имя примеси и перечень свойств и переменных в фигурных скобках. Пример:

@mixin base_box($size, $mpsize){
  width: $size;
  margin: $mpsize;
  padding: $mpsize;
  color: #eee;
}

.first-col, .second-col {
  @include base-box(500px, 20px);
}

Как можно догадаться, примеси подмешиваются при помощи директивы @include и могут принимать аргументы.

5. SASS partial’ы
SASS также обладает концепцией partial’ов — часто повторяющихся кусков кода, что вынесены в отдельный файл. Включать partial’ы можно используя ту же директиву @include, которая принимает в качестве аргумента — имя файла в скобках и без подчеркивания. Например, у нас есть файл _scss_partial.scss, тогда мы можем подключить его следующим образом:

@include «scss_partial»

@include также можно использовать для подключения других файлов стилей.

6. Операторы и предопределенные функции
SCSS позволяет использовать различные функции и операторы для работы со значениями свойств. Честно признаться из всего набора функций мне лично пригодились только функции lighness(), для работы с цветом, и операторы +, -, *, /. Хотя имеется несколько больше операторов: +, -, *, /, % и значительно больше функций: lighness(), hue(), saturation(), transparentize(), rgba(), hsl() и т.д. Пример:

color: #ee0000 + #0100aa;

$red = #cc2222;

Лично я успешно обхожусь без использования функций -  мне вполне хватает имеющихся операторов.

7. Интерполяция

SASS позволяет вам использовать стандартный для строк в Ruby синтаксис интерполяции, в любое место SCSS кода вы можете вставить #{…} где внутри фигурных скобок будет какое-нибудь выражение, например, переменная или выражение.

9. Управляющие директивы
То, что авторы назвали SASS Script включает в себя кроме переменных, функций и операторов еще и различные директивы в том числе такие как @if, @each, @while и @for, которые как не сложно догадаться используются для организации условий и циклов. На сколько я понимаю эти директивы не рекомендуется активно использовать. Они просто существуют на всякий случай, но этого случая следует избегать.

Результат
Мы совсем кратко познакомились с основными возможностями SASS/SCSS и переписали стили, которые у нас были написаны с использованием канонического CSS. Давайте посмотрим на результат:

//style.scss
@import "reset.scss";

$base-background-color: #f5f6f7;
$base-font-color: #333;
$base-fonts: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;

$title-link-color: #44c;
$control-blue-color: #339;

$content-shadow-color: #ccc;
$content-border-size: 4px;
$content-border-color: #fff;

@mixin content_block($width, $mg-size: 20px, $pd-size: 20px){
  width: $width - ($content-border-size + $pd-size)* 2;
  background: #fff;
  background-color: #fcfcfc;

  margin:{
    top: 0;
    left: 0;
    right: $mg-size;
    bottom: $mg-size;
  }

  padding: $pd-size $pd-size $pd-size * 2;

  border-radius: 4px;
  float: left;
  border: 3px solid $content-border-color;
  box-shadow: 0 0 3px $content-shadow-color;
}

body {
  background: $base-background-color;
  font: 12px/18px $base-fonts;
  color: $base-font-color;
}

#wrapper {
  width: 1000px;
  margin: 20px auto;
}

#header {
  margin: 0 0 20px;
  overflow: hidden;

  h1{
    margin: 10px 0 0;
    font-size: 1.7em;
    float: left;
    width: 300px;
  }
}

#menu{
  float: left;
  background: $control-blue-color;
  padding: 7px 10px;
  margin: 5px;
  border-radius: 4px;

  &>a{
    color:#fff;
    float:left;
    padding:10px;
    margin:-7px 0;

    &:hover{
      color:#00BFFF;
      background:$control-blue-color / 1.5;
    }
  }
}

#content {
  @include content-block(730px);
}

#right-bar {
  @include content-block(250px, 0);
}

.post {
  margin:0 0 40px;

  &>h1>a{
    font-size:1.7em;
    color:#44c;
  }

  .datetime{
    font-size:.75em;
    color:#bbb;
  }
}

Выгоды от использования SASS/SCSS, которые я получил

1.  CSS стало приятней писать ибо в нем появились элементы программирования =)
2.  SCSS — это CSS, который легко поддерживать, мне не нужно листать весь файл стилей или несколько файлов стилей, чтобы изменить размер внутренних отступов, я это могу сделать в одном единственном файле и в одной единственной строке.
3.  Удобнее работа со свойствами. Если я хочу сделать цвет фона ссылки при наведении более темным, то я просто делю цвет, что был на определенное число, если светлее — то умножаю. Используя + или — я могу добавить красного, синего или зеленого цвета или всех сразу.
4.  В Development окружении компиляция происходит практически мгновенно, а в Production компиляция SASS/SCSS в  CSS будет происходить только при первом запросе, а дальше будут отдаваться уже сгенерированный с первого запроса CSS код.
5. Я могу удобно разбивать CSS код на несколько файлов, а затем склеивать их все в одно целое, — это лучше, явного перечисления всех необходимых к подключению css в stylesheet_link_tag и быстрее ведь будет использоваться один файл а не несколько файлов стилей, а значит уменьшится количество HTTP запросов.
6. Я могу писать в SCSS на каноническом CSS (в отличие от версий SASS предшествовавших 3.х версиям) и затем его оптимизировать ведь SCSS — это не что-то революционно новое и страшное, а просто улучшенное, знакомое старое.
7.  В SASS / SCSS содержится отладчик, что позволяет легко найти ошибку в SCSS коде.

Хорошая новость для верстальщиков
Во многих компаниях использование HAML и SASS / SCSS считается обязательным, эти компании готовы платить верстальщику заметно больше за использование этих технологий, вообще верстальщик поверхностно знакомый с Rails может зарабатывать до двух раз больше, чем он бы зарабатывал верстая для проекта на любой другой платформе, при этом расширить свой опыт верстки  знанием HAML и SCSS можно всего за один день.

Итог

Мне очень понравился HAML и после того, как я попробовал верстать на нем я полностью забил на ERB. Теперь, когда я попробовал SCSS я буду его активно использовать и пропагандировать. HAML + SASS / SCSS — это значительное упрощение и ускорение работы.

Ссылки

Лучшая благодарность автору — ваши комментарии!