Начало работы с установкой Sass и основами
В этом посте мы собираемся обсудить препроцессор CSS под названием Sass или Синтаксически удивительные таблицы стилей.
Если вы читали наши предыдущие посты на LESS, мы уверены, что вы знакомы с CSS препроцессор. И Sass, и LESS - это препроцессоры CSS, которые в основном расширяют способ, которым мы пишем простой-статический CSS более динамичным способом, используя языки программирования, такие как переменные, миксины и функции..
Установка Sass
Прежде чем мы сможем написать Sass, нам нужно установить его. Sass построен на Ruby. Если вы работаете на Mac, скорее всего, у вас уже установлен Ruby. Если вы можете установить Ruby в Windows, используйте этот установщик Ruby.
После завершения установки вы можете зайти в терминал (на Mac) или в командной строке (в Windows), а затем ввести в нем следующую командную строку:
На Mac;
sudo gem установить sass
На винде;
Gem Install Sass
Если установка прошла успешно, в вашем терминале / командной строке появится следующее уведомление.
Далее нам нужно выбрать каталог для просмотра Sass, используя следующую команду;
sass - путь к часам / sass-каталог
Командная строка выше будет смотреть каждый .СКС/.пререкаться файлы в путь / каталог и всякий раз, когда один из файлов в этом каталоге изменяется, Sass обновляет соответствующие файлы или создает один, если его нет.
Если нам нужен Sass для генерации файлов в определенном каталоге, мы можем сделать это следующим образом;
sass - смотреть путь / sass-каталог: путь / css-каталог
С помощью этой командной строки мы также можем наблюдать конкретный файл, а не каталог;
sass - путь к часам / sass-directory / styles.css
Если команда watch завершится успешно, в вашем терминале / командной строке появится что-то вроде этого уведомления ниже.
Дальнейшее чтение: Автоматическая компиляция файлов Sass с помощью Sass 3
Sass Applications
Однако, если вам не нравится работать через терминал или командную строку, вы можете использовать некоторые приложения для Sass. Бесплатный вариант - Скаут; он построен на Adobe Air, поэтому его можно запускать на всех ОС (Windows, OSX и Linux).
Тем не менее, он работает очень медленно, как некоторые ранее сообщали.
Так что, если у вас нет терпения для этого, есть также некоторые платные варианты. Цена варьируется для каждого приложения, Compass.app стоит 10 долларов, Fire.app, 14 долларов и Codekit - 25 долларов..
Подсветка кода
Хотя Sass является в основном расширением CSS, ваш текущий редактор может не выделить синтаксис должным образом. К счастью, уже есть несколько пакетов для почти любого редактора кода, чтобы включить .пререкаться или же .СКС подсветка кода.
Если вы работаете с Sublime Text 2, как я, вы можете использовать эти пакеты; Sublime Text HAML & Sass и Sublime Text 2 Sass Package, и для более простого способа вы можете установить один из этих пакетов через Управление пакетами.
Для других редакторов кода, смотрите ниже, или попробуйте Googling для этого.
- Это отличное руководство по работе с Sass в Dreamweaver.
- Sass Mode для Coda. Но, похоже, этот режим был интегрирован с Coda, начиная с версии 2
- TextMate Официальный пакет SCSS
- Эспрессо Сахар для Sass
- InType Bundles
Sass Language
Sass и LESS на самом деле имеют несколько общих языков, ниже приведены некоторые из них.
переменные
$ color-base: # 000; ширина: 100 пикселей;
Единственное отличие от переменных LESS состоит в том, что переменная в Sass определяется с помощью $ знак.
Правила вложенности
заголовок ширина: 980 пикселей; высота: 80 пикселей; nav ul list-style: none; набивка: нет; поле: нет; li display: inline; a текстовое оформление: нет;
Mixins и функции
@mixin border-radius ($ radius) -moz-border-radius: $ радиус; -webkit-border-radius: $ радиус; -ms-border-radius: $ радиус; border-radius: $ радиус;
операции
li width: $ width / 5 - 10px;
Условный оператор
@if lightness ($ color-base)> = 51% background-color: # 333333; @else background-color: #ffffff;
В LESS вы можете сделать то же самое с помощью выражения Guard, о котором мы говорили в этом уроке..
Последняя мысль
И это все. В следующем посте мы начнем изучать языки Sass и его компаньон Compass. Оставайтесь в курсе.
