Установка SASS(SCSS) на Ubuntu. Наверняка многие из вас слышали о препроцессорах и о том, что они упрощают жизнь верстальщикам (хотя это оч спорный вопрос). Чтобы узнать, вкусная ли булочка лежит на витрине магазина, ее нужно купить и попробовать - именно это мы с вами сегодня и сделаем. В двух словах, для тех кто не слышал о том, что такое SASS: Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции css кода файлов каскадных таблиц стилей. Sass упрощает создание css, добавляя ему гибкости при написании кода. Конечно же, на выходе (после компиляции) вы получите все тот же обычный css-файл, но в процессе его написания у Вас будет ряд преимуществ. Вы можете удобно разбить свои стили на разные файлы, используя !import. Однако в отличии от стандартного импорта в css, у вас есть возможность подключать файл с переменными, в которых вы можете описать одинаковые значения свойств, да-да, вы не ослышались, в Sass есть возможность использовать переменные. Приведу небольшой пример:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

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

av {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

На выходе вы получите такой 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, нужно выполнить следующие действия:

1. Установить ruby:

   sudo apt-get install ruby

   (под Windows можно использовать http://rubyinstaller.org/downloads/ или https://www.ruby-lang.org/en/downloads/)
2. И установить сам Sass:

   sudo gem install sass

Для использование Sass из командной строки используйте синтаксис: sass input.scss output.css - данная команда переконвертирует input.scss в output.css. Также вы можете сказать Sass, чтобы он смотрел за изменениями в input.scss и обновлял css-файл (output.css) каждый раз, когда изменяется файл Sass (input.scss): sass --watch input.scss:output.css. Если у вас папка с кучей Sass файлов, то вы можете использовать следующий синтаксис: sass --watch app/sass:public/stylesheets где app/sass - путь к папке с sass файлами, а public/stylesheets - путь, где лежат или будут лежать css. Если вас задалбывает каждый раз писать путь к файлам, то вы можете воспользоваться утилитой Compass для автоматического слежения за изменениями в Sass и генерации css. Для установки Compass нужно выполнить следующую команду в терминале:

sudo apt-get install ruby-compass

Теперь, когда наш Compass установлен, нам необходимо создать файл конфигурации для последующего наблюдения за изменениями в фалах Sass и генерации css. Для этого нужно выполнить команду compass create. Далее запускаем Compass в режиме наблюдения командой: compass watch. По умолчанию все css файлы будут записываться в директорию stylesheets в текущей папке (Папка проекта), однако все это можно изменить в файле config.rb, который после генерации его командой compass create, лежит в папке вашего проекта. Содержимое файла изначально у вас будет примерно таким:

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Как вы, наверное, сами догадались, параметр css_dir - это папка, куда будут помещаться уже сгенерированные из Sass css файлы. Заменяем css_dir = "stylesheets" на css_dir = "css" и вот у нас уже другая директория с нашими таблицами стилей. Аналогично и с другими параметрами.

Удачного пользования!