Домой створення та просування сайтів Як використовувати Sass з WordPress. Покрокове керівництво

створення та просування сайтів

Як використовувати Sass з WordPress. Покрокове керівництво

От

20.04.2020

889

Протягом багатьох років CSS був моїм улюбленим мовою при розробці веб-сайтів. Дизайн і рівень представлення веб-сайту завжди були моїм коником. В той день, коли я дізнався про існування Sass, я відразу ж був розчарований в ньому. Я подумав про себе: «З якого дива я буду ускладнювати собі життя при розробці веб-сайту. Мені вже вистачило труднощів…»

Дивлячись з боку, я бачив Sass просунутим мовою, який додасть в мої проекти марну складність і стомлюючі налаштування. Але я був такий нетямущий, і мову, який здавався мені таким складним, як я дізнався, міг би заощадити мій час, вберегти мене від головних болів і поліпшив би мій робочий процес.

Реальність така, що Sass (та інші CSS препроцессоры) можуть бути надзвичайно потужними помічниками будь-якому дизайнерові або розробнику, зацікавленому в тому, щоб писати менше коду і робити більше. Зрештою, всі препроцессорные мови компілюються в CSS. Так що якщо вам просто не подобається ідея використання препроцессорного мови, ви все ще залишаєтеся в невіданні.

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

Передумови

Цей урок припускає, що ви маєте уявлення про те, як налаштувати оточення WordPress. В цілях демонстрації я скачаю WordPress, запущу його локально на моїй машині і буду демонструвати вам кожен крок по ходу уроку. Що може бути для вас повторенням, а для інших — в новинку. Незалежно від цього, я запрошую всіх слідувати за мною.

Корисні інструменти

Перш ніж ми почнемо, я рекомендую обзавестися деякими інструментами, щоб спростити життя при компіляції Sass. Я працюю на Mac, тому користуюся CodeKit, але ви можете використовувати будь-який інший препроцесор або навіть командний рядок ole, якою ми будемо користуватися в цьому уроці. Інший інструмент, який я буду використовувати на протязі уроку, це MAMP.

Налаштування локальної збірки WordPress

Для того щоб почати роботу з WordPress вам потрібно зайти на сайт wordpress.org і викачати останню версію системи:

Відвідайте сайт http://www.wordpress.orgщоб завантажити останній реліз.

Після розпакування zip архіву перейменуйте перетягніть його у папку htdocs, яка була створена при установці MAMP.

Шлях: *User*/Applications/MAMP/htdocs/

Наш новий каталог sass-wp розміщуємо в папці htdocs всередині MAMP

На цьому моменті переконайтеся, що MAMP запущений. Перейдіть на стартову сторінку у щойно створеної директорії WordPress. У нашому випадку вона має адресу http://localhost:8888/sass-wp/ .

На даному етапі ви повинні отримати повідомлення про помилку — не хвилюйтеся, нам просто потрібно налаштувати нашу збірку WordPress на локальний запуск, але перед тим, як створити файл конфігурації, ми повинні створити для WordPress базу даних.

Поверніться назад на стартову сторінку MAMP і виберіть опцію PHPMyAdmin в меню «Інструменти» (Tools). Більш швидкий спосіб — через URL http://localhost:8888/MAMP:

PHPMyAdmin — http://localhost:8888/MAMP

Як тільки ви опинилися всередині PHPMyAdmin просто створіть нову базу даних. Для цього уроку я назвав нашу базу даних sass-wp.

Нарешті, ми переходимо до нашої збірці WordPress за адресою http://localhost:8888/sass-wp і натискаємо кнопку «Create a Configuration File» (Створити файл конфігурації):

Введіть ім’я вашої бази даних, ім’я користувача та пароль

Переконайтеся, що ви ввели ім’я бази даних, створеної локально (тієї, що ви тільки що зробили, в нашому випадку sass-wp), ім’я користувача та пароль. У цьому уроці ми назвали нашу базу даних sass-wp, і так як ми використовуємо MAMP наш логін та пароль root.

