Синтаксично Awesome Стилі використовують компас в Sass

На нашому останньому посту ми згадували один раз про компас. За даними офіційного сайту, це описано як CSS Authoring Framework з відкритим вихідним кодом.

Коротше кажучи, компас - це розширення Sass і, подібно LESS Element LESS, він має купу готових до використання CSS3 Mixins, за винятком того, що він також додав кілька інших речей, які роблять його більш потужним інструментом для компаньйону Sass. Давайте перевіримо це.

Встановлення компаса

Компас, як і Сасс, потрібно встановити в нашій системі. Але, якщо ви використовуєте додаток, як Scout App або Compass.app, це не буде необхідно.

Без них вам потрібно це зробити “вручну” через Термінал / командний рядок. Для цього введіть наступний командний рядок;

На терміналі Mac / Linux

 sudo gem встановити компас 

У командному рядку Windows

 gem встановити компас 

Якщо інсталяція завершиться успішно, потрібно отримати сповіщення, як показано нижче;

Потім запустіть наступний командний рядок у вашому робочому каталозі, щоб додати його Файли проектів Compass.

 компас init 

Подальше читання: Документація командного рядка компаса

Конфігурація компаса

Якщо ви виконали цю команду компас init, тепер ви повинні мати файл з ім'ям config.rb у вашому робочому каталозі. Цей файл використовується для налаштування виводу проекту. Наприклад, ми можемо змінити назви бажаних каталогів.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Вилучіть рядок коментарів, що генерується компасом; ми ставимо вірно якщо нам потрібні друк або коментарі помилковий якщо це не потрібно.

 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 вкладені стилі для стартера;

 тіло background-color: # f3f3f3;  секція ширина: 500px; запас: 50px auto 0; div width: 250px; висота: 250px; background-color: #ccc; маржа: 0 авто;  

І, щоб отримати наш прямокутник закругленими кутами, ми можемо включити Compass CSS3 Mixins наступним чином;

 тіло background-color: # f3f3f3;  секція ширина: 500px; запас: 50px auto 0; div width: 250px; висота: 250px; background-color: #ccc; маржа: 0 авто; @ включити радіус кордону;  

Це кордон-радіус Mixins буде генерувати всі префікси браузера і, за замовчуванням, радіус кута буде 5px. Але ми також можемо вказати радіус нашої потреби таким чином @include border-radius (10px); .

 section div ширина: 250px; висота: 250px; background-color: #ccc; маржа: 0 авто; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -о-прикордонний радіус: 10px; кордон-радіус: 10px;  

Далі, як план, ми також повернемо вікно. Це дійсно легко зробити з компасом, все, що нам потрібно зробити, це просто викликати метод перетворення, так;

 тіло background-color: # f3f3f3;  секція ширина: 500px; запас: 50px auto 0; div width: 250px; висота: 250px; background-color: #ccc; маржа: 0 авто; @include border-radius (10px); @include rotate;  

Цей Mixins також буде генерувати ці стомлюючі префікси постачальників, а обертання за замовчуванням займе 45 градусів. Див. Сформований CSS нижче.

 section div ширина: 250px; висота: 250px; background-color: #ccc; маржа: 0 авто; -webkit-border-radius: 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: rotate (45deg); transform: rotate (45deg);  

Compass Helpers

Однією з найпотужніших функцій Compass є помічники. За даними офіційного сайту, Помічники компаса - це функції, що доповнюють функції, які надає 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');  

З компасом ми можемо зробити те ж саме легше font-files () Помічники;

 @include font-face ("MyFont", шрифт-файли ("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-зображення () Помічники та подібні до них @ font-face вище, ми можемо повністю ігнорувати шлях і дозволити Compass обробляти решту.

Цей код також буде генерувати точно таку ж декларацію CSS, що й у першому фрагменті.

 div background-image: зображення-url (-image.png);  

Крім того, Компас також має помічників Image Dimension, він в першу чергу виявляє ширину і висоту зображення, тому у випадку, якщо ми повинні їх обидва вказати в нашому CSS, ми можемо додати ще два рядки наступним чином;

 div background-image: зображення-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png");  

Результат стане таким:

 div background-image: url ('/ img / images.png? 1344774650'); ширина: 80px; висота: 80px;  

Подальше читання: Функції помічників компаса

Заключна думка

Добре, сьогодні ми обговорювали багато про компас, і, як ви бачите, це дійсно потужний інструмент і дозволяє нам писати CSS більш елегантно..

І, як ви вже знали, Сасс не єдиний Препроцесор CSS; є також МЕНШІ, які ми докладно обговорювали раніше. У наступному пості ми спробуємо порівняти голова до голови, яка одна з цих двох покращує роботу CSS.

• Завантажити джерело