Превключете от CSS към Sass в WordPress

Тази статия първоначално се появи в брой 265 на нетното списание

Всеки добър разработчик знае да търси начини да намали повтарящата се работа и да остави компютъра си да се справя със светски, безсмислени задачи. Препроцесорите на CSS като Sass ни дават няколко ценни инструмента, за да помогнат за автоматизирането на процеса на кодиране отпред. Например, с Sass можем да използваме променливи. Така че, вместо да изпълняваме команда „намери и замени“ чрез дълъг CSS файл, за да променим цветна стойност, можем просто да променим дефиницията на променливата.



Sass също ни позволява да записваме функции за генериране на блокове от повтарящ се стилов код. Например, бутонна функция може да приеме цвета или стила като параметър и да генерира всички стандартни CSS за потребителския интерфейс на бутона на сайта: радиус на границите, градиенти, цветове на текста и т.н. Също така можем да разделим нашите гигантски таблици със стилове на организирани модули. Почти всеки CMS, плъгин и уеб приложение използва директории и частици, за да подобри поддръжката на кода: Sass ни позволява да правим това с нашия CSS.



Техниките, обяснени в този урок, са специфични за Sass, използващ SCSS синтаксис , но те са приложими за повечето други препроцесори - като По-малко или Стилус - също.

Преобразуване на таблици със стилове на теми

Ако в WordPress темата, която използвате, вече са включени Sass файлове, процесът на преобразуване на съществуващите таблици със стилове на теми в Sass е свършен за вас. Обикновено стартирам нови теми с шаблона Underscores от Automattic (underscores.me). Когато създавате нов тематичен пакет от уебсайта му, ще намерите „_sassify!“ опция, ако щракнете върху връзката „Разширени опции“. Това ще осигури библиотеката на Sass по подразбиране на Automattic за вас, когато изтеглите празната тема.



Подчертаване

Темата Underscores WordPress предлага опция за потребителите да изтеглят версия на темата, която вече включва частици на Sass

Ако темата, която изграждате или модифицирате, не включва Sass файлове, обаче, ще започнете с конвертиране на съществуващия CSS файл в Sass. Тази стъпка разкрива голямо предимство при използването на Sass (SCSS): компилаторът на Sass чете обикновен CSS без никакви проблеми. Всичко, което трябва да направите, за да използвате оригиналния style.css, тъй като Sass е да го дублирате и да го преименувате style.scss.

как да създадете лого за фотография в

Настройване на части на Sass

По-рано споменах, че Sass подобрява работния ни процес, като ни позволява да разбием хиляди редове CSS в модулни файлове, наречени частици. Нека да преминем през тази стъпка, преди да стигнем до методите на компилатора.



Ако сте преобразували съществуващ CSS файл в Sass, всичко, което имате до момента, е .scss файл, който е също толкова тромав, колкото CSS файлът, от който е дошъл. На този етап можете да започнете да използвате променливи и да пишете комбинации или функции, но Sass все още не е модулен или организиран. Искате да групирате вашия CSS файл в секции, които служат за индивидуални цели. Целта е да можете да разберете къде се намира код въз основа на името на файла му.

Някои модули от код, които вероятно ще искате да изолирате, включват навигация, типографски стилове, приспособления на страничната лента, долен колонтитул и мрежа мрежа (въпреки че този списък по никакъв начин не е изчерпателен, той е само отправна точка).

След това ще изрежете и поставите всеки модулен раздел на CSS в неговия собствен Sass частичен. Името на файла на частичното Sass винаги започва с долна черта (_). Това казва на компилаторите да не създават уникален CSS файл, базиран на този Sass файл.

Приложение за компилатор, което гледа папка, пълна със Sass, и автоматично генерира CSS, ще създаде style.css въз основа на style.scss, но няма да създаде navigation.css въз основа на _navigation.scss. За да компилирате всички частици, които току-що сте създали, ще ги импортирате в основния си файл на Sass.

Всеки път, когато копирате блок от код в частичен, заменете го в основния .scss файл с @import 'частично име' ;. Ако преместите стиловете на долния колонтитул в _footer.scss, добавете @import 'footer' ;. Не включвайте _ или .scss при импортирането: просто името на файла.

Ако искате да се организирате наистина и да разбиете навигацията в горния колонтитул и навигацията в долния колонтитул на два отделни части в папка / navigation /, включете името на папката в импортирането:

