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

Jako nowy projektant motywów WordPress szybko nauczysz się wyzwań związanych z utrzymywaniem długich plików CSS przy jednoczesnym zachowaniu ich uporządkowania, skalowalności i czytelności.

Wielu projektantów i programistów front-end zaleca używanie języka preprocesora CSS, takiego jak Sass lub LESS, aby ułatwić pracę. Ale co to właściwie jest? I jak zacząć z nimi pracę?

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

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 pozwoli im zrobić więcej przy mniejszym nakładzie pracy i czasu. Języki preprocesorów CSS, takie jak Sass, umożliwiają korzystanie z funkcji, które nie są obecnie dostępne w CSS, takich jak zmienne, podstawowe operatory matematyczne, zagnieżdżanie, mixiny itp.

Jest bardzo podobny do PHP, który jest językiem preprocesora, który wykonuje skrypt na serwerze i generuje wynik HTML. Podobnie, Sass wstępnie przetwarza pliki .scss w celu wygenerowania plików 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 programowania. Istnieje wiele sklepów z motywami WordPress i programistów, którzy już wykorzystują Sass, aby przyspieszyć proces rozwoju.

Pierwsze kroki z Sass w tworzeniu motywów WordPress

Większość projektantów motywów używa lokalnego środowiska program istycznego do pracy nad motywami przed wdrożeniem ich w środowisku przejściowym lub na serwerze rzeczywistym. Ponieważ Sass jest językiem preprocesora, będziesz musiał zainstalować go w twoim lokalnym środowisku programistycznym.

Pierwszą rzeczą, którą należy zrobić, jest zainstalowanie Sass. Można go używać jako narzędzia wiersza poleceń, ale dostępne są również ładne aplikacje GUI dla Sass. Zalecamy korzystanie z Koala, która jest darmową aplikacją typu open source dostępną dla systemów Mac, Windows i Linux.

Na potrzeby tego artykułu konieczne będzie utworzenie pustego motywu. Wystarczy utworzyć nowy katalog w /wp-content/themes/. Możesz nadać mu nazwę „mytheme” lub dowolną inną. Wewnątrz twojego pustego katalogu motywu utwórz kolejny katalog i nazwij go arkuszami stylów.

W katalogu arkuszy stylów należy utworzyć plik style.scss za pomocą edytora tekstu, takiego jak Notatnik.

Teraz należy otworzyć aplikację Koala i kliknąć ikonkę plusa, aby utworzyć nowy projekt. Następnie znajdź katalog twojego motywu i dodaj go jako projekt. Zauważysz, że Koala automatycznie znajdzie plik Sass w twoim katalogu arkuszy stylów i wyświetli go.

Kliknij prawym przyciskiem myszy twój plik Sass i wybierz opcję Set Output Path. Teraz wybierz katalog główny twojego motywu, na przykład /wp-content/themes/mytheme/ i wpisz. Koala wygeneruje teraz plik wyjściowy CSS w twoim katalogu motywu. Aby to przetestować, musisz otworzyć twó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ć twoje zmiany i wrócić do Koali. Kliknij prawym przyciskiem myszy na twój plik Sass, a panel boczny wysunie się po prawej stronie. Aby skompilować twój plik Sass, po prostu kliknij przycisk „Kompiluj”. Możesz zobaczyć wyniki, otwierając plik style.css w katalogu twojego motywu, który będzie zawierał przetworzony CSS w następujący sposób:

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

Powiadomienie: w naszym pliku Sass zdefiniowaliśmy zmienną $fonts. Teraz za każdym razem, gdy musimy dodać rodzinę pisma, 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 zgodny [może być też „kompatybilny”] i bardzo łatwy do nauczenia. Jak wspomnieliśmy wcześniej, możesz tworzyć zmienne, zagnieżdżać, mieszać, importować, partiale, operatory matematyczne i logiczne itp. Teraz pokażemy kilka przykładów, które możesz wypróbować na swoim motywie WordPress.

Zarządzanie wieloma arkuszami stylów

Jednym z najczęstszych problemów, z którymi będziesz musiał się zmierzyć jako projektant motywów WordPress, są duże arkusze stylów z wieloma sekcjami. Prawdopodobnie będziesz często przewijał w górę i w dół, aby poprawić poprawki podczas pracy nad twoim motywem. Korzystając z Sass, możesz importować wiele plików do głównego arkusza stylów i wyprowadzić pojedynczy plik CSS dla twojego motywu.

A co z CSS @import?

Problem z używaniem @import w twoim 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 wczytywania twojej strony, co nie jest dobre dla twojego projektu. Z drugiej strony, gdy używasz @import w Sass, będzie on zawierał pliki w twoim pliku Sass i serwował je wszystkie w jednym pliku CSS dla przeglądarek.

Aby dowiedzieć się, jak używać @import w Sass, najpierw musisz utworzyć plik reset.scss w katalogu arkuszy stylów 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ć twój główny plik style.scss i dodać tę linię w miejscu, w którym chcesz importować plik resetowania:

@import 'reset';

Powiadomienie, że nie musisz wpisz pełną nazwę pliku. Aby to skompilować, musisz otworzyć Koalę i ponownie kliknąć przycisk kompilacji. Teraz otwórz główny plik style.css twojego motywu, a zobaczysz w nim zresetowany css.

Nestin 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óre są łatwe w zarządzaniu i pracy. Na przykład, można 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 poszczególnych elementów. Aby zobaczyć nestin w działaniu, dodaj to do twojego 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 wyświetli 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ł różne wyglądy widżetów, wpisów, menu nawigacyjnych, nagłówków itp. Korzystanie z nestin w Sass sprawia, że jest to dobrze zorganizowane i nie trzeba w kółko pisać tych samych klas, selektorów i identyfikatorów.

Używanie miksów w Sass

Czasami będziesz musiał ponownie użyć niektórych CSS w twoim projekcie, nawet jeśli reguły stylu będą takie same, ponieważ będziesz ich używać w różnych selektorach i klasach. To właśnie tutaj przydają się mixiny. Dodajmy mixin do twojego pliku style.scss:

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

Ten mixin zasadniczo ukrywa tekst przed wyświetlaniem. Oto przykład użycia tego mixina do ukrycia tekstu dla twojego logo:

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

Powiadomienie, że musisz użyć @include, aby dodać mixin. Po przetworzeniu wygeneruje następujący 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 krycia lub promienia obramowania, korzystanie z mixinów może zaoszczędzić wiele czasu. Spójrz na ten przykład, w którym dodaliśmy mixin, aby dodać promień 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 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; }

Zasoby dodatkowe

Sass Lang
The Sass Way

Mamy nadzieję, że ten artykuł pomógł Zamierzasz dowiedzieć się więcej o Sass do tworzenia motywów WordPress. Wielu projektantów motywów WordPress już z niego korzysta. Niektórzy posuwają się nawet do stwierdzenia, że w przyszłości wszystkie CSS będą wstępnie przetwarzane, a twórcy motywów WordPress muszą podnieść poprzeczkę. Możesz również zapoznać się z naszym przewodnikiem na temat wskazówek dotyczących klasy ciała WordPress dla projektantów motywów lub naszych ekspertów wybierających najlepsze kreatory stron WordPress typu „przeciągnij i upuść„.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.