Якщо все налаштовано правильно, ви повинні побачити вікно установки. Введіть всю інформацію про вашому сайті WordPress і натисніть Install WordPress («Встановити WordPress»). Після завершення установки увійдіть у свій обліковий запис, і ви опинитеся в панелі адміністрування:

Якщо ви бачите панель адміністрування WordPress, значить, установка пройшла успішно!

Установка Sass і Compass

Sass має Ruby залежності, тому для коректної роботи нам потрібно встановити Ruby gem. Більшість комп’ютерів Mac поставляється з вже встановленим Ruby, але якщо ви працюєте на комп’ютері з Windows вам необхідно розглянути альтернативне рішення.

Також ми будемо використовувати Compass, CSS фреймворк з відкритим вихідним кодом, який відразу готовий до використання і пропонує безліч швидких і корисних доповнень до Sass. Альтернативою Compass служить інший фреймворк під назвою Bourbon.

Використовуйте будь-фреймворк, який вам подобається, або комбінуйте їх, як я іноді роблю. Більш детальну інформацію ви можете знайти в документації по встановленню за адресою http://compass-style.org/install/ або http://bourbon.io/docs/.

Швидка установка

Щоб встановити Sass і Compass в перший раз, просто відкрийте інструмент командного рядка на ваш вибір і введіть кілька рядків коду, наведених нижче.

Примітка: ви можете отримати повідомлення про помилку при отриманні доступу до каталогів, які ви змінюєте. Це можна швидко виправити, додавши команду sudo перед всіма рядками. При цьому система попросить ввести ваш системний пароль. Тепер Sass і Compass повинні бути встановлені у вашій системі:

$ gem update system —
$ gem install sass
$ gem install compass

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

Налаштування теми з Sass і Compass

Для цього уроку ми будемо використовувати тему twentyfourteen. Структура каталогу twentyfourteen за замовчуванням наступна:

Структура файлів, задана за замовчуванням в темі twentyfourteen

Додавання необхідних файлів і папок

Для початку ми повинні додати декілька папок і файлів:

Наша тема вже містить теку images. Якщо у вашій темі немає такої папки, потрібно додати її;
Також нам потрібно створити каталог sass. Ця папка буде містити всі Sass файли для компіляції в CSS. Ймовірно, ви б вважали за краще мати один основний Sass файл, однак існує можливість додавання декількох файлів, про яку я розповім трохи пізніше;
Всередині каталогу sass потрібно створити файл style.scss. Цей файл буде використаний препроцесором для компіляції в основний CSS файл вашої теми. Примітка: CSS файл повинен знаходитися в кореневому каталозі теми для того, щоб WordPress функціонував коректно. Він повинен існувати!
У зв’язку з тим, що Sass побудований на ruby, необхідно створити файл config.rb, щоб вказати Sass/Compass де знаходяться файли. Нижче наведено вміст папки оновленої теми, де для демонстрації нової ієрархії виділені тільки що створені файли і підкаталоги.

Тема twentyfourteen з нашими новими файлами і папками для роботи з Sass

Файли, виділені червоним кольором, або були додані, або згадані в файлі конфігурації Sass (файл config.rb), який ми розглянемо в наступному розділі.

Файл config.rb

Кожен проект на основі Compass використовує конфігураційний файл для визначення імен каталогів/файлів та їх розташування в межах проектів. В нашому випадку, файл config.rb буде виглядати як у прикладі, наведеному нижче. Я додав коментарі, щоб пояснити, що означає кожна рядок.

http_path = «/» # цільової шлях кореневого рівня
css_dir = «.» # встановлює наш файл style.css за замовчуванням на кореневому рівні нашої теми
sass_dir = «sass» # визначає директорію sass
images_dir = «images» # визначає попередній каталог зображень
javascripts_dir = «js» # визначає JavaScript каталог
# Тут ви можете вибрати бажаний стиль виводу (може бути скасоване через командний рядок):
# output_style = :expanded або :nested або :compact або :compressed
# Дозволити використання відносних шляхів до ресурсів за допомогою допоміжних функцій Compass.
# примітка: це важливо в темах для WordPress спрайтів
relative_assets = true