@import 'navigation/header-nav'; // imports /navigation/_header-nav.scss @import 'navigation/footer-nav'; // imports /navigation/_footer-nav.scss

Важно е да запомните, че CSS каскадата все още се прилага за код, написан на Sass. Стилове, написани в частични части, внесени по-късно, имат възможност да отменят стиловете в частични части, внесени по-рано.

Също така е разумно да импортирате частици, които съдържат вашите миксини и променливи в началото на вашия първичен Sass файл, така че по-късните частици да могат действително да използват тези променливи и миксини.

WordPress коментари

Според изискванията на WordPress style.css, трябва да се уверим, че нашият компилатор запазва коментарите на WordPress в горната част на style.css. Когато Sass 'output_style е зададен на: компресиран, той премахва всички коментари, когато компилира CSS.

За да сте сигурни, че тези коментари са останали непокътнати, добавете удивителен знак (!) В началото на блока за коментари в style.scss:

как да промените перспективата на изображение в
/*! Theme Name: Sassy WordPress Theme Theme URI: http://jamessteinbach.com/sass/ Author: James Steinbach Author URI: http://jamessteinbach.com Description: From CSS to Sass Sample Theme Code */ // Import all your .scss partials below

Рефакторирайте CSS към Sass

След като разделихме дълга таблица със стилове на по-малки модулни частици, можем да започнем да рефакторираме оригиналния CSS, за да отговаря на нашите предпочитания на Sass. Някои полезни инструменти на Sass за рефакторинг на код са променливи, вложеност, функции и комбинации.

Ако искате да промените някои цветове или да настроите стандартна скала на типа, променливите са най-добрият начин да запазите всички тези данни на едно място и лесно да направите промени в целия сайт. Ако все още не сте създали частично наречена _variables.scss, препоръчвам да направите това сега - и да го импортирате в горната част на основния си файл Sass. Ето някои променливи, които може да искате да поставите в тази частична:

$red: #FF4136; $blue: #0074D9; $blue-dark: #001F3F; $orange: #FF851B $type-small: 12px; $type-medium: 16px; $type-large: 21px; $type-hero: 44px;

След като настроите тези променливи, можете да търсите своите частици и да замените стойности с имена на променливи:

body { color: $blue-dark; } .page-title { font-size: $type-large; }

Можете да използвате функцията на Sass, наречена „влагане“, за да направите сложните селектори по-четливи. Стартовият ви CSS може да включва стилове за множество елементи в страничната лента на сайта:

