Bilang isang bagong taga-disenyo ng tema ng WordPress, madali mong matutunan ang mga hamon ng pagpapanatili ng mahabang mga file ng CSS habang pinapanatili ang mga ito na nakaayos, nasusukat, at nababasa. Matututuhan mo rin na inirerekomenda ng maraming designer at front-end developer ang paggamit ng CSS preprocessor language tulad ng Sass o LESS. Ngunit ano ang mga bagay na ito? at paano ka nagsimula sa kanila? Ang artikulong ito ay isang pagpapakilala sa Sass para sa mga bagong WordPress Theme Designer. Sasabihin namin sa iyo kung ano ang isang preprocessor ng CSS, kung bakit kailangan mo ito, at kung paano i-install at simulang gamitin ang mga ito kaagad.
Ano ang Sass?
Ang CSS na ginagamit namin ay idinisenyo upang maging isang madaling gamitin na estilo ng wika. Gayunpaman ang web ay umunlad, at sa gayon ay ang pangangailangan ng mga designer na magkaroon ng isang wika ng stylesheet na nagpapahintulot sa kanila na gumawa ng higit pa sa mas kaunting pagsisikap at oras. Ang mga wika ng preprocessor ng CSS, tulad ng Sass, ay nagbibigay-daan sa iyo upang gumamit ng mga tampok na kasalukuyang hindi magagamit sa CSS tulad ng paggamit ng mga variable, mga pangunahing operator ng math, nesting, mixins, atbp.
Ito ay napaka tulad ng PHP na isang preprocessor na nagsasagawa ng isang script sa server at bumubuo ng isang output ng HTML. Katulad nito, ang Sass ay nag-preprocesses .scss file upang makabuo ng mga file na CSS na maaaring magamit ng mga browser.
Dahil ang bersyon 3.8, ang mga estilo ng WordPress admin area ay nai-port upang magamit ang Sass para sa pag-unlad. Mayroong maraming mga WordPress tema tindahan at mga developer na ginagamit Sass upang pabilisin ang kanilang proseso ng pag-unlad.
Pagsisimula Sa Sass para sa WordPress Theme Development
Karamihan sa mga designer ng tema ay gumagamit ng lokal na kapaligiran sa pag-unlad upang magtrabaho sa kanilang mga tema bago i-deploy ito sa isang kapaligiran sa pagtatanghal ng dula o isang live na server. Dahil ang Sass ay isang preprocessor language, kakailanganin mong i-install ito sa iyong lokal na kapaligiran sa pag-unlad.
Ang unang bagay na kailangan mong gawin ay i-install ang Sass. Maaari itong magamit bilang isang command line tool, ngunit may mga ilang magagandang GUI Apps na magagamit para sa Sass. Inirerekumenda namin ang paggamit ng Koala, na isang libreng opensource app na magagamit para sa Mac, Windows, at Linux.
Para sa kapakanan ng artikulong ito, kailangan mong lumikha ng blangkong tema. Lamang lumikha ng isang bagong folder sa / wp-content / themes / . Maaari mong pangalanan ito ng ‘mytheme’ o anumang bagay na gusto mo. Sa loob ng iyong blangkong folder ng tema lumikha ng isa pang folder at pangalanan ito ng mga stylesheet.
Sa folder ng mga stylesheet, kailangan mong lumikha ng isang style.scss file gamit ang isang text editor tulad ng Notepad.
Ngayon ay kailangan mong buksan ang Koala at mag-click sa plus icon upang magdagdag ng bagong proyekto. Susunod, hanapin ang iyong direktoryo ng tema at idagdag ito bilang iyong proyekto. Mapapansin mo na awtomatikong mahahanap ng Koala ang Sass file sa direktoryo ng iyong stylesheets at ipakita ito.
Mag-right click sa iyong Sass file at piliin Itakda ang Path ng Output pagpipilian. Ngayon piliin ang root ng iyong direktoryo ng tema, halimbawa, / wp-content / themes / mytheme / at pindutin ang enter. Ang Koala ay bubuo ngayon ng file na output ng CSS sa iyong direktoryo ng tema. Upang subukan ito kailangan mong buksan ang iyong Sass file style.scss sa isang editor ng teksto tulad ng Notepad at idagdag ang code na ito:
$ fonts: arial, verdana, sans-serif;
katawan {
font-family: $ fonts;
}
Ngayon ay kailangan mong i-save ang iyong mga pagbabago at bumalik sa Koala. Mag-right click sa iyong Sass file, at ang sidebar ay slidein sa kanan. Upang itala ang iyong Sass file mag-click lamang sa ‘Magtipon’ na pindutan. Maaari mong makita ang mga resulta sa pamamagitan ng pagbubukas ng style.css file sa iyong direktoryo ng tema, at magkakaroon ito ng na-proseso na CSS tulad nito:
katawan {
font-family: arial, verdana, sans-serif; }
Pansinin na tinukoy namin ang isang variable $ na mga font sa aming Sass file. Ngayon kapag kailangan namin upang magdagdag ng font ng pamilya hindi namin kailangang i-type muli ang mga pangalan ng lahat ng mga font. Maaari lamang nating gamitin $ na mga font .
Ano Iba Pang Superpowers Sass Nagdadala sa CSS?
Sass ay hindi mapaniniwalaan o kapani-paniwala malakas, paatras compatible, at napakadaling upang matuto. Habang binanggit namin nang mas maaga na maaari kang lumikha ng mga variable, nesting, mixin, import, partial, matematiko at lohikal na mga operator, atbp Ngayon ipapakita namin sa iyo ang ilang mga halimbawa, at maaari mong subukan ang mga ito sa iyong WordPress tema.
Pamamahala ng Maramihang Mga Estilo ng Estilo
Isang karaniwang problema na iyong haharapin bilang isang taga-disenyo ng tema ng WordPress ay ang mga malalaking stylesheets na may maraming mga seksyon. Marahil ikaw ay mag-scroll pataas at pababa ng maraming upang ayusin ang mga bagay habang nagtatrabaho sa iyong tema. Paggamit ng Sass, maaari kang mag-import ng maramihang mga file sa iyong pangunahing stylesheet at output ng isang file na CSS para sa iyong tema.
Paano ang tungkol sa CSS @import?
Ang problema sa paggamit ng @import sa iyong CSS file ay na sa bawat oras na magdagdag ka ng isang @import, ang iyong CSS file ay gumagawa ng isa pang kahilingan ng HTTP sa server. Ang mga epekto ng iyong oras ng pagkarga ng pahina na hindi mabuti para sa iyong proyekto. Sa kabilang banda, kapag ginamit mo ang @import sa Sass, isasama nito ang mga file sa iyong Sass file at ibibigay ang lahat sa isang file na CSS para sa mga browser.
Upang matutunan kung paano gamitin @import sa Sass, kailangan muna kang lumikha ng isang reset.scss file sa direktoryo ng stylesheet ng iyong tema at i-paste ang code na ito dito.
/ * http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Lisensya: wala (pampublikong domain)
* /
html, katawan, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
isang, abbr, acronym, address, malaki, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
maliit, strike, malakas, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
talahanayan, caption, tbody, tfoot, thead, tr, th, td,
artikulo, bukod, canvas, mga detalye, pag-embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, seksyon, buod,
oras, markahan, audio, video {
margin: 0;
padding: 0;
hangganan: 0;
laki ng font: 100%;
font: magmana;
vertical-align: baseline;
}
/ * HTML5 display-role reset para sa mga mas lumang browser * /
artikulo, bukod, mga detalye, figcaption, figure,
footer, header, hgroup, menu, nav, seksyon {
display: block;
}
katawan {
line-height: 1;
}
ol, ul {
estilo ng listahan: none;
}
blockquote, q {
quote: none;
}
blockquote: bago, blockquote: pagkatapos,
q: bago, q: pagkatapos {
nilalaman: '';
nilalaman: none;
}
table {
hangganan-pagbagsak: pagbagsak;
border-spacing: 0;
}
Ngayon kailangan mong buksan ang iyong pangunahing file style.scss at idagdag ang linyang ito kung saan mo nais na i-import ang pag-reset ng file:
@import 'reset';
Pansinin na hindi mo kailangang ipasok ang buong pangalan ng file. Upang itala ito, kailangan mong buksan ang Koala at i-click muli ang pindutan ng pag-compile. Buksan mo ngayon ang pangunahing style.css file ng iyong tema, at makikita mo ang iyong pag-reset ng css na kasama dito.
Nestin sa Sass
Hindi tulad ng HTML, CSS ay hindi isang nakapugad na wika. Pinapayagan ka ng Sass na lumikha ng nested na mga file na madaling pamahalaan at magtrabaho kasama. Halimbawa, maaari mong pugad ang lahat ng mga elemento para sa
seksyon, sa ilalim ng selector ng artikulo. Bilang isang taga-disenyo ng tema ng WordPress, ito ay nagbibigay-daan sa iyo upang gumana sa iba’t ibang mga seksyon at estilo ng bawat elemento madali. Upang makita ang nestin sa pagkilos, idagdag ito sa iyong style.scss file:
.entry-content {
p {
laki ng font: 12px;
line-height: 150%;
}
ul {
line-height: 150%;
}
a: link, a: binisita, isang: aktibo {
text-decoration: none;
kulay: # ff6633;
}
}
Pagkatapos ng pagproseso ito ay magpapadala ng sumusunod na CSS:
.entry-content p {
laki ng font: 12px;
line-height: 150%; }
.entry-content ul {
line-height: 150%; }
.entry-content a: link, .entry-content a: binisita, .entry-content a: active {
text-decoration: none;
kulay: # ff6633; }
Bilang isang taga-disenyo ng tema, magdidisenyo ka ng iba’t ibang hitsura at pakiramdam para sa mga widget, mga post, mga menu ng nabigasyon, header, atbp. Ang paggamit ng nestin sa Sass ay ginagawang mahusay na nakabalangkas, at hindi mo kailangang isulat ang parehong mga klase, mga tagapili at mga tagapagpakilala at ulit muli.
Paggamit ng mga Mixin sa Sass
Kung minsan kailangan mong muling gamitin ang ilang CSS sa pamamagitan ng iyong proyekto kahit na ang mga panuntunan sa estilo ay magkapareho dahil gagamitin mo ang mga ito sa iba’t ibang mga tagapili at klase. Ito ay kung saan ang mga mixin ay madaling gamitin. Hinahayaan kang magdagdag ng mixin sa iyong file style.scss:
@ mixin hide-text {
overflow: nakatago;
text-indent: -9000px;
display: block;
}
Ang mixin na ito ay karaniwang nagtatago ng ilang teksto mula sa pagpapakita. Narito ang isang halimbawa kung paano mo magagamit ang mixin upang itago ang teksto para sa iyong logo:
.logo {
background: url ("logo.png");
taas: 100px;
lapad: 200px;
@ isama ang hide-text;
}
Pansinin na kailangan mong gamitin @include upang magdagdag ng isang mixin. Pagkatapos ng pagproseso ay bubuo ito ng sumusunod na CSS:
.logo {
background: url ("logo.png");
taas: 100px;
lapad: 200px;
overflow: nakatago;
text-indent: -9000px;
display: block; }
Ang mga mixin ay kapaki-pakinabang din sa prefix ng vendor. Kapag nagdadagdag ng mga halaga ng opacity o radius ng border, gamit ang mga mixin maaari mong i-save ka ng maraming oras. Tingnan ang halimbawang ito, kung saan nagdagdag kami ng mixin upang magdagdag ng radius ng border.
@mixin border-radius ($ radius) {
-webkit-border-radius: $ radius;
-moz-border-radius: $ radius;
-ms-border-radius: $ radius;
-o-border-radius: $ radius;
border-radius: $ radius;
}
.largebutton {@ isama ang border-radius (10px); }
.smallbutton {@ isama ang border-radius (5px); }
Pagkatapos ng pag-compile, bubuo ito ng sumusunod na 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; }
Umaasa kami na ang artikulong ito ay piqued ang iyong interes sa Sass para sa pagpapaunlad ng tema ng WordPress. Maraming mga taga-disenyo ng tema ng WordPress ang ginagamit na ito. Ang ilan ay nagsasabi na sa hinaharap ang lahat ng CSS ay magiging preprocessed, at ang mga developer ng tema ng WordPress ay kailangang tumagal ng kanilang laro. Ipaalam sa amin kung ano ang iyong iniisip tungkol sa paggamit ng CSS preprocessor na wika tulad ng Sass para sa iyong WordPress tema development sa pamamagitan ng pag-iwan ng komento sa ibaba.
Karagdagang Mga Mapagkukunan
Sass Lang
Ang Sass Way