Wprowadzenie do Sass dla nowych projektantów motywów WordPress

Jako nowy projektant motywów WordPress szybko poznajesz wyzwania związane z utrzymaniem długich plików CSS, jednocześnie utrzymując je w porządku, skalowalności i czytelności.

Wielu projektantów i programistów front-end, w tym ci z WPBeginner, zaleca używanie języka preprocesora CSS, takiego jak Sass lub LESS, aby ułatwić pracę. Ale czym są te preprocesory? I jak zacząć z nimi pracować?

Ten artykuł jest wprowadzeniem do Sass dla nowych projektantów motywów WordPress. Powiemy Ci, czym jest preprocesor CSS, dlaczego go potrzebujesz oraz jak go zainstalować i zacząć od razu używać.

Czym jest Sass (Syntactically Awesome Stylesheet)?

CSS, którego używamy, został zaprojektowany jako łatwy w użyciu język arkuszy stylów. Jednak sieć ewoluowała, więc projektanci potrzebują języka arkuszy stylów, który pozwala im zrobić więcej przy mniejszym wysiłku i czasie.

Języki preprocesorów CSS, takie jak Sass, pozwalają na używanie funkcji, które nie są obecnie dostępne w CSS, takich jak zmienne, podstawowe operatory matematyczne, zagnieżdżanie, miksiny itp.

Jest to bardzo podobne do PHP, które jest językiem preprocesora, który wykonuje skrypt na serwerze i generuje wyjście HTML. Podobnie Sass przetwarza pliki .scss, aby wygenerować pliki CSS, które mogą być używane przez przeglądarki.

Od wersji 3.8, style obszaru administracyjnego WordPress zostały przeniesione do wykorzystania Sass do tworzenia. Istnieje wiele sklepów z motywami WordPress i programistów już wykorzystujących Sass do przyspieszenia procesu tworzenia.

Rozpoczęcie pracy z Sass do tworzenia motywów WordPress

Większość projektantów motywów używa lokalnego środowiska programistycznego do pracy nad swoimi motywami, zanim wdrożą je na środowisko stagingowe lub serwer produkcyjny. Ponieważ Sass jest językiem preprocesora, będziesz musiał go zainstalować w swoim lokalnym środowisku programistycznym.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie Sass. Można go używać jako narzędzia wiersza poleceń, ale dostępne są również przyjemne aplikacje GUI dla Sass. Zalecamy użycie Koala, która jest darmową aplikacją open-source dostępną na Maca, Windows i Linux.

Na potrzeby tego artykułu będziesz musiał utworzyć pusty motyw. Po prostu utwórz nowy folder w katalogu /wp-content/themes/. Możesz nazwać go „mytheme” lub czymkolwiek innym. Wewnątrz folderu pustego motywu utwórz kolejny folder i nazwij go stylesheets.

W folderze arkuszy stylów musisz utworzyć plik style.scss za pomocą edytora tekstu, takiego jak Notatnik.

Teraz musisz otworzyć Koala i kliknąć ikonę plusa, aby dodać nowy projekt. Następnie zlokalizuj katalog swojego motywu i dodaj go jako swój projekt. Zauważysz, że Koala automatycznie znajdzie plik Sass w katalogu arkuszy stylów i go wyświetli.

Kliknij prawym przyciskiem myszy na pliku Sass i wybierz opcję Ustaw ścieżkę wyjściową. Teraz wybierz katalog główny swojego motywu, na przykład /wp-content/themes/mytheme/ i naciśnij Enter. Koala wygeneruje teraz plik wyjściowy CSS w katalogu twojego motywu.

Aby to przetestować, musisz otworzyć swój plik Sass style.scss w edytorze tekstu, takim jak Notatnik, i dodać ten kod:

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

Teraz musisz zapisać zmiany i wrócić do Koali. Kliknij prawym przyciskiem myszy na plik Sass, a po prawej stronie pojawi się pasek boczny. Aby skompilować plik Sass, po prostu kliknij przycisk „Compile”.

Wyniki możesz zobaczyć, otwierając plik style.css w katalogu swojego motywu, a zobaczysz przetworzony kod CSS w następujący sposób:

body {
  font-family: arial, verdana, sans-serif; }

Zauważ, że zdefiniowaliśmy zmienną $fonts w naszym pliku Sass. Teraz, gdy będziemy musieli dodać rodzinę czcionek, nie musimy ponownie wpisywać nazw wszystkich czcionek. Możemy po prostu użyć $fonts.

Jakie inne supermoce wnosi Sass do CSS?

