Главная > CSS/Style Sheets > Введение в Sass: установка и основы
Введение в Sass: установка и основы3 декабря 2012, 11:15. Разместил: Design FactoRy |
Сегодня мы хотим рассказать вам о CSS-препроцессоре под названием Sass или Syntactically Awesome Stylesheets. Если вы читали наши статьи о LESS, то уже наверняка знакомы с CSS-препроцессорами. Как Sass, так и LESS представляют собой CSS-препроцессоры, которые, прежде всего, преобразуют способ, в котором мы компилируем простой статичный CSS-код, в более динамичный способ применения языка программирования, включая перемеренные, миксины и функции. Установка Sass Перед тем, как у нас будет возможность компилировать Sass, нам нужно установить его. Sass разработан на основе Ruby. Если вы работаете на Mac, то есть вероятность, что у вас уже установлен Ruby. Если вы хотите установить Ruby на Windows, используйте установщик Ruby. После того, как установка будет завершена, вы можете перейти в Терминал (на Mac), либо в командную строку (в Windows), а затем вписать следующую команду: На Mac:
На Windows:
Если установка пройдет успешно, перед вами появится следующее оповещение. Далее нам надо выбрать, за каким каталогом Sass должен следить, используя следующую команду;
Команда, приведенная выше, будет отслеживать все файлы .scss/.sass в выбранной директории, и каждый раз, когда файлы этой директории будут изменяться, Sass будет обновлять соответствующие файлы, либо создавать новые. Если нам нужно, чтобы Sass генерировал файлы в определенной директории, то нужно сделать следующее:
Мы также можем отслеживать отдельный файл, вместо директории. Для этого мы используем следующую строку:
Если команда пройдет успешно, то вы увидите оповещение вроде следующего: Sass-приложения Тем не менее, если вам не нравится работать через терминал или командную строку, вы можете использовать некоторые приложения для работы с Sass. Из бесплатных мы можем выделить Scout. Приложение было разработано на Adobe Air, поэтому запустить его можно на всех ОС (Windows, OSX и Linux). Правда, работает оно очень медленно, судя по отзывам. Если у вас не хватит терпения, есть также и платные варианты. Цены варьируются от приложения к приложению: Compass.app стоит $10, Fire.app $14, а Codekit – $25. Выделение кода Хотя Sass является, прежде всего, CSS-расширением, ваш текущий редактор, возможно, не сможет выделять синтаксис. К счастью, сейчас доступны некоторые дополнения практически для всех редакторов кода, которые позволяют подсвечивать код .sass и .scss. Если вы работаете в Sublime Text 2, то можете воспользоваться этими дополнениями: Sublime Text HAML & Sass и Sublime Text 2 Sass Package, и для того, чтобы облегчить себе задачу, вы можете установить их посредством Package Control. Для других редакторов мы предлагаем вам ознакомиться с подборкой ниже: * Отличный скринкаст о том, как работать с Sass в Dreamweaver * Режим Sass для Coda. Но нам кажется, что этот режим был интегрирован с Coda второй версии * Официальное дополнение SCSS для TextMate * Espresso Sugar для Sass * Дополнения для InType Язык Sass Sass и LESS, на самом деле, разделяют много общего: Переменные
Единственное отличие от переменных в LESS заключается в том, что переменная в Sass определяется знаком $. Вложенные правила
Миксины и функции
Операции
Условные положения
В LESS вы можете сделать то же самое посредством выражения Guard, о котором можно почитать в этом руководстве. В завершение И на этом все! В следующих статьях мы хотим рассказать вам о Sass-языке и его коллеге, Compass. Следите за обновлениями! Вернуться назад |