Як ви могли помітити, файл config.rb дуже простий для розуміння. Цей файл визначає, де CSS, JavaScript, зображення і Sass розміщуються в каталозі проекту. В нашій темі каталог CSS знаходиться всередині кореневої директорії. Файли Sass розташовуються всередині каталогу sass, який ми створили раніше. JavaScript – всередині папки під назвою js і так далі.

Нижні п’ять рядків містять опції, які ви можете закоментувати або розкоментувати і які мають відношення до висновку традиційного CSS після компіляції нашого Sass. Зазвичай я використовую :nested під час розробки і міняю її на :compressed, коли мої проекти переходять на стадію експлуатації, щоб заощадити час завантаження. Використовуйте ту опцію, яка вам більше подобається.

Налаштовуємо Sass на відстеження оновлень

Найкраще в препроцессоре — це автоматична компіляція CSS коду. Щоб Sass відстежував оновлення, потрібно ввести ще одну команду в редакторі командного рядка. Наша тема готова до роботи, тож введіть наступні команди:

$ cd /yourproject
$ compass watch

Переконайтеся, що ви змінили шлях вашої командного рядка на папку робочого проекту. Потім введіть команду Compass watch, наведену вище. Compass перевірить вашу теку на наявність нових стилів і файлів, створених або змінених. З них буде згенерований новий CSS — код і скомпільований в наш кореневої файл style.css.

Давайте напишемо трохи коду Sass

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

Тепер, коли ми все налаштували, ми готові до написання коду Sass.

Для початку давайте відкриємо файл style.css теми twentyfourteen і скопіювати вміст закомментированного блоку, який знаходиться зверху і виглядає наступним чином:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content’s layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Версія: 1.1
Ліцензія: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

Щоб не було зайвих складнощів, я просто буду використовувати цей коментар таким, який він є, і додам його в початок файлу style.scss всередині папки sass. Також ми включимо Compass і завжди необхідний Compass reset.

Отже, тепер наш файл style.css всередині папки sass виглядає наступним чином:

По суті все готово для стилізації нашої теми. Єдино, варто відзначити, що як тільки ви збережете файл style.scss, буде створений новий файл style.css в кореневому каталозі вашої теми замість існуючого.

Передбачається, що ви починаєте реорганізацію теми twentyfourteen з нуля. Якщо ви не хочете змінити стилі, задані за замовчуванням, вам потрібно скопіювати їх у style.scss, тоді вони будуть скомпільовані, або використовувати часткові шаблони, які ми розглянемо далі.

Часткові шаблони

Я великий шанувальник модульного програмування. Під цим я маю на увазі, поділ коду на невеликі, більш зручні в роботі файли, які потім компілюються в один файл. Раніше я згадував про можливості використання кількох Sass файлів, з яких формується один CSS файл.
Такі файли відомі як часткові шаблони (від англійського partials) і зазвичай супроводжуються префіксом у вигляді символу нижнього підкреслення, наприклад, “_partial.scss«. Щоб використовувати часткові шаблони, я додав папку під назвою _partials в наш каталог sass, як показано нижче.
Всередині цієї папки, я створив кілька невеликих файлів .scss, які ми будемо використовувати в нашому проекті. Ви можете створити стільки файлів, скільки захочете, якщо всі вони включені всередині головного файлу style.scss.

Наша папка _partials всередині каталогу sass

Як використовувати часткові шаблони

Часткові шаблони з префіксом нижнього підкреслення не компілюються у додаткову таблицю стилів. Символ нижнього підкреслення вказує Sass, що цей файл не повинен компілюватися, тому він спочатку ігнорується. Щоб отримати стилі з цих файлів в нашу таблицю стилів, нам потрібно включити ці файли в наш файл style.scss. Подивіться, як це зроблено у нашому файлі style.scss:

Всередину кожного часткового шаблону я додав коментарі і трохи базового коду Sass:

