—»     —»   Введение в Sass: установка и основы
  Раздел: CSS/Style Sheets   Комментариев: 2  

Введение в Sass: установка и основы



Сегодня мы хотим рассказать вам о CSS-препроцессоре под названием Sass или Syntactically Awesome Stylesheets.

Введение в Sass: установка и основы

Если вы читали наши статьи о LESS, то уже наверняка знакомы с CSS-препроцессорами. Как Sass, так и LESS представляют собой CSS-препроцессоры, которые, прежде всего, преобразуют способ, в котором мы компилируем простой статичный CSS-код, в более динамичный способ применения языка программирования, включая перемеренные, миксины и функции.

Установка Sass

Перед тем, как у нас будет возможность компилировать Sass, нам нужно установить его. Sass разработан на основе Ruby. Если вы работаете на Mac, то есть вероятность, что у вас уже установлен Ruby. Если вы хотите установить Ruby на Windows, используйте установщик Ruby.

После того, как установка будет завершена, вы можете перейти в Терминал (на Mac), либо в командную строку (в Windows), а затем вписать следующую команду:

На Mac:

sudo gem install sass

На Windows:

gem install sass

Если установка пройдет успешно, перед вами появится следующее оповещение.

Введение в Sass: установка и основы

Далее нам надо выбрать, за каким каталогом Sass должен следить, используя следующую команду;

sass --watch path/sass-directory

Команда, приведенная выше, будет отслеживать все файлы .scss/.sass в выбранной директории, и каждый раз, когда файлы этой директории будут изменяться, Sass будет обновлять соответствующие файлы, либо создавать новые.

Если нам нужно, чтобы Sass генерировал файлы в определенной директории, то нужно сделать следующее:

sass --watch path/sass-directory:path/css-directory

Мы также можем отслеживать отдельный файл, вместо директории. Для этого мы используем следующую строку:

sass --watch path/sass-directory/styles.css

Если команда пройдет успешно, то вы увидите оповещение вроде следующего:

Введение в Sass: установка и основы

Sass-приложения

Тем не менее, если вам не нравится работать через терминал или командную строку, вы можете использовать некоторые приложения для работы с Sass. Из бесплатных мы можем выделить Scout. Приложение было разработано на Adobe Air, поэтому запустить его можно на всех ОС (Windows, OSX и Linux).

Правда, работает оно очень медленно, судя по отзывам.

Введение в Sass: установка и основы

Если у вас не хватит терпения, есть также и платные варианты. Цены варьируются от приложения к приложению: Compass.app стоит $10, Fire.app $14, а Codekit – $25.

Выделение кода

Хотя Sass является, прежде всего, CSS-расширением, ваш текущий редактор, возможно, не сможет выделять синтаксис. К счастью, сейчас доступны некоторые дополнения практически для всех редакторов кода, которые позволяют подсвечивать код .sass и .scss.

Введение в Sass: установка и основы

Если вы работаете в 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, на самом деле, разделяют много общего:

Переменные

$color-base: #000;
$width: 100px;

Единственное отличие от переменных в LESS заключается в том, что переменная в Sass определяется знаком $.

Вложенные правила

header {
width: 980px;
height: 80px;
nav {
ul {
list-style: none;
padding: none;
margin: none;
}
li {
display: inline;
a {
text-decoration: none;
}
}
}
}

Миксины и функции

@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

Операции

li {
width: $width/5 - 10px;
}

Условные положения

@if lightness($color-base) >= 51% {
background-color: #333333;
} @else {
background-color: #ffffff;
}

В LESS вы можете сделать то же самое посредством выражения Guard, о котором можно почитать в этом руководстве.

В завершение

И на этом все! В следующих статьях мы хотим рассказать вам о Sass-языке и его коллеге, Compass. Следите за обновлениями!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: SASS, CSS
Опубликовал Design FactoRy   Прочитано (раз): 21248   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 мая 2016 @ 23:20
Написал: asdadas — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Рака яиц вам пидарасы за кучу говна который инсталятор пытается впарить. Надеюсь вы сдохнете в адских муках. Пидоры.
Комментарий #2: 2 мая 2016 @ 23:35
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Цитата: asdadas
Рака яиц вам пидарасы за кучу говна который инсталятор пытается впарить. Надеюсь вы сдохнете в адских муках. Пидоры.

Ну это вы не нам и не здесь желайте, а разработчикам на их сайте. Это сторонний дистрибутив, к которому мы не имеем ни малейшего отношения.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930