W artykule:
Jako nowy projektant motywów WordPress szybko nauczysz się wyzwań związanych z utrzymywaniem długich plików CSS, jednocześnie utrzymując je w porządku, skalowalne i czytelne. Dowiesz się również, że wielu projektantów i programistów front-end zaleca używanie języka preprocesora CSS, takiego jak Sass lub LESS. Ale co to jest? i jak zacząć z nimi? Ten artykuł jest wstępem do Sass dla nowych projektantów motywów WordPress. Powiemy ci, czym jest preprocesor CSS, dlaczego go potrzebujesz oraz jak go zainstalować i zacząć używać od razu.
Co to jest Sass?
CSS, którego używamy, został zaprojektowany jako łatwy w użyciu język arkuszy stylów. Jednak internet ewoluował, a także potrzeba projektantów, aby mieć język arkuszy stylów, który pozwala im zrobić więcej przy mniejszym wysiłku i czasie. Języki preprocesora CSS, takie jak Sass, pozwalają na korzystanie z funkcji, które nie są obecnie dostępne w CSS, takich jak używanie zmiennych, podstawowych operatorów matematycznych, zagnieżdżanie, mixiny itp.
Jest bardzo podobny do PHP, który jest językiem preprocesora, który wykonuje skrypt na serwerze i generuje wyjście HTML. Podobnie, Sass preprocesses .pliki scss do generowania plików CSS, które mogą być używane przez przeglądarki.
Od wersji 3.8 style obszaru administracyjnego WordPress zostały przeniesione, aby wykorzystać Sass do rozwoju. Istnieje wiele sklepów z motywami WordPress i programistów już wykorzystujących Sass, aby przyspieszyć proces rozwoju.
Pierwsze kroki z Sass dla tworzenia motywów WordPress
Większość projektantów motywów używa lokalnego środowiska programistycznego do pracy nad swoimi motywami przed wdrożeniem ich do środowiska pośredniczącego lub serwera aktywnego. Ponieważ Sass jest językiem preprocesora, będziesz musiał zainstalować go w swoim lokalnym środowisku programistycznym.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować Sass. Może być używany jako narzędzie wiersza poleceń, ale istnieje również kilka ładnych aplikacji GUI dostępnych dla Sass. Zalecamy korzystanie z Koala, która jest darmową aplikacją opensource dostępną dla komputerów Mac, Windows i Linux.
Ze względu na ten artykuł musisz utworzyć pusty motyw. Wystarczy utworzyć nowy folder w / wp-content / themes/. Możesz nazwać to 'mytheme’ lub czymkolwiek innym. Wewnątrz pustego folderu motywu Utwórz inny folder i nazwij go arkuszami stylów.
W folderze arkusze stylów musisz utworzyć styl.scss plik za pomocą edytora tekstu, takiego jak Notatnik.
Teraz musisz otworzyć Koala i kliknąć ikonę plusa, aby dodać nowy projekt. Następnie znajdź katalog motywów i dodaj go jako swój projekt. Zauważysz, że Koala automatycznie znajdzie plik Sass w katalogu arkuszy stylów i wyświetli go.
Kliknij prawym przyciskiem myszy plik Sass i wybierz Ustaw Ścieżkę Wyjściową opcja. Teraz wybierz główny katalog motywów, przykład, / wp-content / themes / mytheme/ i wciśnij enter. Koala wygeneruje teraz plik wyjściowy CSS w katalogu motywów. Aby to przetestować, musisz otworzyć plik Sass styl.scss w edytorze tekstu 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 plik Sass, a pasek boczny zostanie przesunięty po prawej stronie. Aby skompilować plik Sass wystarczy kliknąć na „Compile” guzik. Możesz zobaczyć wyniki, otwierając styl.css plik w katalogu motywu i będzie miał przetworzony CSS w ten sposób:
body {
font-family: arial, verdana, sans-serif;}
Zauważ, że zdefiniowaliśmy zmienną $ fonts w naszych aktach. Teraz, gdy chcemy dodać rodzinę czcionek, nie musimy ponownie wpisywać nazw wszystkich czcionek. Możemy po prostu użyć $ fonts.
Jakie inne supermoce Sass wnosi do CSS?
Sass jest niezwykle potężny, kompatybilny wstecz i bardzo łatwy do nauczenia. Jak już wspomnieliśmy wcześniej, można tworzyć zmienne, zagnieżdżanie, mixiny, import, częściowe, operatory matematyczne i logiczne itp. Teraz pokażemy Ci kilka przykładów i możesz je 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 przewijać w górę iw dół, aby naprawić rzeczy podczas pracy nad swoim motywem. Korzystając z Sass, możesz zaimportować wiele plików do głównego arkusza stylów i wydrukować pojedynczy plik CSS dla Twojego motywu.
A co z CSS @ import ?
Problem z użyciem @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, który nie jest dobry 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ć reset.scss plik w katalogu arkuszy stylów motywu i wklej w nim ten kod.
/ * http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licencja: brak (public domain)
*/
html, body, div, span, aplet, object, iframe,
h1, H2, H3, h4, h5, h6, P, blockquote, pre,
a, abbr, akronim, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
mały, strajk, silny, sub, sup, TT, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
zestaw pól, formularz, Etykieta, legenda,
table, caption, tbody, tfoot, thead, tr, th, td,
artykuł, aside, canvas, details, embed,
rysunek, figcaption, stopka, nagłówek, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
czcionka: inherit;
vertical-align: baseline;
}
/ * HTML5 display - Reset roli dla starszych przeglądarek */
artykuł, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
wyświetlacz: blok;
}
body {
line-height: 1;
}
ol, ul {
styl listy: brak;
}
blockquote, q {
cytaty: brak;
}
blockquote: przed, blockquote: po,
q: before, q:after {
treść:";
treść: brak;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Teraz musisz otworzyć swój główny styl.plik scss i dodaj tę linię, w której 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 styl motywu.plik css, a zobaczysz swój reset css zawarty w nim.
Nestin in 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 z nimi. Na przykład, można zagnieżdżać wszystkie elementy dla < artykuł> sekcja pod selektorem artykułów. Jako projektant motywów WordPress pozwala to łatwo pracować nad różnymi sekcjami i stylować każdy element. Aby zobaczyć nestina w akcji, dodaj to do swojego styl.scss plik:
.entry-content {
p {
font-size: 12px;
linia-wysokość: 150%;
}
ul {
linia-wysokość: 150%;
}
a:link, A:visited, a: active {
tekst-Dekoracja: Brak;
kolor: # ff6633;
}
}
Po przetworzeniu wyświetli następujący CSS:
.entry-content p {
font-size: 12px;
line-height: 150%;}
.entry-content ul {
line-height: 150%;}
.wpis-treść a: link, .wpis-treść a: odwiedzone, .entry-content a: active {
tekst-Dekoracja: Brak;
color: # ff6633;}
Jako projektant motywów będziesz projektować inny wygląd i styl widżetów, postów, menu nawigacji, nagłówka itp. Korzystanie z nestin w Sass sprawia, że jest on dobrze zorganizowany i nie musisz w kółko pisać tych samych klas, selektorów i identyfikatorów.
Używanie Mixinów w Sass
Czasami będziesz musiał ponownie użyć CSS w swoim projekcie, nawet jeśli reguły stylu będą takie same, ponieważ będziesz ich używać na różnych selektorach i klasach. Tu przydają się mixiny. Pozwala dodać mixin do swojego stylu.plik scss:
@ mixin hide-text{
przepełnienie: Ukryte;
text-indent: - 9000px;
wyświetlacz: blok;
}
Ten mixin zasadniczo ukrywa jakiś tekst przed wyświetlaniem. Oto przykład, w jaki sposób możesz użyć tego mixinu do ukrycia tekstu dla swojego logo:
.logo{
background: url ("logo.png");
wysokość: 100px;
width: 200px;
@ include hide-text;
}
Zauważ, że musisz użyć @ include aby dodać mixin. Po przetworzeniu wygeneruje następujący CSS:
.logo {
background: url ("logo.png");
wysokość: 100px;
width: 200px;
przepełnienie: Ukryte;
text-indent: - 9000px;
display: block;}
Mixiny są również bardzo pomocne przy prefiksach dostawców. Dodając wartości krycia lub promień obramowania, używając mixins możesz zaoszczędzić dużo czasu. Spójrz na ten przykład, gdzie 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;}
Mamy nadzieję, że ten artykuł wzbudził zainteresowanie Sass do tworzenia motywów WordPress. Wielu projektantów motywów WordPress już go używa. Niektórzy posuwają się tak daleko, aby powiedzieć, że w przyszłości wszystkie CSS zostaną wstępnie przetworzone, a twórcy motywów WordPress muszą poprawić swoją grę. Daj nam znać, co myślisz o użyciu języka preprocesora CSS, takiego jak Sass, do tworzenia motywów WordPress, zostawiając komentarz poniżej.
Dodatkowe Zasoby
Sass Lang
Sass Way