Sass jest niezwykle potężny, wstecznie kompatybilny i bardzo łatwy do nauczenia. Jak wspomnieliśmy wcześniej, możesz tworzyć zmienne, zagnieżdżenia, miksiny, import, części, operatory matematyczne i logiczne itp.

Teraz pokażemy Ci kilka przykładów, które możesz wypróbować na swoim motywie WordPress.

Zarządzanie wieloma arkuszami stylów

Jednym z częstych problemów, z którym spotkasz się jako projektant motywów WordPress, są duże arkusze stylów z wieloma sekcjami. Prawdopodobnie będziesz dużo przewijać w górę i w dół, aby naprawić rzeczy podczas pracy nad swoim motywem.

Używając Sass, możesz importować wiele plików do swojego głównego arkusza stylów i wygenerować pojedynczy plik CSS dla swojego motywu.

A co z @import CSS?

Problem z używaniem @import w pliku CSS polega na tym, że za każdym razem, gdy dodajesz @import, twój plik CSS wysyła kolejne żądanie HTTP do serwera. Wpływa to na czas ładowania strony, co nie jest dobre dla twojego projektu.

Z drugiej strony, gdy używasz @import w Sass, pliki zostaną uwzględnione w Twoim pliku Sass i udostępnione jako jeden plik CSS dla przeglądarek.

Aby dowiedzieć się, jak używać @import w Sass, najpierw musisz utworzyć plik reset.scss w katalogu stylesheets Twojego motywu i wkleić do niego ten kod.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
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, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, 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-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Teraz musisz otworzyć swój główny plik style.scss i dodać tę linię tam, gdzie chcesz zaimportować plik reset:

@import 'reset';

Zauważ, że nie musisz wpisywać pełnej nazwy pliku. Aby to skompilować, musisz otworzyć Koala i ponownie kliknąć przycisk kompilacji. Teraz otwórz główny plik style.css swojego motywu, a zobaczysz, że twój reset CSS jest w nim zawarty.

Zagnieżdżenia w Sass

W przeciwieństwie do HTML, CSS nie jest językiem zagnieżdżonym. Sass pozwala na tworzenie zagnieżdżonych plików, którymi łatwo zarządzać i z którymi można pracować. Na przykład, możesz zagnieździć wszystkie elementy dla sekcji <article> pod selektorem artykułu.

Jako projektant motywów WordPress, pozwala to na pracę nad różnymi sekcjami i łatwe stylizowanie każdego elementu. Aby zobaczyć zagnieżdżanie w akcji, dodaj to do swojego pliku style.scss:

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

Po przetworzeniu wygeneruje następujący kod CSS:

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

Jako projektant motywów, będziesz projektować inny wygląd i styl widżetów, postów, menu nawigacyjnych, nagłówka itp. Używanie zagnieżdżeń w Sass sprawia, że jest dobrze ustrukturyzowane i nie musisz pisać tych samych klas, selektorów i identyfikatorów w kółko.

Używanie Mixinów w Sass

Czasami będziesz musiał ponownie wykorzystać pewne reguły CSS w całym projekcie, nawet jeśli zasady stylów będą takie same, ponieważ będziesz ich używać na różnych selektorach i klasach. W tym właśnie przydają się mixiny. Dodajmy mixin do Twojego pliku style.scss:

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Ten mixin zasadniczo ukrywa pewien tekst przed wyświetleniem. Oto przykład, jak możesz użyć tego mixinu do ukrycia tekstu dla swojego logo:

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Zauważ, że musisz użyć @include, aby dodać mixin. Po przetworzeniu wygeneruje to następujący kod CSS:

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Mixiny są również bardzo pomocne w przypadku prefiksów dostawców. Podczas dodawania wartości przezroczystości lub obramowania, używanie mixinów może zaoszczędzić dużo czasu. Spójrz na ten przykład, gdzie dodaliśmy mixin do dodawania promienia obramowania.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

Po skompilowaniu wygeneruje następujący kod CSS:

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Dodatkowe zasoby

Sass Lang
The Sass Way

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się o Sass do tworzenia motywów WordPress. Wielu projektantów motywów WordPress już go używa. Niektórzy idą tak daleko, że twierdzą, iż w przyszłości cały CSS będzie preprocesowany, a twórcy motywów WordPress muszą podnieść swoje umiejętności. Możesz również zapoznać się z naszym przewodnikiem na temat wskazówek dotyczących klas body w WordPress dla projektantów motywów lub naszymi ekskluzywnymi wyborami najlepszych kreatorów stron WordPress typu przeciągnij i upuść.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.