Синтаксически удивительные таблицы стилей, использующие компас в Sass
В нашем последнем посте мы уже упоминали о Компасе. Согласно официальному сайту, это описывается как CSS Authoring Framework с открытым исходным кодом.
Короче говоря, Compass является расширением Sass и, как и LESS Element of LESS, имеет множество готовых к использованию CSS3-миксов, за исключением того, что он также добавил несколько других вещей, которые делают его более мощным сопутствующим инструментом для Sass. Давай проверим.
Установка Компаса
Компас, как Sass, должен быть установлен в нашей системе. Но если вы используете приложение, такое как Scout App или Compass.app, в этом нет необходимости.
Без них нужно это сделать “вручную” через Терминал / Командная строка. Для этого введите следующую командную строку;
На Mac / Linux Terminal
sudo gem установить компас
В командной строке Windows
драгоценный камень установить компас
Если установка прошла успешно, вы должны получить уведомление, как показано ниже;
Затем запустите следующую командную строку в вашем рабочем каталоге, чтобы добавить Файлы проекта компаса.
компас иници
Дальнейшее чтение: Документация командной строки компаса
Конфигурация компаса
Если вы запустили эту команду компас иници, теперь у вас должен быть файл с именем config.rb в вашем рабочем каталоге. Этот файл используется для настройки вывода проекта. Например, мы можем изменить наши предпочтительные имена каталогов.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Уберите строку комментария, сгенерированную Compass; мы установили правда если нам нужно, чтобы комментарии были напечатаны или ложный если это не должно.
line_comments = false
Мы также можем решить вывод CSS. Есть четыре варианта, которые мы можем выбрать : расширенная, : компактный, : сжатыйа также : вложенная. На данный момент нам просто нужно его расширить, так как мы все еще на стадии разработки.
output_style =: расширенный
Я думаю, что этих конфигураций будет достаточно для большинства проектов в целом, но вы всегда можете обратиться к этой документации, Справочник по конфигурации Compass, если вам нужно больше настроек.
Наконец, нам нужно часы каждый файл в каталоге с этой командной строкой;
компас смотреть
Эта командная строка, как и в Sass, будет отслеживать каждое изменение файла и создавать или обновлять соответствующие CSS-файлы. Но помните, запустите эту строку после того, как вы выполнили настройку проекта в config.rb, иначе он просто проигнорирует изменения в файле.
CSS3 Mixins
Прежде чем идти через CSS3, в нашем основном .СКС файл, нам нужно импортировать компас со следующей строкой @import "компас";, это импортирует все расширения в Compass. Но если нам нужен только CSS3, мы также можем сделать это более конкретно с помощью этой строки @import "compass / css3".
Дальнейшее чтение: Компас CSS3.
Теперь давайте начнем создавать что-то с Saas и Compass. В HTML-документе, если вы его создали, мы поместим следующую простую разметку:
Идея также проста; мы создадим повернутый прямоугольник с закругленными углами, а ниже - наши вложенные стили Sass для начинающих;
body background-color: # f3f3f3; раздел ширина: 500 пикселей; поле: 50px, авто 0; div ширина: 250 пикселей; высота: 250 пикселей; цвет фона: #ccc; поле: 0 авто;
И чтобы получить наш прямоугольник с закругленными углами, мы можем включить Compass CSS3 Mixins следующим образом;
body background-color: # f3f3f3; раздел ширина: 500 пикселей; поле: 50px, авто 0; div ширина: 250 пикселей; высота: 250 пикселей; цвет фона: #ccc; поле: 0 авто; @include border-radius;
это граница радиуса Mixins сгенерирует все префиксы браузера и, по умолчанию, угловой радиус будет 5px. Но мы также можем указать радиус нашей потребности таким образом @include border-radius (10px); .
раздел div ширина: 250 пикселей; высота: 250 пикселей; цвет фона: #ccc; поле: 0 авто; -webkit-border-radius: 10 пикселей; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; радиус границы: 10 пикселей;
Далее по плану мы тоже будем вращать коробку. Это действительно легко сделать с Compass, все, что нам нужно сделать, это просто вызвать метод преобразования, вот так;
body background-color: # f3f3f3; раздел ширина: 500 пикселей; поле: 50px, авто 0; div ширина: 250 пикселей; высота: 250 пикселей; цвет фона: #ccc; поле: 0 авто; @include border-radius (10px); @include rotate;
Этот Mixins также сгенерирует эти утомительные префиксы вендоров, и поворот по умолчанию займет 45 градусов. Смотрите сгенерированный CSS ниже.
раздел div ширина: 250 пикселей; высота: 250 пикселей; цвет фона: #ccc; поле: 0 авто; -webkit-border-radius: 10 пикселей; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; радиус границы: 10 пикселей; -webkit-transform: повернуть (45 градусов); -moz-transform: повернуть (45 градусов); -ms-преобразование: поворот (45 градусов); -отрансформировать: повернуть (45 градусов); преобразование: вращение (45 градусов);
Компас Помощники
Одна из самых мощных функций Compass - это помощники. По данным официального сайта, Помощники компаса - это функции, которые дополняют функции, предоставляемые Sass. Хорошо, давайте посмотрим на следующие примеры, чтобы получить ясную картину.
Добавление файлов @ Font-face
В этом примере мы собираемся добавить семейство пользовательских шрифтов с @ Шрифт-лицо править. В простом CSS3 код может выглядеть примерно так, как показано ниже, состоящий из четырех различных типов шрифтов, и это также трудно запомнить для некоторых людей.
@ font-face font-family: "MyFont"; Формат src: url ('/ fonts / font.ttf') ('truetype'), формат url ('/ fonts / font.otf') ('opentype')), формат url ('/ fonts / font.woff') ('woff'), формат url ('/ fonts / font.eot') ('embedded-opentype'); С компасом мы можем сделать то же самое легче с шрифт-файлы () Помощники;
@include font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); Приведенный выше код сгенерирует результат, который точно соответствует первому фрагменту кода, он также автоматически определит тип шрифта и добавит его в формат() синтаксис.
Однако, если мы внимательно посмотрим на код, вы увидите, что мы не добавили путь шрифта (/ шрифты /). Итак, как Compass узнал, где расположены шрифты? Ну, не запутайтесь, этот путь на самом деле происходит от config.rb с fonts_path имущество;
fonts_dir = "шрифты"
Итак, скажем, мы изменим это fonts_dir = "myfonts", тогда сгенерированный код будет URL ( '/ MyFonts / font.ttf'). По умолчанию, когда мы не указываем путь, Compass направит его на таблиц стилей / шрифты.
Добавление изображения
Давайте создадим другой пример, на этот раз мы будем добавлять изображение. Добавление изображений через CSS - обычное дело. Обычно мы делаем это с помощью изображение на заднем плане собственность, как так;
div background-image: url ('/ img / the-image.png'); В компасе, а не с помощью URL () функция, мы можем заменить ее URL изображения() Помощники и похожие на добавление @ Шрифт-лицо выше, мы можем полностью игнорировать путь и позволить Compass обрабатывать остальное.
Этот код также будет генерировать точно такое же объявление CSS, как в первом фрагменте.
div background-image: image-url (the-image.png);
Кроме того, в Compass также есть помощники по измерению изображений, которые в первую очередь определяют ширину и высоту изображения, поэтому в случае, если нам нужно, чтобы они оба были указаны в нашем CSS, мы можем добавить еще две строки следующим образом;
div background-image: image-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png"); Результат станет примерно таким;
div background-image: url ('/ img / images.png? 1344774650'); ширина: 80 пикселей; высота: 80 пикселей; Дальнейшее чтение: Функции компаса
Последняя мысль
Хорошо, сегодня мы много говорили о Compass, и, как вы можете видеть, это действительно мощный инструмент, который позволяет нам писать CSS более элегантным способом..
И, как вы уже знали, Sass не единственный CSS препроцессор; Есть также МЕНЬШЕ, которое мы подробно обсудили ранее. В следующем посте мы попытаемся сравнить один на один, какой из этих двух способов лучше справляется с предварительной обработкой CSS.
- Скачать исходный код
