Синтактично страхотни стилове, използващи компас в Сас
В последния си пост споменахме веднъж за Compass. Според официалния сайт, той е описан като CSS Authoring Framework от отворен код.
Накратко, Compass е Sass разширение и, подобно на LESS Element of LESS, има куп готови за употреба CSS3 Mixins, с изключение на това, че е добавил и няколко други неща, които го правят по-мощен инструмент за Sass. Нека го проверим.
Инсталиране на компас
Компас, подобно на Сас, трябва да се инсталира в нашата система. Но ако използвате приложение като Scout App или Compass.app, това няма да е необходимо.
Без тях трябва да го направите “ръчно” през Терминален / команден ред. За да направите това, въведете следния команден ред;
На терминал Mac / Linux
sudo gem install компас
В командния ред на Windows
gem install компас
Ако инсталацията успее, трябва да получите уведомление, както е показано по-долу;
След това изпълнете следния команден ред в работната си директория, за да добавите Файлове на проекта Compass.
компас init
Допълнителна информация: Документация за командния ред на компаса
Конфигурация на компаса
Ако сте стартирали тази команда компас init, сега трябва да имате файл с име config.rb в работната си директория. Този файл се използва за конфигуриране на изхода на проекта. Например можем да променим предпочитаните от нас имена на директории.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Извадете линията за коментари, генерирана от Compass; ние поставяме вярно ако имаме нужда от коментари, за да бъдат отпечатани или фалшив ако не е нужно.
line_comments = false
Можем също да решим изхода на CSS. Има четири възможности, които можем да изберем : разширена, : компактен, : сгъстени : вложени. Засега просто трябва да бъде разширена, тъй като все още сме в етап на развитие.
output_style =: разширен
Мисля, че тези конфигурации ще са достатъчни за повечето проекти като цяло, но винаги можете да се обърнете към тази документация, Compass Configuration Reference, ако се нуждаете от повече предпочитания.
И накрая, ние трябва гледам всеки файл в директорията с този команден ред;
часовник на компас
Този команден ред, както и в Sass, ще наблюдава всяка промяна на файла и ще създаде или актуализира съответните CSS файлове. Но запомнете, стартирайте този ред, след като сте конфигурирали проекта config.rb, или пък просто ще игнорира промените във файла.
CSS3 Mixins
Преди да преминете през CSS3, в нашата основна .SCSS файл, трябва да импортираме Компас със следния ред @import "компас";, това ще импортира всички разширения в Compass. Но ако се нуждаем само от CSS3, можем да го направим по-конкретно с тази линия @import "компас / css3".
Допълнителна информация: Компас CSS3.
Сега, нека започнем да създаваме нещо със Saas и Compass. В HTML документа, ако приемем, че сте го създали, ще поставим следната проста маркировка:
Идеята също е проста; ние ще създадем завъртяна кутия със заоблени ъгли, а по-долу са нашите Sass вложени стилове за стартера;
тяло фон-цвят: # f3f3f3; раздел width: 500px; марж: 50px auto 0; div ширина: 250px; височина: 250px; фон-цвят: #ccc; марж: 0 авто;
И за да получим правоъгълника със заоблени ъгли, можем да включим Compass CSS3 Mixins както следва;
тяло фон-цвят: # f3f3f3; раздел width: 500px; марж: 50px auto 0; div ширина: 250px; височина: 250px; фон-цвят: #ccc; марж: 0 авто; @include border-radius;
Това граничен радиус Mixins ще генерира всички префикси на браузъра и по подразбиране радиусът на ъгъла ще бъде 5px. Но също така можем да определим радиуса на нашата нужда по този начин @include border-radius (10px); .
раздел div width: 250px; височина: 250px; фон-цвят: #ccc; марж: 0 авто; - радиус: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -ограничен радиус: 10px; граничен радиус: 10px;
След това като план ние също ще завъртим кутията. Това е много лесно да се направи с Compass, всичко, което трябва да направим е просто да извикаме метода на преобразуване, така;
тяло фон-цвят: # f3f3f3; раздел width: 500px; марж: 50px auto 0; div ширина: 250px; височина: 250px; фон-цвят: #ccc; марж: 0 авто; @include border-radius (10px); @include rotate;
Този Mixins също ще генерира тези досадни префикси на доставчиците и ротацията ще отнеме 45 градуса по подразбиране. Вижте генерираните CSS по-долу.
раздел div width: 250px; височина: 250px; фон-цвят: #ccc; марж: 0 авто; - радиус: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -ограничен радиус: 10px; граничен радиус: 10px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: завъртане (45deg); transform: rotate (45deg);
Помощници от компас
Една от най-мощните функции в Compass е Helpers. Според официалния сайт, Помощниците на компаса са функции, които увеличават функциите, предоставени от Sass. Добре, нека да разгледаме следните примери, за да получим ясна картина.
Добавяне на @ font-face файлове
В този пример ще добавим собствено семейство с шрифтове @ Шрифт лице се произнесе. В обикновен CSS3, кодът може да изглежда по следния начин, състоящ се от четири различни вида шрифтове и е трудно да се запомни за някои хора.
@ font-face семейство на шрифта: "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")); Горният код ще генерира резултат, който е точно същият като първия кодов фрагмент, той също автоматично ще открие вида на шрифта и ще го добави към формат () синтаксис.
Ако обаче погледнем кода отблизо, ще видите, че не сме добавили пътя на шрифта (/ шрифтове /). И така, как Компас знае къде се намират шрифтовете? Е, не се бъркайте, този път всъщност произлиза от 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 (на-image.png);
Освен това, Компас има и помощник за изображението, най-вече открива ширината и височината на изображението, така че в случай, че се нуждаем и от двете, да бъдат посочени в нашия CSS, можем да добавим още два реда, както следва;
div background-image: image-url ("images.png"); width: ширина на изображението ("images.png"); height: image-height ("images.png"); Резултатът ще стане нещо подобно;
div background-image: url ('/ img / images.png? 1344774650'); ширина: 80px; височина: 80px; Допълнителна информация: Помощни функции на компаса
Заключителна мисъл
Добре, днес сме обсъждали доста неща за Компас и както можете да видите, това е наистина мощен инструмент и ни позволява да пишем CSS по един по-елегантен начин..
И както вече знаехте, Сас не е единственият CSS Preprocessor; има и ПО-МАЛКО, което обсъждахме преди. В следващия пост ще се опитаме да сравним главата до главата, която един от тези две работи по-добре в предварителната обработка на CSS.
- Изтеглете Източник