.sidebar h1 { //styles } .sidebar p { //styles } .sidebar ul { //styles }

Можете да влагате стилове в други стилови блокове и Sass ще комбинира селектори, за да създаде сложните селектори. Кодът по-долу ще се компилира до същия изход като оригиналния CSS (както е показано в горния код).

.sidebar { h1 { //styles } p { //styles } ul { //styles } }

В гнезденето и може да се използва като заместител за целия низ от селектори над него. Тъй като влагането поставя интервал между селектори, може да бъде полезно при използване на псевдокласове и псевдоелементи:

a { color: $blue; &:hover { color: $blue-dark; } } .clearfix { &::before, &::after { content: ''; display: table; clear: both; } }

& Може да се използва и за дублиране или обръщане на реда на селектори:

p { & + & { margin-top: 1em; } } .menu-link { color: $gray; .menu-item:hover & { color: $gray-light; } }

Може би се чудите дали си струва вашето време за рефакториране чрез влагане на свойства. Въпреки че влагането може да увеличи четливостта (въпреки че това е субективно), това също е инструмент, който трябва да се използва внимателно. Повечето експерти на Sass препоръчват „начално правило“ за гнездене на Sass: никога не гнездете на повече от три нива. Разумно е да използвате гнезденето на Sass пестеливо. Ако няма смисъл в работния ви процес, не го налагайте.

Sass

Sass е най-зрелият, стабилен и мощен CSS език за професионално разширение

Ако многократно изчислявате определени свойства във вашия CSS, можете да замените този процес с функция Sass. Функция взема параметрите, които й задавате, и връща стойност. Той няма да генерира двойки CSS свойство-стойност, но може да генерира стойности за вас.

Ето пример за функция за изчисляване на избледнели цветове при задържане:

// This goes in _functions.scss: @function hover-color($color) { @return lighten($color, 10%); } // This is how you use the function in other partials: .button { background-color: $red; &:hover { background-color: hover-color($red); } }

Също така можем да рефакторираме нашия код, като вземем повтарящи се блокове код и ги заменим с миксини. Чудесен пример за полезен миксин е clearfix.

// This goes in _mixins.scss: @mixin clearfix() { &::after { content: “”; display: table; clear: both; } } // This is how you use the mixin in other partials: .content-container { @include clearfix; }

Mixins също могат да вземат параметри за генериране на персонализиран изход. Това е много полезно за дизайнерски модели като бутони или сигнали:

окончателни разрези pro x системни изисквания
// This goes in _mixins.scss: @mixin alert($color) { border-radius: .5em; box-shadow: 0 0 .25em 0 rgba(0,0,0,.5); border-top: 4px solid $color; color: $color; } // This is how you use this mixin: .alert-error { @include alert($red); } .alert-success { @include alert($green); }

underscores.me

Темата underscores.me сортира частици по папки, включително „елементи“, „форми“, „оформление“ и „медия“

Един често срещан съвет, който може да видите онлайн, е да използвате миксини за префиксиране на различни браузъри. Обикновено обаче препоръчвам срещу това. намирам това Автопрефиксър е много по-добър начин за автоматизиране на префиксите.

Ако не можете да стартирате Autoprefixer и трябва да разчитате на Sass mixins, Compass 'mixin библиотека позволява потребителска конфигурация и остава в крак с CanIUse данни.

Организирайте своите партита

За да обобщим, разделихме съществуващата таблица със стилове на темата и реконструирахме някакъв код, за да направим нещата по-чисти и Sassier. Сега можем да организираме нашите части, за да подобрим поддържането в дългосрочен план.

организиране на вашия CSS

Организиране на вашия CSS С Sass разработчиците могат да използват инструменти като променливи, влагане, функции и комбинации, за да организират и автоматизират своя CSS

Не забравяйте, че каскадата все още има значение. Компилираният от Sass CSS е точно като обикновения CSS, тъй като стиловете, които се появяват по-късно в таблицата със стилове, могат да заменят стиловете, които се появяват по-рано. Като правило импортирайте общите си стилове, преди да импортирате конкретни стилове.

Подобни части могат да бъдат организирани в папки. Има два начина за импортиране на частици на Sass от директории. Първият е да импортирате всеки файл в style.scss, включително името на папката в директивата за импортиране, по следния начин:

@import 'base/variables'; // imports _variables.scss from the /base/ directory @import 'base/mixins'; // imports mixins.scss from the /base/ directory @import 'base/grid'; // imports _grid.scss from the /base/ directory

Вторият (и несъмнено по-сложен) метод е да се създаде частичен заместител във всяка директория, който импортира останалите частици в тази директория (следващата колона):

// in style.scss @import 'base/base'; // in /base/_base.scss @import 'variables'; // imports _variables.scss from the /base/ directory @import 'mixins'; // imports mixins.scss from the /base/ directory @import 'grid'; // imports _grid.scss from the /base/ directory

И двата метода импортират едни и същи частици в същия ред. Първият метод е по-опростен на повърхността, но вторият метод има предимството да поддържа style.scss чист и да премества всяка сложност в модулите, на които разчита.

текстури на основната игра с висока разделителна способност за всеки

Има почти толкова много начини за организиране на части на Sass, колкото разработчиците се опитват да организират части на Sass. Ще намерите няколко добри опции в полето „Ресурси“ на страница 88.

Ето една доста проста организационна схема, която бихте могли да използвате:

  • / base / (променливи, комбинации, нулиране, типография)
  • / layout / (решетка, горен колонтитул)
  • / доставчици / (приставки, доставчици и т.н.)
  • / компоненти / (бутони, менюта, формуляри, джаджи)
  • / страници / (начална страница, целева страница, портфолио)

Обобщаване

Тази статия само започва да изследва потенциала за използване на Sass в разработката на теми на WordPress. Шансовете са големи, че сте нетърпеливи за повече информация сега, особено ако това е първото нещо, което сте прочели по темата.

Разгледайте полето „Ресурси“ за повече четене по темата - тези статии включват няколко вариации на работния процес на Sass-WordPress. Някои от техните съвети се различават от това, което съм препоръчал (особено по темата за организиране на партиали), но това е добре - намерете техниките и работните процеси, които работят за вас!

Джеймс Щайнбах създаде ексклузивен скрийнстър, за да се включи в този урок, който можете да гледате по-долу.

Думи: Джеймс Щайнбах