Розміщення серверів в надійних дата-центрах Європи. Відкрийте хмарний VPS / VDS сервер на швидких SSD за 1 хвилину!
Кращий хостинг:
- захистить дані від несанкціонованого доступу в охоронюваному європейському ЦОДі
- прийме оплату хоч в bitcoin.
- дозволить поставити свій дистрибутив
- захист від DDos-атак
- безкоштовний backup
- Uptime 99,9999%
- ЦОД - TIER III
- провайдер - TIER I
Підтримаємо російською мовою 24/7/365 Працюємо з юрособами і фізособами. Вам прямо зараз потрібно 24 ядра і 72 Gb RAM. Будь ласка!
Наші вигідні тарифи доведуть, що дешевий хостинг ви ще не знали!
Хвилинна справа: виберіть конфігурацію, оплатіть і CMS на VPS готова.
Money Back - 30 днів!
Банківськими картами, електронною валютою, через термінали Qiwi, Webmoney, PayPal, Новоплат і ін.
Задайте питання в службу підтримки 24/7/365
Знайдіть відповіді в нашій базі і познайомтеся з рекомендаціями
Пропозиція від 8host.com
Sass - це CSS-препроцесор, який значно прискорює і спрощує процес створення таблиці стилів в порівнянні з використанням звичайного CSS. Динамічні компоненти Sass дозволяють зменшити код, а також роблять його більш універсальним. Синтаксис Sass схожий на трохи покращений синтаксис CSS.
Даний посібник продемонструє, як встановити та запустити Sass на Ubuntu VPS. Для виконання керівництва потрібно мати попередньо налаштований сервер Ubuntu (і веб-сервер, якщо потрібен браузер).
Будь ласка, зверніть увагу, що Sass можна встановити і на системи Windows і OS X.
Щоб отримати інструкції по початкового налаштовування сервера, зверніться до даної статті.
установка Sass
Для установки Sass потрібно спочатку встановити Ruby. Крім того, необхідно встановити rubygems (систему управління пакетами Ruby). Для цього використовуйте команди:
sudo apt-get update
sudo apt-get install ruby-full rubygems
Тепер використовуйте команду gem, щоб встановити Sass:
sudo gem install sass
Готово! Препроцесор Sass встановлений, можна приступати до роботи з ним.
Використання Sass
Отже, створіть тестову таблицю стилю. Перейдіть в root каталог веб-сервера (в Apache це / var / www) і створіть в ньому файл style.scss:
cd / var / www
nano style.scss
У цей файл внесіть правило css:
box padding: 20px;
background-color: red;
>
Як бачите, це базовий css. Збережіть і закрийте файл. Тепер Sass повинен перевести цей файл в звичайний формат css (з розширенням .css):
sass --watch style.scss: style.css
За допомогою даної команди Sass згенерує файл .css і перевірить, чи немає змін у файлі .scss. При внесенні змін до .scss файл .css буде автоматично оновлюватися.
При першому запуску команди з'явиться помилка:
[Listen warning]:
Missing dependency 'rb-inotify' (version '
> 0.9 ')!
Please run the following to satisfy the dependency:
gem install --version '
> 0.9 'rb-inotify
Щоб усунути її, встановивши залежність, запустіть команду:
gem install --version '
> 0.9 'rb-inotify
При роботі з декількома файлами Sass запустіть команду -watch, щоб скомпілювати цілу папку файлів .scss:
sass --watch stylesheets / sass: stylesheets / css
Дана команда скаже Sass відстежувати всі файли .scss в папці stylesheets / sass, автоматично компілювати їх і перетворювати їх в еквіваленти в папці stylesheets / cs. Після запуску цієї команди Sass залишатиметься в черговому режимі (watch mode) до тих пір, поки він не буде відключений.
Щоб відключити режим очікування, натисніть Ctrl + C. Після цього всі зміни файлів .scss перестануть автоматично передаватися в файли .css до наступного запуску команди -watch.
Отже, все досить просто: потрібно тільки внести правила css в один файл, і його вміст буде скопійовано в інший файл. Але це ще далеко не всі функції Sass.
Вкладення (Nesting)
Використання вкладень - це відмінний спосіб заощадити час на постійному переписуванні одного і того ж селектора. Наприклад, на даний момент є три селектора, які починаються однаково. box ul. box li і .box li a. Як правило, для таких селекторів потрібно створювати три окремих правила:
Але Sass дозволяє їх вкласти:
Як бачите, це усуває необхідність тричі прописувати частину .box в селекторі. Крім того, такий код виглядає просто і зрозуміло. Тепер команда -watch автоматично створить три еквівалента блоків .css:
box padding: 20px;
background-color: red;
>
.box ul margin: 10px;
>
.box li float: left;
>
.box li a color: #eee;
>
Крім того, таким же чином можна вкладати властивості. Наприклад, можна написати щось на кшталт:
Це заощадить час, оскільки тепер не доведеться чотири рази писати padding.
змінні
Ще одна зручна функція Sass, яка здатна заощадити час розробки - це змінні. Подібно мов програмування на зразок PHP або Java, Sass дозволяє задавати змінні один раз і використовувати їх в коді в разі потреби. Наприклад, можна написати щось на кшталт:
Тоді Sass замінить всі значення змінної $ color по всьому файлу тільки що встановленим кодом кольору #eee.
Міксини (примешивания; mixins)
@mixin box-size width: 200px;
height: 200px;
padding: 10px;
margin: 0px;
>
@mixin border ($ width) border: $ width solid #eee;
>
Як бачите, в першому Міксини немає аргументів. Це можна використовувати наступним чином:
box @include box-size;
>
В результаті вийде наступний css:
box width: 200px;
height: 200px;
padding: 10px;
margin: 0px;
>
Можна задати другому Міксини аргументи:
box2 @include border (1px);
>
При цьому буде використовуватися правило, визначене в Міксини, яке передасть йому аргумент size, що зробить його ще більш гнучким. Вийде наступний css:
box2 border: 1px solid #eee;
>
Це тільки основні можливості Sass; охопити всі функції даного препроцесора в рамках однієї статті, на жаль, неможливо. Щоб отримати більш детальну інформацію, зверніться до веб-сайту Sass.
Формати виведення Sass
При запуску команди -watch Sass виводить отримані дані CSS в файл .css стандартним шляхом (nested). В цілому, існує 4 типи виведення Sass:
- Nested (вкладений): відображає структуру стилів CSS і документа HTML.
- Expanded (розширений): додає рядки з властивостями і правилами.
- Compact (компактний): кожне правило CSS з усіма властивостями займає тільки один рядок.
- Compressed (стиснений): без пробілів (за винятком необхідних прогалин для відділення селекторів і нового рядка в кінці файлу).
Більше про ці формати виведення можна прочитати за цим посиланням.
Найпростіший спосіб зміни формату виведення - це команда -watch, запущена з відповідним прапором в кінці. Наприклад, щоб використовувати формат expanded:
sass --watch style.scss: style.css --style = expanded
Sass - дуже потужний препроцесор; навчившись використовувати його продуктивно, можна витрачати набагато менше часу і сил на фронт-енд. Він доповнює синтаксис CSS, робить його більш гнучким, а також дозволяє підвищити продуктивність роботи.