Что такое Haml/Sass? Хамл (xHTML Abstraction Markup Language) — это язык разметки для упрощенной генерации xHTML. В свою очередь, эквивалент CSS для Haml: Сасс (Синтаксически потрясающие таблицы стилей).
В этой статье я расскажу вам, чем примечателен Sass. И с помощью которого sass-файл можно скомпилировать в css. Итак, начнем.
САСС вкусности.
Sass имеет ряд преимуществ перед CSS. Я начну с Импортировать .
Самостоятельно Импортировать не является преимуществом sass перед css, но его использование становится еще более оправданным, поскольку можно подключить помимо sass-файла с ресетами и sass-файла с типографикой еще и sass-файл с «константами» (подробнее об этом ниже).
), четвертый sass-файл с «абстрактными классами» (подробнее об этом ниже).
Затем все это упаковывается в один готовый CSS. Это избавляет вас от работы с огромным кодом.
Так константы .
Допустим, мы применяем определенный параметр CSS к некоторым классам в HTML-документе, и вдруг нам нужно его изменить.
Допустим, выбираем разные элементы с синей рамкой в четыре пикселя.
И нам нужно заменить это на двухпиксельное.
Красный.
Даже если это было применимо только к трем занятиям (на самом деле это так), это уже заставляет тратить дополнительное время.
В таких случаях целесообразно использовать константы, применимые сразу к нескольким элементам.
Пример:
«Абстрактные классы» (миксины) .!main_color = #00ff00 #main :color = !main_color :p :background-color = !main_color :color #000000
Это набор параметров, который изначально не принадлежит ни одному элементу.
Но в любой момент его можно «добавить» в тот или иной набор параметров элемента или класса.
Что иногда тоже удобно.
Пример:
Арифметика .=large-text :font :family Arial :size 20px :weight bold :color #ff0000 .page-title +large-text :padding 4px :margin :top 10px
Также одним из преимуществ Sass является арифметика.
Сюда входит и вычитание цветов друг из друга, и деление длин предметов, в общем, всё.
Таким образом, цветовая схема обычно может быть задана одним цветом, а остальные могут быть заданы арифметическим путем.
В результате меняем один цвет и вуаля, у нас новая цветовая схема.
Пример:
Это самые яркие особенности sass, остальное можно увидеть в официальная документация .!main_width = 10px !unit1 = 5px !bg_color = #a5f39e #main :background-color = !bg_color p :background-color = !bg_color + #202020 :width = !main_width + !unit1
CSS-фреймворк Compass.
Теперь вопрос, как все это скомпилировать в css, если мы не собираемся разрабатывать под Ruby, Очень удобная штука вышла не так давно CSS фреймворк компас , который на самом деле работает под sass и позволяет компилировать sass в css. Мы создаем проект компаса на основе одного из этих css-фреймворков и начинаем работать, а компас автоматически отслеживает изменения в файлах sass и компилирует их в css. Compass также поддерживает 3 популярные платформы:- BluePrint
- ЮИ
- 960гс
UPD: Поправил текст про Импортировать Теги: #HAML #sass #compass #CSS #layout #css framework #CSS
-
Seo-Маркетинг: Немного Информации
19 Oct, 24 -
Майтнер, Лизе
19 Oct, 24 -
Draftly — Сервис Готовых Шаблонов Писем.
19 Oct, 24 -
4 Миллиона Регистраций
19 Oct, 24