_mixins.scss
/* mixins.scss */
variables.scss
/*_variables.scss */
/* Текстовий стиль основної частини */
$text-color: black;
$base-font-size: 16px;
$base-font-family: «HelveticaNeue», Helvetica, Arial, sans-serif;
$base-font-weight: 400;
_typography.scss
/*_typography.scss*/
body {
color: $text-color;
font-size: $base-font-size;
font-family: $base-font-family;
font-weight: $base-font-weight;
line-height: 1.6;
}

Так як Compass відстежує наш проект, і ми включили часткові шаблони у наш головний Sass файл style.scss, Compass згенерує новий style.css, як тільки зміни будуть збережені. Тепер наш файл style.css виглядає наступним чином:

style.css
/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content’s layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Версія: 1.1
Ліцензія: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/
/* line 17, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a abbr, acronym, address, big, cite code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, венеції,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, назва, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
/* line 22, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
/* line 24, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none; }
/* line 26, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
/* line 28, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 30, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q blockquote {
quotes: none; }
/* line 103, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: «»;
content: none; }
/* line 32, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
/* _mixins.scss */
/* _variables.scss */
/* _typography.scss */
/* line 3, sass/_partials/_typography.scss */
body {
color: black;
font-size: 16px;
font-family: «HelveticaNeue», Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.6; }

Зараз наш код виводиться у окремий CSS файл, а це значить, що ми успішно зібрали тему WordPress з працюючими Sass і Compass. Вітаю, якщо ви зайшли так далеко!

Налаштування нашої теми скинуті, і вона готова до кастомизамизации

Так як ми переопределили стилі теми twentyfourteen, задані за замовчуванням, тепер наша тема виглядає трохи бідної, але вона готова до налаштування за допомогою Sass!

Уникайте використання командного рядка

З’явилася велика кількість популярних додатків і диспетчерів запуску завдань для користувачів Sass і Less. Ці програми компілюють код, а також роблять багато інших речей, такі як оновлення браузера, мінімізація коду, оптимізація зображень, відображення вихідного коду і багато іншого.

Кілька таких додатків і диспетчерів запуску завдань наведені нижче. З їх допомогою ви можете налаштувати виконання маси завдань за проектом. Всі ці операції здійснюються один раз, ось чому вони трохи простіше, ніж командний рядок:

Grunt;
Gulp;
CodeKit;
Mixture;
Prepros;
Scout;
Koala ;
LiveReload.

Контроль версій

Я б хотів коротко обговорити контроль версій і використання Git в Sass проектах подібних нашому. Git є потужним інструментом, який допомагає нам зберегти історію роботи, в тому випадку, якщо ми переробляємо код або інтегруємо новий код для релізу.

При використанні Sass створюються деякі нові папки та файли, які не завжди потрібно контролювати в Git. Папка .sass-cache або, наприклад, sass не призначені для використання на реальному сервері під час експлуатації. Зрештою, файлом, який має значення, залишається файл style.css в кореневому каталозі нашої теми.

Інше ви можете відстежувати, якщо хочете, особливо працюючи в команді. Будь то в цілях резервного копіювання, або просто для душевного спокою, вибирайте те, що краще для вас і/або вашої команди.

Висновок

WordPress, Sass і Compass можуть бути потужним тріо, коли взаємодіють як у нашому прикладі. Хоча більшість новачків в Sass, як правило, несхвально ставляться до усіх додаткових робіт і налаштувань, я думаю, як тільки вони перейнятися і дійсно зрозуміють переваги використання даного мови, вони підсядуть на нього назавжди.

Повернення назад до звичайного CSS буде здаватися набагато більш важким, ніж раніше. Повірте мені!

Якщо ви все ще мало знайомі з Sass, я рекомендую вам спробувати. Зверніться до керівництва, щоб отримати прискорений курс вивчення мови. Якщо ви можете писати код на CSS, ви зможете писати і на Sass.

Сподіваюся, цей урок привніс ясність у те, як комбінувати Sass і WordPress і допоможе вам створити або відредагувати вашу тему більш ефективно, ніж коли-небудь раніше.

Переклад статті «How To Use Sass With WordPress – A Step By Step Guide» був підготовлений дружною командою проекту Сайтостроение від А до Я.