Pehea e wehe ai i kahi faila SASS
Hoʻolauna:
Ua lilo ʻo SASS (Syntactically Awesome Style Sheets) i mea koʻikoʻi no nā mea hoʻomohala pūnaewele ma muli o kona hoʻonui code a me ka hiki ke hoʻohana hou. Eia nō naʻe, i mea e hoʻohana pono ai i kēia ʻōlelo hoʻonohonoho ikaika, pono e ʻike pehea e wehe pololei ai i kahi faila SASS. Ma kēia ʻatikala, e wehewehe mākou i kēlā me kēia ʻanuʻu nā ʻano hana like ʻole e wehe a hana pū me nā faila SASS, ma nā wahi hoʻomohala a me nā mea hana kikoʻī.
ʻO ke ala maʻamau: Ke hoʻohana nei i kahi hoʻoponopono kikokikona
ʻO ke ala maʻamau no ka wehe ʻana i kahi faila SASS ʻo ka hoʻohana ʻana i kahi hoʻoponopono kikokikona. Hiki iā ʻoe ke hoʻohana i nā polokalamu e like me Sublime Text, Keʻena Hoʻonaʻauao Kiʻi Code a i ʻole Atom, i hoʻohana nui ʻia e nā mea hoʻomohala pūnaewele. Hiki iā ʻoe ke wehe i kahi faila SASS ma ke kaomi ʻana iā "Open File" i kāu hoʻoponopono kikokikona punahele a koho i ka faila me ka ».scss" a i ʻole ".sass". I ka manawa wehe ʻoe i ka faila, hiki iā ʻoe ke nānā a hoʻoponopono i ke code SASS ma ke ʻano like me kekahi faila kikokikona.
Ka hoʻohana o kahi hoʻomohala hoʻohuihui (IDE)
Inā makemake ʻoe i ʻike hou aku i ka wā e hana ana me nā faila SASS, hiki iā ʻoe ke noʻonoʻo e hoʻohana i kahi kaiapuni hoʻomohala hoʻohui ʻia (IDE). Hāʻawi nā IDE e like me Visual Studio IDE, WebStorm a i ʻole RubyMine i nā hiʻohiʻona hou no ke kākau ʻana a me ka hōʻuluʻulu ʻana i ka code SASS. No ka wehe ʻana i kahi faila SASS i kahi IDE, pono ʻoe e hana a hoʻokomo paha i kahi papahana a laila hoʻohui a hana paha i ka faila SASS i loko o ia papahana. Ke hoʻopau ʻoe i kēia mau ʻanuʻu, hiki iā ʻoe ke komo a hoʻoponopono i ka faila SASS me nā hana hou a me nā hiʻohiʻona i hāʻawi ʻia e ka IDE.
ʻO ka hoʻohanaʻana i nā mea hana kūikawā
Ma waho aʻe o nā ʻano i ʻōlelo ʻia ma luna nei, aia nā mea hana kūikawā i hoʻolālā kūikawā ʻia e hana me nā faila SASS. No ka laʻana, aia nā mea kūʻai laina kauoha, e like me ka SASS CLI, e ʻae iā ʻoe e wehe a hōʻuluʻulu i nā faila SASS mai ka pahu. Aia kekahi mau lawelawe pūnaewele, e like me CodePen a i ʻole SassMeister, e hāʻawi ana i kahi kaiapuni hoʻomohala pūnaewele me nā mea hana āpau e pono ai e hana me nā faila SASS. I ka hoʻohana ʻana i nā hāmeʻa kikoʻī, pono ʻoe e hoʻoiho a hoʻokomo i ka polokalamu pili, e hahai i nā ʻōkuhi hoʻonohonoho, a hope loa e hoʻouka i ka faila SASS mai ka hāmeʻa. Ke hana ʻoe pēlā, hiki iā ʻoe ke hoʻohana i nā hana kikoʻī āpau a me nā hiʻohiʻona o ka hāmeʻa e hana me kāu faila SASS.
I ka hōʻuluʻulu manaʻo, ʻO ka wehe ʻana i kahi faila SASS he mea nui e hiki ke hana me kēia ʻōlelo pepa ʻano. Inā hoʻohana ʻoe i ka mea hoʻoponopono kikokikona, kahi ʻenehana hoʻomohala hoʻohui ʻia, a i ʻole nā mea hana kikoʻī, ʻo ka ʻike ʻana i nā ala like ʻole no ka wehe ʻana i nā faila SASS e ʻae iā ʻoe e hoʻohana pono i kā lākou mau mea hiki a e maʻalahi kāu hana ma ke ʻano he mea hoʻomohala pūnaewele. E hahai i nā ʻanuʻu i hōʻike ʻia ma kēia ʻatikala a hoʻomaka i ka hoʻohana ʻana i nā pono āpau i hāʻawi ʻia e kēia ʻōlelo hoʻolālā kupaianaha.
Pehea e hoʻouka ai i ka SASS compiler ma kāu ʻōnaehana hana
1. Hoʻoiho i ka polokalamu kūpono: Ma mua o ka wehe ʻana i kahi faila SASS, pono ʻoe e hoʻokomo i ka SASS compiler ma kāu ʻōnaehana hana. E ʻae kēia iā ʻoe e hōʻuluʻulu i ka code SASS i CSS hiki ke heluhelu ʻia. Hiki iā ʻoe ke hoʻoiho i ka SASS compiler mai kāna pūnaewele official a koho i ka mana kūpono no kāu ʻōnaehana hana. E hōʻoia ʻoe e koho i ka mana kūpono, inā no Windows, macOS, a Linux paha.
2. Hoʻokomo ʻia ma Windows: Ke hoʻoiho ʻia ka faila hoʻonohonoho, kaomi pālua iā ia e hoʻomaka i ke kaʻina hana. E hahai i nā kuhikuhi ma ka pale a e ʻae i nā ʻōlelo a me nā kūlana. Ma hope o ka pau ʻana o ka hoʻouka ʻana, hiki iā ʻoe ke wehe i ka SASS compiler mai ka papa kuhikuhi hoʻomaka a i ʻole ma ka hoʻohana ʻana i ke kauoha sass ma ka laina kauoha.
3. Hoʻokomo ʻia ma macOS a me Linux: Ma nā ʻōnaehana hana macOS a me Linux, hoʻokomo ʻia ka SASS compiler ma o ka laina kauoha. E wehe i ka pahu a holo i kēia kauoha: gem install sass. E hoʻokomo kēia i ka SASS compiler me ka hoʻohana ʻana i RubyGems. Ma hope o ke kau ʻana, hiki iā ʻoe ke wehe i nā faila SASS me ka hoʻohana ʻana i ke kauoha "sass" i ukali ʻia e ka inoa faila ma ka pahu. Inā makemake ʻoe e ʻike i nā hopena i ka manawa maoli ʻOiai e hoʻoponopono ana i kāu mau faila SASS, hiki iā ʻoe ke hoʻohui i ke kauoha --watch i ka hopena i hiki ai i ka mea hoʻopili ke hoʻohou iā ia iho.
Pehea e hana ai i kahi faila SASS ʻole
ʻO kahi faila SASS ʻole ka wahi hoʻomaka no ka hoʻomohala ʻana i nā ʻano me kēia preprocessor CSS ikaika. No ka hana ʻana i kahi faila SASS ʻole, hahai mākou i kekahi mau ala maʻalahi. ?
KaʻAnuʻu Hana 1: Wehe i kāu mea hoʻoponopono code punahele. Hiki paha Code Visual Studio, Atom, Sublime Text a i ʻole nā mea ʻē aʻe āu e koho ai.
KaʻAnuʻu Hana 2: E hana i kahi waihona hou ma kāu directory no nā faila style. Hiki iā ʻoe ke inoa i nā mea āu e makemake ai, akā makemake ʻia e hoʻohana i kahi inoa maʻalahi a wehewehe, e like me "styles" a "sass".
KaʻAnuʻu Hana 3: I loko o ka waihona i hana hou ʻia, hana i kahi faila hou me ka hoʻonui ".scss". Hiki iā ʻoe ke inoa i nā mea āu e makemake ai, akā e hōʻoia i ka hoʻonui pololei ʻana i ʻike ai kāu mea hoʻoponopono. mai kahi faila SASS.
Ke hahai ʻoe i kēia mau ʻanuʻu, e mākaukau kāu faila SASS ʻole e hoʻomaka e hoʻomohala i kāu mau ʻano. E hoʻomanaʻo i ka SASS hiki iā ʻoe ke hoʻohana i nā hiʻohiʻona āpau o ka ʻōlelo CSS, akā loaʻa iā ʻoe nā hana ikaika e like me nā loli, nesting, mixins a me nā mea hou aku. Mai ʻaneʻi, hiki iā ʻoe ke hoʻomaka e hoʻohui i kāu mau ʻano, import nā faila ʻē aʻe SASS a hoʻohana pono i nā pono i hāʻawi ʻia e kēia preprocessor CSS.
Pehea e hoʻokomo ai i nā faila SASS i kāu papahana
Nui nā ala e hoʻokomo ai i nā faila SASS i kāu papahana. ʻO ka mea mua ma ka hoʻohana ʻana i ka syntax import SASS, hiki iā ʻoe ke hoʻokomo i nā faila SASS pākahi i kāu faila nui No ka hana ʻana i kēia, e hoʻohana wale i ke kauoha @import a ukali ʻia e ka inoa o ka faila SASS āu e makemake ai e hoʻokomo. Hiki iā ʻoe ke lawe mai nā faila he nui i hoʻokahi kauoha hoʻokomo, e hoʻokaʻawale iā lākou me nā koma. Pono kēia inā loaʻa iā ʻoe nā faila SASS he nui āu e makemake ai e hoʻokomo i kāu papahana.
ʻO kekahi ala e hoʻokomo ai i nā faila SASS ma ka hoʻohana ʻana i kahi faila hoʻonohonoho i kapa ʻia _config.scss. Hoʻohana ʻia kēia faila no ka hoʻonohonoho ʻana i nā mea hoʻololi honua a me nā hoʻonohonoho no kāu papahana. No ka hoʻokomo ʻana i nā faila SASS ʻē aʻe i kāu papahana, e hoʻohui i ke kauoha @import a ukali ʻia e ka inoa o ka faila āu e makemake ai e hoʻokomo i loko o ka faila _config.scss. Hiki iā ʻoe ke loaʻa kahi faila kikowaena kahi e hiki ai iā ʻoe ke hoʻokomo i kāu mau faila SASS āpau.
Eia hou, hiki iā ʻoe ke hoʻohana i ke kauoha @hoohana e hoʻokomo i nā faila SASS. Ua like ka syntax me ke kauoha @import, akā me kekahi mau ʻokoʻa. ʻO ke kauoha @hoohana ʻo ia ke ala i manaʻo ʻia e hoʻokomo i nā faila SASS e hoʻomaka ana me ka mana SASS 5. Hāʻawi ia i ka lawelawe maikaʻi ʻana i nā inoa module a ʻalo i nā paio inoa. Hiki iā ia ke kōkua i ka hoʻomaikaʻi ʻana i ka hana o kāu pāhana ma ka lawe ʻana mai i nā kaila āu e pono ai ma mua o ka lawe ʻana i ka faila holoʻokoʻa. E hoʻomanaʻo e hoʻohana i ke kauoha @hoohana, pono ʻoe e hōʻoia ua hoʻokomo ʻia kahi mana hou o SASS.
Pehea e hōʻuluʻulu ai i kahi faila SASS i CSS
No ka hoʻopili ʻana i kahi faila SASS i CSS, pono ʻoe e hōʻoia mua ua kau ʻia ka SASS preprocessor ma kāu ʻōnaehana. Inā ʻaʻole iā ʻoe, hiki iā ʻoe ke hoʻoiho a hoʻokomo iā ia mai ka pūnaewele kūhelu. I ka manawa ua kau ʻia ʻoe, e mākaukau ʻoe e hoʻomaka.
ʻO ka hana aʻe e hana i kahi faila SASS me ka hoʻonui .scss. Hiki iā ʻoe ke wehe i kahi hoʻoponopono kikokikona e like me Sublime Text, Visual Kōmike Studio o Atom, a hana i faila hou me ka hoʻonui .scss. Ke hana ʻoe i ka faila, hiki iā ʻoe ke hoʻomaka e kākau i kāu code SASS i loko.
Ke pau ʻoe i ke kākau ʻana i kāu code SASS, ʻo ia ka manawa e hōʻuluʻulu iā ia i CSS. Nui nā ala e hana ai. ʻO kahi koho e hoʻohana i ka laina kauoha. E wehe i ka pahu a hoʻokele i kahi o kāu faila SASS. A laila e hoʻohana i ke kauoha sass filename.scss . filename.css e hōʻuluʻulu i ka faila SASS i CSS. Ke hoʻopau ʻia ke kūkulu ʻana, hiki iā ʻoe ke loaʻa ka faila CSS ma kahi like me ka faila SASS.
ʻO kahi koho ʻē aʻe ʻo ka hoʻohana ʻana i ka polokalamu a i ʻole ka hoʻonui ʻana i kāu hoʻoponopono kikokikona e hana i ka hōʻuluʻulu no ʻoe. No ka laʻana, ma Visual Studio Code hiki iā ʻoe ke hoʻohana i ka hoʻonui ʻia ʻo Live Sass Compiler. Ma hope o ka hoʻokomo ʻana iā ia, kaomi pololei ma ka faila SASS a koho i ke koho "Watch Sass" e hoʻomaka i ka hōʻuluʻulu ʻana iā ia i CSS. E hoʻomanaʻo e mālama i kāu mau hoʻololi i ka faila SASS i mea e kūleʻa ai ka hui ʻana.
I kēia manawa ua ʻike ʻoe, hiki iā ʻoe ke hoʻohana i nā pono āpau a ka SASS preprocessor e hāʻawi i kāu mau papahana pūnaewele. E hoʻomanaʻo ʻo ka faila CSS ka mea āu e hoʻopili ai i kāu HTML i hoʻohana pono ʻia nā ʻano. E hele mai e ʻimi hou aʻe e pili ana i ka SASS a hoʻonui i kāu mākaukau hoʻomohala mua!
Pehea e hoʻohana ai i nā mea hoʻololi i kahi faila SASS
Hiki i nā mea hoʻololi i loko o kahi faila SASS ke mālama a hoʻohana hou i nā waiwai, e ʻoi aku ka maʻalahi o ka mālama a hoʻonui i kāu code. No ka hoʻohana ʻana i nā mea hoʻololi ma SASS, e hahai wale i kēia mau ʻanuʻu:
1. E haʻi aku i kahi loli: No ka haʻi ʻana i kahi hoʻololi ma SASS, e hoʻohana i ka hōʻailona kālā i ukali ʻia e ka inoa hoʻololi a hāʻawi i kahi waiwai iā ia. No ka laʻana, hiki iā ʻoe ke haʻi aku i kahi ʻano i kapa ʻia ʻo "primary-color" a hāʻawi iā ia i ka waiwai "#FF0000" e hōʻike i ke kala ʻulaʻula. Hana ʻia kēia ʻōlelo ma ka hoʻomaka ʻana o ka faila SASS, ma mua o ka hoʻohana ʻana i ka mea hoʻololi i kekahi mea koho a waiwai paha.
2. E hoʻohana i ka hoʻololi: Ke haʻi aku ʻoe i kahi loli, hiki iā ʻoe ke hoʻohana iā ia ma nā wahi āpau o kāu faila SASS. No ka hoʻohana ʻana i kahi hoʻololi, e hoʻohana wale i ka inoa hoʻololi ma mua o ka hōʻailona kālā. No ka laʻana, inā makemake ʻoe e e hoʻohana i ka ʻano hoʻololi »kumu-kumu» no ka wehewehe ʻana i ke kala kikokikona o kahi mea, hiki iā ʻoe ke hana penei: kala: $primary-color;
3. Hōʻano hou i kahi hoʻololi: ʻO kekahi o nā mea maikaʻi o ka hoʻohana ʻana i nā mea hoʻololi i ka SASS ʻo ia ka hiki ke hoʻololi maʻalahi i nā waiwai a puni ka faila. Inā pono ʻoe e hoʻololi i ka waihoʻoluʻu mua o kāu pūnaewele mai ka ʻulaʻula a i ka polū, e hoʻololi wale i ka waiwai o ka hoʻololi "kumu kumu" ma kahi hoʻokahi a e ʻike ʻia kēia hoʻololi i nā manawa a pau i hoʻohana ʻia ai ka hoʻololi ma ka waihona. ʻO kēia ka mea i ʻoi aku ka maikaʻi o ke kaʻina hana o ka mālama ʻana a me ka hoʻonui ʻana i ke code a emi ʻole i nā hewa.
I ka pōkole, ʻo ka hoʻohana ʻana i nā mea hoʻololi i kahi faila SASS he ala maikaʻi loa ia e hoʻomaikaʻi ai i ka heluhelu heluhelu, hoʻohana hou, a me ka mālama ʻana i kāu code CSS. Ma ka haʻi wale ʻana i nā mea hoʻololi i ka hoʻomaka ʻana o ka faila a me ka hoʻohana ʻana i ko lākou inoa ma mua o kahi hōʻailona kālā, hiki iā ʻoe ke mālama i ka manawa a me ka hoʻoikaika ʻana i nā waiwai i nā wahi he nui. E hoʻomaka i ka hoʻohana ʻana i nā mea hoʻololi i kāu mau faila SASS a ʻike i ka maʻalahi a me ka pono a lākou e hāʻawi ai!
Pehea e hoʻopili ai i nā mea koho ma SASS no ka hoʻomohala maʻalahi
Ma SASS, ʻo nā mea koho nesting kahi ʻenehana maikaʻi loa e maʻalahi ai ka hoʻomohala ʻana a mālama i ka code CSS. Ma ka nesting koho, hiki iā ʻoe ke hui pū i nā lula CSS e pili ana i kahi mea kikoʻī a me kāna mau keiki. Hōʻalo kēia i ka hana hou ʻana i ke code like no kēlā me kēia mea keiki a kōkua i ka mālama ʻana i ka code maʻemaʻe a ʻoi aku ka hoʻonohonoho ʻana.
E hoʻomoe i nā mea koho ma SASS, pono ʻoe e kākau ka mea koho nui a ukali ʻia e a space a laila ka mea koho lua. No ka laʻana, inā loaʻa iā ʻoe kahi mea koho no ka mea ipu a makemake ʻoe e hoʻopili i kahi ʻano kikoʻī i ka mea poʻo inoa i loko o ka ipu, hiki iā ʻoe ke hoʻomoe iā ia penei:
.container {
kala: uliuli;
.title {
nui-momona: 20px;
kaumaha-kaumaha: wiwo ʻole;
}
}
Ma kēia ala, e hoʻohana wale ʻia ke ʻano i ke poʻo inoa i loko o ka ipu a ʻoi aku ka maʻalahi o ka heluhelu ʻana a me ka maʻalahi o ka mālama ʻana i ke code. Hoʻohui ʻia, hiki ke hoʻopaʻa ʻia nā mea koho he nui ma muli o ka loiloi like.
Pehea e hoʻohana ai i nā mixins a me nā hana ma SASS e hoʻohana hou i ke code
ʻO nā huila a me nā hana ma SASS he mau mea hana ikaika e ʻae iā mākou e hoʻohana hou i ka code a hoʻomaikaʻi i kā mākou pono i ka hoʻomohala pūnaewele.
ʻO nā huila He mau poloka ia o ka code i loaʻa nā waiwai a me nā waiwai i hiki ke hoʻohana ʻia ma nā ʻāpana like ʻole o kā mākou papahana. Hiki iā mākou ke wehewehe i kahi mixin me @mixin a ukali ʻia e ka inoa o ka mixin a me nā ʻano a mākou e makemake ai e hoʻokomo. A laila, hiki iā mākou ke hoʻohana i kēlā mixin ma nā wahi āpau i kā mākou faila SASS me @hookomo ukali ʻia e ka inoa o ka mixin. ʻAe kēia iā mākou e pale i ka hana hou ʻana a mālama i kā mākou code maʻemaʻe a maʻemaʻe. Eia hou, hiki i nā mixins ke ʻae i nā hoʻopaʻapaʻa, e hāʻawi iā mākou i ka maʻalahi e hoʻololi iā lākou i nā kūlana like ʻole.
Las funciones ma SASS lākou e ʻae iā mākou e hana i nā helu a me nā hoʻololi ʻikepili i loko o kā mākou code. Hiki iā mākou ke hoʻohana i nā functions e hana i nā hana makemakika, e like me ka hoʻohui ʻana a i ʻole ka unuhi ʻana i nā waiwai, ka hoʻololi ʻana i nā ʻāpana o ke ana a i ʻole ka hana ʻana i nā kala dynamically. E like me nā mixins, ʻae nā hana ma SASS iā mākou e hoʻohana hou i ka code a hoʻomaikaʻi i kā mākou hoʻomohala ʻana. Hiki iā mākou ke hoʻohana i nā hana i loko o nā waiwai ʻē aʻe, e like me ka waiwai o kahi waihoʻoluʻu a i ʻole ka nui o ka font, e hoʻoikaika a maʻalahi hoʻi ka mālama ʻana i kā mākou ʻano.
I ka pōkole, ʻo nā hui ʻelua a me nā hana ma SASS he mau mea hana ikaika e hiki ai iā mākou ke hoʻohana hou i ka code a hoʻomaikaʻi i kā mākou pono. i ka hoʻomohala pūnaewele. Ma ka hoʻohana ʻana i nā mixins, hiki iā mākou ke pale i ka hana hou ʻana i nā code a mālama i kā mākou code maʻemaʻe a maʻemaʻe. ʻO nā hana, ma ka ʻaoʻao ʻē aʻe, e ʻae iā mākou e hana i ka helu ʻana a me ka hoʻoponopono ʻikepili i loko o kā mākou code.
Pehea e hoʻohana ai i nā hana Flow Control ma SASS e hana i nā ʻano Dynamic
ʻO nā hana kahe mana ma SASS he mea hana ikaika no ka hana ʻana i nā ʻano dynamic. i kāu mau papahana. Hāʻawi kēia mau hiʻohiʻona iā ʻoe e hoʻoholo a hana i nā hana e pili ana i nā kūlana kikoʻī. No ka laʻana, hiki iā ʻoe ke hoʻohana i ka hana @if e hoʻopili i kahi ʻano ʻokoʻa i kahi mea i ka wā e hoʻokō ʻia ai kekahi kūlana. Eia hou, hāʻawi pū ʻo SASS ka @for a me @each hana e ʻae iā ʻoe e hana hou i nā ʻano a i ʻole hana i nā hana ma kahi pūʻulu o nā mea.
No ka hoʻohana ʻana i kēia mau hiʻohiʻona ma SASS, pono ʻoe e hōʻoia mua ua hoʻokomo ʻia ka SASS compiler ma kāu ʻōnaehana. Ke hoʻonohonoho ʻoe i kāu kaiapuni hoʻomohala, hiki iā ʻoe ke hoʻomaka e kākau i kāu mau ʻano me ka hoʻohana ʻana i nā hana kahe mana. No ka hoʻohana ʻana i ka hana @if, e kuhikuhi wale ʻoe i kahi kūlana i loko o nā pale a laila kaomi i ke ʻano āu e makemake ai e hoʻopili inā hoʻokō ʻia kēlā kūlana. Hiki iā ʻoe ke hoʻohana i nā mea hoʻohana loiloi e like me ==, !=, >, <, >=, <=, a, a i ʻole, ʻaʻole e hoʻohālikelike i nā waiwai . He mea maikaʻi loa kā SASS @for hana inā pono ʻoe e hoʻopili hou i nā ʻano. Hiki iā ʻoe ke hoʻohana i kēia hana no ka hana ʻana i kekahi pūʻulu kaila e pili ana i kahi kumu hoʻohālike a i ʻole e wili i loko o kahi hui ʻeleʻele a pili i kahi ʻano kikoʻī iā lākou. No ka hoʻohana ʻana i ka @for hana, pono ʻoe e kuhikuhi i kahi hoʻololi hoʻololi, kahi ʻano o nā waiwai, a me ke ʻano āu e makemake ai e hoʻopili i kēlā me kēia hoʻololi. Hiki iā ʻoe ke hoʻohana i ka hana #{...} no ka hoʻohui ʻana i nā waiwai i kāu mau kaila a hana i nā ʻano hoʻoikaika. Hiki nō hoʻi iā ʻoe ke hoʻohana i ka hana @each e hoʻololi i kahi lista de valores a hoʻopili i kahi ʻano kikoʻī iā lākou.
Me nā hana kahe mana ma SASS, hiki iā ʻoe ke hana i nā ʻano dynamic a hoʻopili i nā hana e pili ana i nā kūlana kikoʻī. Mālama kēia mau hiʻohiʻona iā ʻoe i ka manawa a mālama i kāu mau ʻano i hoʻonohonoho ʻia a maʻalahi hoʻi e mālama. E hoʻāʻo me kēia mau hiʻohiʻona i kāu papahana SASS e hiki mai ana a ʻike i nā mea hiki a pau āu e makemake ai. E leʻaleʻa i ka ʻimi ʻana i nā hiʻohiʻona kahe kahe ma SASS a hana i nā ʻano hoʻoikaika kupanaha!Pehea e hoʻonohonoho a hoʻonohonoho i kāu papahana SASS no ka mālama maʻalahi
No ka wehe ʻana i kahi faila SASS a hoʻomaka i ka hana ʻana, pono mua ʻoe i kahi hoʻoponopono kikokikona SASS-compatible, e like me Visual Studio Code a i ʻole Sublime Text. Ke koho ʻoe i kāu mea hoʻoponopono makemake, hiki iā ʻoe ke hana i kahi faila hou me ka hoʻonui ".scss" e hōʻike ai he faila SASS.
Ke hana ʻoe i kāu faila SASS, he mea nui ia hoʻonohonoho a hoʻonohonoho i kāu papahana kūpono no ka mālama ʻana i ka wā e hiki mai ana. ʻO kahi hana maikaʻi ʻo ka hoʻokaʻawale ʻana i kāu code i nā faila like ʻole, kēlā me kēia me kahi hana kikoʻī. No ka laʻana, hiki iā ʻoe ke loaʻa i hoʻokahi faila no nā mea hoʻololi, ʻo kekahi no nā ʻano kumu, a ʻo kekahi no nā ʻano ʻāpana. ʻO ka hoʻohana ʻana i kahi ala modular e ʻae iā ʻoe e hana ʻoi aku ka maikaʻi a ʻike koke i nā hewa a i ʻole nā ʻāpana code āu e pono ai e hoʻololi.
Ma waho aʻe o ka hoʻokaʻawale ʻana i kāu code i nā faila ʻokoʻa, pono nō hoʻi e hoʻohana hoʻokomo i nā kuhikuhi e hoʻonohonoho a kauoha i kāu papahana SASS. Hāʻawi kēia mau kuhikuhi iā ʻoe e hoʻokomo i nā faila SASS i loko o nā mea ʻē aʻe, e maʻalahi ka hoʻohana hou ʻana i ka code a pale i ka hoʻopiʻi pono ʻole. No ka laʻana, hiki iā ʻoe ke hoʻokomo i nā faila hoʻololi i kēlā me kēia o kāu mau faila SASS ʻē aʻe e loaʻa i nā ʻano like ʻole i kāu papahana.
ʻO kekahi ʻenehana pono no maʻalahi ka mālama ʻana o kāu papahana SASS e hoʻohana i nā manaʻo wehewehe a wehewehe i kāu code. Hāʻawi nā manaʻo iā ʻoe e wehewehe i ke kumu a i ʻole ke kumu o kekahi mau ʻāpana code, e maʻalahi iā ʻoe a i ʻole nā mea hoʻomohala ʻē aʻe e hoʻomaopopo a hoʻololi i ke code i ka wā e hiki mai ana. Eia hou, hiki iā ʻoe ke hoʻohana i nā mea hana hoʻokumu palapala e like me SassDoc a i ʻole KSS e hoʻopuka aunoa i nā palapala no kāu papahana, e kōkua iā ʻoe a me nā lālā ʻē aʻe e hoʻomaopopo i ke ʻano o ka hoʻonohonoho ʻana a me ke ʻano o ka papahana SASS. Me kēia mau hana, hiki iā ʻoe ke mālama pono i kāu papahana SASS a hoʻololi maʻalahi i ka wā e hiki mai ana.
Pehea e hoʻohana pono ai i nā hiʻohiʻona kiʻekiʻe o SASS e hoʻomaikaʻi i ka pono o kāu code
Ke ʻimi nei i nā hiʻohiʻona holomua o SASS
ʻO SASS, i kapa ʻia ʻo Syntactically Awesome Style Sheets, he mea hana e hiki ai i nā mea hoʻomohala ke hana i nā ʻano pepa ʻoi aku ka maikaʻi a me ka ikaika. ʻO kekahi o nā mea maikaʻi o SASS ʻo ia ka hiki ke hāʻawi i nā hiʻohiʻona holomua e hoʻomaikaʻi i ka workflow code a me ka pono. Ma ka hoʻohana ʻana i kēia mau hiʻohiʻona, hiki i nā mea hoʻomohala ke kākau i nā ʻano i kahi ala wikiwiki a hoʻonohonoho ʻia. Ma kēia ʻatikala, e ʻimi mākou i kēia mau hiʻohiʻona a ʻike pehea e hoʻohana ʻia ai e hoʻomaikaʻi i ka pono o kāu code SASS.
Hoʻomaikaʻi i ka pono code me SASS
ʻO kekahi o nā hiʻohiʻona holomua loa o SASS ʻo ka hiki ke hoʻohana nā loli. Me nā mea hoʻololi, hiki iā ʻoe ke mālama i nā waiwai hoʻohana hou a hāʻawi iā lākou i kahi inoa koʻikoʻi. ʻO kēia ka mea e maʻalahi ai ka mālama ʻana a me ka hoʻonui ʻana i kāu code, no ka mea pono ʻoe e hoʻololi i hoʻokahi ʻano hoʻololi no lākou e hoʻohana ʻia ma nā wahi he nui. Eia kekahi, ʻae nā mea hoʻololi iā ʻoe e mālama i ke ʻano kūlike i kāu code SASS, no ka mea hiki iā ʻoe ke hoʻohana i ka waiwai like i nā lula ʻokoʻa.
ʻO kahi hiʻohiʻona ʻē aʻe o SASS ka hiki ke hoʻohana huikaus. ʻO Mixins nā poloka code hiki ke loaʻa nā waiwai CSS a kāhea ʻia ma nā wahi like ʻole. He mea maikaʻi loa kēia inā makemake ʻoe e hoʻopili i nā ʻano like i nā mea like ʻole a i ʻole ʻāpana o kāu pūnaewele. Ma ka hoʻohana ʻana i nā mixins, hiki iā ʻoe ke mālama i ka manawa a me ka hoʻoikaika ʻana ma ka pale ʻana i ka hoʻopaʻa pinepine ʻana i ke code like ʻole. hou.
Hoʻonohonoho i kāu mau ʻano me SASS
Ma kahi o nā hiʻohiʻona holomua i ʻōlelo ʻia ma luna, hāʻawi pū ʻo SASS nā mea koho pūnana. ʻAe kēia iā ʻoe e kākau i nā ʻano pūnana i loko o nā ʻano ʻē aʻe, ma mua o ka hana hou ʻana i nā mea koho CSS holoʻokoʻa. Hiki i kēia ke kōkua i ka mālama ʻana i kāu code i hoʻonohonoho ʻia a hiki ke heluhelu ʻia, no ka mea hiki iā ʻoe ke hui pū i nā ʻano pili i loko o ka poloka hoʻokahi. He mea maʻalahi hoʻi ka hoʻomaopopo ʻana i ke ʻano a me ka hierarchy o kāu code SASS, ʻoi aku ka i ka wā e hana ana i nā papahana nui me nā ʻano a me nā mea koho.
I ka pōkole, ʻo ka hoʻohana ʻana i nā hiʻohiʻona holomua o SASS hiki ke hoʻomaikaʻi nui i ka pono o kāu code. Me nā ʻano like ʻole, mixins a me nā mea koho pūnana, hiki iā ʻoe ke kākau i nā ʻano i ka wikiwiki, hoʻonohonoho a mālama ʻia. ʻO ka lawe ʻana i ka manawa e kamaʻāina ai i kēia mau hiʻohiʻona a me ka hoʻopili ʻana iā lākou i kāu kaʻina hana hoʻomohala hiki ke alakaʻi i ka code SASS ʻoi aku ka maikaʻi a mālama manawa i ka wā e hiki mai ana.
ʻO wau ʻo Sebastián Vidal, he ʻenekinia kamepiula makemake nui i ka ʻenehana a me DIY. Eia kekahi, ʻo wau ka mea nāna i hana tecnobits.com, kahi aʻu e kaʻana like ai i nā kumu aʻo e hoʻomaʻamaʻa a hoʻomaopopo ʻia ka ʻenehana i nā mea a pau.