Pehea e wehe ai i kahi faila SCSS

ʻO ka wehe ʻana i kahi faila SCSS e like paha me kahi hana paʻakikī no ka poʻe e hoʻomaka nei i ka honua o ka hoʻomohala mua. Eia nō naʻe, ʻo ka hoʻomaopopo ʻana i ka hana a me ka wehe pono ʻana he mea nui ia i hiki ke hoʻoponopono a hōʻuluʻulu i nā ʻano me ka maikaʻi. Ma kēia ʻatikala, e ʻimi mākou i kēlā me kēia lā pehea e wehe ai i kahi faila SCSS a loaʻa i ka mea maikaʻi loa o kēia ʻōlelo pepa kaila ikaika no nā papahana pūnaewele. Inā mākaukau ʻoe e luʻu i ka honua o nā faila SCSS, e heluhelu ma!

1. Hoʻomaka i nā faila SCSS a me kā lākou mea nui i ka hoʻomohala pūnaewele

ʻO nā faila SCSS, pōkole no Sassy CSS, he hoʻonui ia o ka ʻōlelo CSS e hāʻawi ana i nā hoʻomaikaʻi a me nā hiʻohiʻona hou e hoʻoikaika i ka hoʻomohala pūnaewele. Ua lilo kēia ʻenehana i mea kaulana i waena o nā mea hoʻomohala ma muli o kona maʻalahi a me ka hiki ke hoʻonohonoho a hoʻololi i ka code CSS. Hoʻohui hou, ʻae nā faila SCSS iā ʻoe e hoʻohana i nā ʻano like ʻole, mixins a me nā nesting, e maʻalahi ke hana i nā ʻano hoʻohana hou ʻoiai e mālama ana i ka code maʻemaʻe a hiki ke heluhelu ʻia.

Ma ka hoʻomohala pūnaewele, he kuleana koʻikoʻi nā faila SCSS i ke kōkua ʻana i ka hoʻomaikaʻi ʻana i ka pono a me ka maikaʻi o ka code CSS. Me nā faila SCSS, hiki ke hoʻokaʻawale i ka code CSS i nā faila he nui e hoʻonohonoho a mālama i kahi ala ʻoi aku ka maʻalahi. He mea maʻalahi kēia i ka hoʻohana hou ʻana i nā ʻano a pale i ka hana hou ʻana i nā code pono ʻole.

Eia hou, ʻae nā faila SCSS iā ʻoe e hoʻohana i nā hiʻohiʻona holomua, e like me nā mixins. ʻO Mixins nā poloka code hiki ke hoʻohana hou ʻia i nā ʻāpana like ʻole o ke ʻano. Mālama kēia i ka manawa a me ka hoʻoikaika ʻana ma ka ʻalo ʻana i ke kākau ʻana i ke code hoʻokahi. Me nā faila SCSS, hiki nō hoʻi ke hoʻohana i nā ʻano like ʻole, e maʻalahi ke hoʻopilikino a hana i nā ʻano hoʻoikaika.

I ka pōkole, he mea pono nā faila SCSS i ka hoʻomohala pūnaewele. Hāʻawi lākou i nā hoʻomaikaʻi a me nā hiʻohiʻona hou e maʻalahi ai ka hoʻonohonoho, hoʻohana hou, a mālama i ka code CSS. Me ka hiki ke hoʻohana i nā ʻano like ʻole a me nā mixins, ʻae nā faila SCSS iā ʻoe e hana i nā ʻano maʻemaʻe a me ka ikaika. Inā he mea hoʻomohala pūnaewele ʻoe, mai hoʻokaʻulua ʻoe e ʻimi a hoʻohana i kēia ʻenehana i kāu papahana e hiki mai ana.

2. He aha ka faila SCSS a pehea ka ʻokoʻa mai nā ʻano palapala ʻano ʻē aʻe?

ʻO kahi faila SCSS kahi ʻano pepa ʻano Hoʻohana ʻia kēlā i ka hoʻolālā pūnaewele e maʻalahi i ke kākau ʻana a me ka hoʻonohonoho ʻana i ka code CSS. ʻO ka hoʻonui ʻia ʻana o ka faila SCSS ʻo ia ka "Sassy CSS" a he ala maikaʻi a ʻoi aku ka ikaika o ke kākau ʻana i nā ʻano pepa i hoʻohālikelike ʻia i ke ʻano CSS kuʻuna.

ʻO ka ʻokoʻa nui ma waena o SCSS a me CSS ʻo ia ke kākoʻo nei ʻo SCSS i nā hiʻohiʻona ʻaʻole i loaʻa i ka CSS maoli, e like me nā mea hoʻololi, rule nesting, mixins, a me ka hoʻoilina. ʻAe kēia i nā mea hoʻomohala e kākau a mālama i ka code CSS ma kahi ala ʻoi aku ka maikaʻi a me ke ʻano. Eia hou, hiki ke hoʻohui ʻia nā faila SCSS i nā faila CSS maʻamau i hiki ke unuhi a hōʻike pololei ʻia e ka polokalamu kele pūnaewele.

ʻO kekahi o nā hiʻohiʻona maikaʻi loa o ka SCSS ka hoʻohana ʻana i nā mea hoʻololi. Hiki iā ʻoe ke wehewehe i nā waiwai hoʻohana hou i hiki ke hoʻohana ʻia i loko o ka faila SCSS. No ka laʻana, inā hoʻohana ʻia ka waihoʻoluʻu like ma nā wahi he nui, hiki iā ʻoe ke wehewehe i ke ʻano he hoʻololi a laila hoʻohana i kēlā ʻano hoʻololi ma mua o ka paʻi pinepine ʻana i ka waiwai kala. He mea maʻalahi kēia i ka hoʻololi a mālama ʻana i ke code, no ka mea pono ʻoe e hoʻololi i ka waiwai o ka mea hoʻololi ma kahi hoʻokahi e hoʻohana ʻia i loko o ka faila.

ʻO kahi mea maikaʻi ʻē aʻe o SCSS ʻo ia ka nesting o nā lula, kahi e hiki ai i ke code ke hoʻonohonoho ʻia me ka maopopo a me ka pōkole. No ka laʻana, inā makemake ʻoe e hoʻopili i kahi ʻano kikoʻī i kahi mea i loko o kahi mea ʻē aʻe. Ma kahi o ke kākau ʻana i nā mea koho ʻokoʻa, hiki iā ʻoe ke hoʻomoe i kekahi i loko o kekahi ma ka faila SCSS. Hoʻonui kēia i ka heluhelu ʻana o ke code a maʻalahi ka hahai a hoʻomaopopo. I ka pōkole, hāʻawi nā faila SCSS i ka maʻalahi a me ka maikaʻi i ke kākau ʻana i nā ʻano pepa i hoʻohālikelike ʻia me nā faila CSS kuʻuna. [HOPE

3. Pono nā mea hana e wehe i kahi faila SCSS

No ka wehe ʻana i kahi faila SCSS, pono ʻoe e loaʻa nā mea hana kūpono e hiki ai iā ʻoe ke hoʻoponopono a nānā i ka ʻike o kēia ʻano faila. Aia ma lalo kekahi mau koho e kōkua paha:

1. Lunahooponopono: ʻO kekahi o nā koi nui e wehe a hoʻololi i kahi faila SCSS ʻo ia ka loaʻa ʻana o kahi hoʻoponopono kikokikona. ʻO kekahi mau koho kaulana ʻo Sublime Text, ʻO Visual Studio Code, Atom a i ʻole Brackets. Hāʻawi kēia mau mea hoʻoponopono i nā hana kikoʻī no ka hana ʻana me nā faila SCSS, e like me ka syntax highlighting, autocompletion, a me ke komo wikiwiki i nā kauoha a me nā hana.

2. SCSS Compiler: ʻAʻole hiki ke unuhi pololei ʻia ka faila SCSS e ka polokalamu kele pūnaewele, no laila pono e hoʻohui ʻia i CSS ma mua o ka hiki ke hōʻike pololei ʻia. Aia nā mea hana like ʻole a me nā hale waihona puke e ʻae iā ʻoe e hōʻuluʻulu i nā faila SCSS, e like me Sass, Less a i ʻole Stylus. Hoʻololi kēia mau mea hana i ka code SCSS i ka code CSS kūpono e hiki ke unuhi ʻia e ka polokalamu kele pūnaewele.

3. Pūnaewele pūnaewele a me nā mea hana hoʻomohala: I ka manawa i hoʻohui ʻia ai ka faila SCSS i CSS, hiki ke wehe ʻia a nānā ʻia ma kahi polokalamu kele pūnaewele. Pono e hoʻohana i nā mea hana hoʻomohala o ka polokalamu kele pūnaewele e nānā a debug i ka code CSS i loaʻa. Hāʻawi kēia mau mea hana iā ʻoe e nānā i nā ʻano i hoʻopili ʻia, hana i nā hoʻololi i ka manawa maoli a ʻike i nā hewa a i ʻole nā ​​paio i loko o ka pepa style.

E hoʻomanaʻo ʻo ka wehe ʻana i kahi faila SCSS pono kahi hoʻoponopono kikokikona kūpono, kahi mea hoʻopili SCSS, a me kahi polokalamu kele pūnaewele. ʻO kēia mau mea hana e hiki ai iāʻoe ke hana maikaʻi me nā faila SCSS, hoʻoponopono i kā lākou ʻike a nānā i nā hopena ma ka polokalamu kele pūnaewele. [HOPE

4. Kaʻanuʻu ma ka ʻanuʻu: Pehea e wehe ai i kahi faila SCSS ma kahi hoʻoponopono kikokikona

No ka wehe ʻana i kahi faila SCSS ma kahi hoʻoponopono kikokikona, e hahai i kēia mau ʻanuʻu maʻalahi:

1. Hoʻoiho a hoʻokomo i kahi mea hoʻoponopono kikokikona kūpono SCSS: No ka wehe ʻana i kahi faila SCSS, pono ʻoe i kahi hoʻoponopono kikokikona e kākoʻo ana i kēia ʻano. ʻO kekahi mau koho kaulana ʻo Visual Studio Code, Atom, a me Sublime Text. Hiki iā ʻoe ke hoʻoiho a hoʻouka i ka mea hoʻoponopono o kāu koho mai kāna pūnaewele official.

2. E wehe i ka mea hoʻoponopono kikokikona: Ke hoʻokomo ʻia ka mea hoʻoponopono kikokikona, wehe ia ma kāu kamepiula. Hiki iā ʻoe ke loaʻa iā ia ma kāu papa kuhikuhi noi a ʻimi paha iā ia ma ke pākaukau.

3. E wehe i ka faila SCSS: Ke wehe ʻia ka mea hoʻoponopono kikokikona, e hele i ka papa kuhikuhi "File" a koho iā "Open" a i ʻole kaomi wale iā "Ctrl + O" ma kāu kīpē. E wehe ʻia kahi pukaaniani pop-up i hiki iā ʻoe ke hoʻokele i nā waihona ma kāu kamepiula a koho i ka faila SCSS āu e makemake ai e wehe. Kaomi "Open" ke koho ʻoe i ka faila.

4. Mākaukau! I kēia manawa hiki iā ʻoe ke nānā a hoʻoponopono i ka faila SCSS ma ka hoʻoponopono kikokikona. No ka mālama ʻana i kāu mau hoʻololi, e hele wale i ka papa kuhikuhi "File" a koho iā "Save" a i ʻole kaomi "Ctrl + S" ma kāu kīpē. E hoʻomanaʻo he hoʻonui ʻia ka faila SCSS o ka ʻōlelo Sass, no laila inā hoʻololi ʻoe a makemake ʻoe e hōʻuluʻulu iā CSS, pono ʻoe e hoʻohana i kahi mea hoʻopili Sass e hoʻololi iā ia.

Ma ka hahai ʻana i kēia mau ʻanuʻu, hiki iā ʻoe ke wehe a hoʻoponopono i nā faila SCSS i kāu hoʻoponopono kikokikona punahele. E mālama pono i kāu mau hoʻololi a mālama a kope mai ka waihona kumu no ka hihia!

5. ʻO nā mea hoʻoponopono kikokikona kaulana e wehe i nā faila SCSS

Hoʻohana nui ʻia nā faila SCSS i ka hoʻomohala pūnaewele, ʻoi aku ka nui o ka hana me ka CSS preprocessor, Sass. Eia naʻe, hiki ke paʻakikī ka loaʻa ʻana o kahi mea hoʻoponopono kikokikona kūpono e wehe i kēia mau faila a hana i nā hoʻololi. ʻO ka mea pōmaikaʻi, aia kekahi mau koho kaulana i hiki ke hoʻohana ʻia no kēia kumu.

1. ʻO Visual Studio Code: He koho maikaʻi kēia mea hoʻoponopono kikokikona kaulana a wehe ʻia no ka wehe ʻana i nā faila SCSS. Hāʻawi ia i kahi ākea o nā hiʻohiʻona, me ka syntax highlighting no SCSS, nā hōʻailona code, a me kahi ʻōnaehana autocomplete naʻauao. Eia hou, hiki iā ʻoe ke hoʻouka i nā mea hoʻonui hou aku e hoʻomaikaʻi hou i ka hana pili i ka SCSS, e like me Live Sass Compiler a i ʻole Prettier.

2. Māhele 'Ano: ʻO kekahi mea hoʻoponopono kikokikona i mahalo nui ʻia e nā mea hoʻomohala ʻo Sublime Text. ʻOiai ʻaʻole ia he kumu wehe, hāʻawi ia i kahi mana manuahi me ka hana piha. Hāʻawi ʻo Sublime Text i ka syntax highlighting no SCSS a me nā hiʻohiʻona maʻamau, e like me ka hiki ke hoʻokomo i nā pūʻolo hou i mea e maʻalahi ai ka hana ʻana me nā faila SCSS.

3. 'Anom: Ma ke ʻano he koho hou aʻe, ua kaulana ʻo Atom i waena o nā mea hoʻomohala. He kumu hāmama a me ka hoʻoponopono kikokikona hiki ke hoʻoponopono ʻia. Hāʻawi ʻo Atom i ka syntax highlighting no SCSS a kākoʻo i nā hoʻonui nui e hiki ke kōkua iā ʻoe e hana maʻalahi. ala kūpono me nā faila SCSS, e like me Sass Compiler a i ʻole Linter. Hiki iā ʻoe ke hoʻololi maʻalahi i kona helehelena a me nā hoʻonohonoho e kūpono i kāu mau makemake pilikino.

He mea koʻikoʻi ke koho ʻana i kahi mea hoʻoponopono kikokikona kūpono i ka maʻalahi o ka hana ʻana me nā faila SCSS a me ka hōʻoia ʻana i kahi ʻike hoʻolālā maʻalahi. Hāʻawi kēia mau koho kaulana i ʻōlelo ʻia i nā hiʻohiʻona kūpono a me ka hoʻoponopono nui e hoʻokō i nā pono o nā mea hoʻomohala. No laila, hiki iā ʻoe ke koho i kahi koho i kūpono i kāu makemake a hoʻomaka e hana me kāu mau faila SCSS pono.

6. ʻIke i ke ʻano o kahi faila SCSS a pehea e hoʻokele ai

ʻO kahi faila SCSS kahi faila kumu i hoʻohana ʻia i ka hoʻolālā pūnaewele e hoʻopili i nā ʻano i kahi ʻaoʻao. Loaʻa iā ia kahi ʻano kikoʻī i loaʻa i kekahi mau poloka code e wehewehe i nā ʻano like ʻole, mixins, hana a me nā ʻano CSS. No ka hoʻokele ʻana i kahi faila SCSS, pono e hoʻomaopopo i ke ʻano o ka hoʻonohonoho ʻana a me ka pili ʻana o kāna mau ʻāpana like ʻole.

ʻO ka mea mua a mākou e ʻike ai i kahi faila SCSS ʻo ia ka nā hoʻololi. Hāʻawi kēia iā mākou e mālama i nā waiwai i hiki ke hoʻohana ʻia i loko o ka faila, e maʻalahi ka hoʻonohonoho ʻana a mālama i nā ʻano. Ua wehewehe ʻia nā mea hoʻololi me ka hoʻohana ʻana i ka hōʻailona "$" a ukali ʻia e ka inoa hoʻololi a me ka waiwai i hāʻawi ʻia. No ka laʻana, "$color-primary: #ff0000;" wehewehe i kekahi ʻano like ʻole i kapa ʻia ʻo "color-primary" me ka waiwai ʻulaʻula.

A laila, loaʻa iā mākou ka huikau, he mau poloka code hiki ke hoohana hou ia. Hāʻawi nā Mixins iā mākou e wehewehe i nā ʻano hiki ke hoʻopili ʻia i nā mea like ʻole ma ka ʻaoʻao. No ka hana ʻana i kahi mixin, hoʻohana mākou i ka huaʻōlelo "@mixin" a ukali ʻia e ka inoa o ka mixin a me nā ʻano CSS a mākou e makemake ai e noi. No ka hoʻohana ʻana i kahi mixin, hoʻohana mākou i ka huaʻōlelo "@include" a ukali ʻia e ka inoa o ka mixin. No ka laʻana, wehewehe ʻo “@mixin button-styles { … }” i kahi hui i kapa ʻia “button-styles”, a me “@include button-styles;” e hoʻopili i kēlā mixin i kahi pihi.

ʻO ka mea hope loa, ʻike mākou i nā ʻano CSS iā lākou iho. Ua wehewehe ʻia kēia me ka hoʻohana ʻana i nā lula CSS maʻamau, e like me nā mea koho, nā waiwai, a me nā waiwai. Hiki ke hui pū ʻia nā ʻano CSS i kahi faila SCSS pāʻālua code, e kōkua iā mākou e hoʻonohonoho a mālama pono i kā mākou code. Eia kekahi, hiki iā mākou ke hoʻohana nā hana makemakika y pūnana koho i kā mākou kaila, e ʻae iā mākou e hana i ka helu ʻana a hoʻopili i nā ʻano i nā mea keiki i maʻalahi a heluhelu. E ʻike i ke ʻano mai kahi faile ʻO SCSS a pehea e hoʻokele ai he mea nui ia e hana maikaʻi me nā ʻano i ka papahana pūnaewele.

7. Pehea e hōʻuluʻulu ai i kahi faila SCSS i CSS no ka hoʻohana ʻana ma kahi pūnaewele

No ka hōʻuluʻulu ʻana i kahi faila SCSS i CSS no ka hoʻohana ʻana ma kahi pūnaewele, pono mākou e hōʻoia mua iā mākou i hoʻokomo ʻia iā SASS, kahi CSS preprocessor. Hāʻawi ʻo SASS iā mākou e kākau i nā ʻano CSS ʻoi aku ka maikaʻi, me nā hiʻohiʻona e like me nā loli, nesting, a me nā mixins.

Ke hoʻokomo mākou i ka SASS, wehe mākou i kā mākou kikowaena a hoʻokele i ka papa kuhikuhi kahi i loaʻa ai kā mākou faila SCSS. A laila hoʻohana mākou i ke kauoha sass –nānā komo.scss output.css e hōʻuluʻulu i ka faila SCSS i kahi faila CSS. E hana kēia i kahi faila CSS i kapa ʻia ʻo "output.css" e hoʻonui ʻia i kēlā me kēia manawa a mākou e mālama ai i nā loli i ka faila SCSS.

Inā makemake mākou e hoʻopilikino i ka hoʻopuka o ka faila CSS, hiki iā mākou ke hoʻohana i nā koho hou aʻe i ke kauoha kūkulu. No ka laʻana, hiki iā mākou ke hoʻohana i ke koho –ʻano a ukali ʻia e kekahi o kēia mau waiwai: pūnana, hoʻonui ʻia, paʻa a hoʻopaʻa ʻia. ʻO ka mea paʻamau, "nested" ke ʻano, e hōʻike ana i nā ʻano pūnana e like me ka faila SCSS. Hoʻopuka nā ʻano "hoʻonui" a me ka "compact" i kahi faila CSS hiki ke heluhelu ʻia, ʻoiai ʻo "compressed" e hana i kahi faila CSS liʻiliʻi.

Ma waho aʻe o ka hoʻohana ʻana i ka laina kauoha, aia nā mea hana kiʻi e hiki ai iā ʻoe ke hōʻuluʻulu i nā faila SCSS i CSS me ka ʻike maka. Hāʻawi kekahi o kēia mau mea hana i kahi mea hoʻohana e hoʻoponopono i nā koho kūkulu a ʻae iā ʻoe e nānā i nā loli i ka manawa maoli. ʻO nā laʻana o kēia mau mea hana ʻo Koala, Prepros a me CodeKit. Hiki ke hoʻohana pono kēia mau mea hana no ka poʻe ʻoluʻolu ʻole i ka hana ʻana i ka terminal a i ʻole e ʻimi nei i kahi ala wikiwiki e hōʻuluʻulu i nā faila SCSS i CSS.

8. Hoʻoholo i nā pilikia maʻamau i ka wā e wehe ai i kahi faila SCSS

Hoʻohana nui ʻia nā faila SCSS i ka hoʻomohala pūnaewele no ka hoʻohua ʻana i nā pepa ʻano maʻalahi a maʻalahi hoʻi. Eia naʻe, i kekahi manawa hiki mai nā pilikia ke hoʻāʻo e wehe i kahi faila SCSS. Eia kekahi mau hoʻonā no nā pilikia maʻamau āu e hālāwai ai:

1. E nānā i ka hoʻonui waihona: E hōʻoia i ka waihona āu e hoʻāʻo nei e wehe i ka hoʻonui .scss. Inā ʻokoʻa ka hoʻonui, pono ʻoe e hoʻololi i ka faila me ka pololei.

2. E nānā inā loaʻa iā ʻoe kahi mea hoʻopili SCSS i hoʻokomo ʻia: No ka wehe pono ʻana a nānā i kahi faila SCSS, pono ʻoe i kahi SCSS compiler i hoʻokomo ʻia ma kāu ʻōnaehana. Hiki iā ʻoe ke hoʻohana i nā mea hana e like me Sass a i ʻole node-sass e hōʻuluʻulu i kāu mau faila SCSS. E hōʻoia ua hoʻokomo ʻia a hoʻonohonoho pono ʻia ʻoe ma mua o ka hoʻāʻo ʻana e wehe i ka faila.

3. E nānā i ka syntax file: Inā pilikia ʻoe i ka wehe ʻana i kahi faila SCSS, aia paha nā hewa syntax i ka faila. E hōʻoia i ka pani pono ʻia o nā poloka code āpau me nā pale ʻāwili a ʻaʻohe hewa syntax i ka waiwai a me ka waiwai. Inā maopopo ʻole ʻoe i ka syntax pololei, hiki iā ʻoe ke nīnau i nā kumu aʻo pūnaewele a me nā palapala e aʻo hou aku e pili ana i ka syntax SCSS.

E hoʻomanaʻo i ka wā e kū ana i nā pilikia e wehe ana i kahi faila SCSS, he mea nui e noiʻi a hoʻomaopopo i ke kumu kumu o ka pilikia. Hāʻawi nā haʻina i luna iā ʻoe i kumu paʻa no ka hoʻoponopono ʻana i nā pilikia maʻamau i ka wā e wehe ai i kahi faila SCSS, akā hiki iā ʻoe ke ʻimi i nā kumuwaiwai hou aʻe, nā kumu aʻo, a me nā laʻana ma ka pūnaewele e loaʻa ai ka ʻike piha a hoʻoholo i nā pilikia kikoʻī āu e hālāwai ai.

9. Pehea e hoʻohana ai i nā mea hoʻololi, hui pū a me nā hana i kahi faila SCSS wehe

ʻO nā mea hoʻololi, mixins a me nā hana he mau mea koʻikoʻi i ka hoʻolālā faila SCSS. Me kēia mau mea hana, hiki iā ʻoe ke wehewehe i nā waiwai hoʻohana hou, hui pū i nā ʻano like, a hana i nā hana maʻamau e mālama i ka manawa a me ka hoʻoikaika ʻana i kāu code CSS.

No ka hoʻohana ʻana i nā mea hoʻololi i kahi faila SCSS wehe, pono ʻoe e haʻi mua iā lākou me ka hoʻohana ʻana i ka hōʻailona hōʻailona "$". A laila, hāʻawi i kahi waiwai i ka mea hoʻololi me ka hoʻohana ʻana i ka mea hoʻohana ":". No ka laʻana, hiki iā ʻoe ke hana i kahi loli no ke kala nui o kāu pūnaewele penei:

«`scss
$kumu-kala: #FF0000;
«.

Ke wehewehe ʻoe i kahi loli, hiki iā ʻoe ke hoʻohana iā ia ma kāu code SCSS e hoʻopili i ke kala i nā mea like ʻole. He mea maʻalahi kēia i ka mālama ʻana i kāu hoʻolālā a hiki iā ʻoe ke hoʻololi koke i ke kala ma kahi hoʻokahi.

ʻO kekahi mea hana pono ma SCSS he mixins. ʻO kahi mixin he poloka code hiki ke hoʻohana hou ʻia i hiki ke loaʻa nā ʻano CSS. No ka hana ʻana i kahi mixin, e hoʻohana i ka huaʻōlelo `@mixin` a me ka inoa wehewehe a me nā ʻano āu e makemake ai e hoʻopili. A laila, hiki iā ʻoe ke hoʻokomo i kēlā mixin i nā mea koho like ʻole me ka hoʻohana ʻana i ka huaʻōlelo `@include`. ʻo kahi laʻana:

«`scss
@mixin pihi-kaila {
waihoʻoluʻu kāʻei kua: $primary-color;
kala: keʻokeʻo;
hoʻoponopono: 10px 20px;
}

. pihi {
@include pihi-style;
}
«.

ʻO ka hope, ʻae nā hana iā ʻoe e hana i ka loiloi maʻamau a me ka helu ʻana i kāu code SCSS. Hiki iā ʻoe ke hoʻohana i nā hana i kūkulu ʻia e like me `darken()` a i ʻole `lighten()` no ka hoʻoponopono ʻana i nā kala, a i ʻole e hana i kāu mau hana ponoʻī e hana i nā hana kikoʻī. ʻo kahi laʻana:

«`scss
@hana helu-ākea ($ kolamu) {
$ kumu-ākea: 960px;
$ka nui-ākea: 20px * ($ kolamu – 1);
$ kolamu-ākea: ($ kumu-ākea - $ huina-ākea) / $ kolamu;
@hoihoi $ kolamu-ākea;
}

.container {
laula: helu-ākea(3);
}
«.

I ka hōʻuluʻulu ʻana, me ka hoʻohana ʻana i nā mea hoʻololi, mixins a me nā hana i kahi faila SCSS wehe a ala kūpono o ke kākau ʻana a me ka mālama ʻana i ka code CSS. Hāʻawi nā mea hoʻololi iā ʻoe e wehewehe i nā waiwai hoʻohana hou, hui pū i nā ʻano like, a me nā hana e hāʻawi iā ʻoe i ka maʻalahi e hana i nā helu maʻamau. E hoʻohui i kēia mau mea hana i kāu kaʻina hana SCSS a e ʻike ʻoe pehea lākou e maʻalahi ai i kāu kaʻina hana hoʻomohala a hoʻomaikaʻi i ka hoʻonohonoho ʻana a me ka mālama ʻana i kāu code CSS.

10. Ke ʻimi nei i nā mana holomua o nā faila SCSS

Hāʻawi nā faila SCSS (Sassy CSS) i nā mana holomua e hoʻomaikaʻi i ka pono a me ke ʻano o ka code CSS. Ma kēia ʻāpana, e ʻimi mākou i kekahi o kēia mau mea hiki a pehea e hoʻohana ai iā lākou. i kāu mau papahana.

1. Nānā: ʻO kekahi o nā hiʻohiʻona maikaʻi loa o SCSS ʻo ia ka hiki ke hoʻohana i nā mea hoʻololi e mālama i nā waiwai hoʻohana hou. Hiki iā ʻoe ke wehewehe i kahi loli ma ka hāʻawi ʻana i kahi waiwai kikoʻī, e like me $color-primary: #FF0000;. Hiki iā ʻoe ke hoʻohana i kēia hoʻololi ma nā wahi āpau o ka faila SCSS, hiki iā ʻoe ke hoʻololi maʻalahi i kēlā waiwai ma kahi hoʻokahi.

2. Nesting: ʻO kahi hana ikaika ʻē aʻe o SCSS ka nesting o nā mea koho. ʻAe kēia iā ʻoe e kākau i nā code maʻemaʻe a pale i ka hana hou ʻana. No ka laʻana, ma kahi o ke kākau ʻana i ka .navbar .menu-item, hiki iā ʻoe ke hoʻohana i ka nesting a kākau i ka .navbar { .menu-item {};}.

3. Nā huila: ʻO kahi mixin kahi poloka o ke code hiki ke hoʻohui ʻia i nā mea koho ʻē aʻe. Hiki iā ʻoe ke hoʻohana i nā mixins e wehewehe i nā ʻano maʻamau e hana hou i kāu code. No ka laʻana, hiki iā ʻoe ke hana i kahi mixin i nā pihi kaila a laila e hoʻokomo iā ia i nā mea koho pihi like ʻole i kāu papahana. Mālama kēia iā ʻoe i ka manawa a hiki iā ʻoe ke mālama i ka code maʻemaʻe, ʻoi aku ka mālama.

Me kēia mau mana kiʻekiʻe o nā faila SCSS, hiki iā ʻoe ke hoʻomaikaʻi i ka maikaʻi o kāu code CSS, e hōʻemi i ka hana hou ʻana, a mālama i ka code maʻemaʻe, ʻoi aku ka mālama ʻana i kāu mau papahana. E ʻimi a hana i ka hapa nui o nā mea hiki a SCSS e hāʻawi iā ʻoe!

11. Pehea e wehe ai a hana i nā faila SCSS he nui i loko o kahi papahana

ʻO ka wehe ʻana a me ka hana ʻana i nā faila SCSS he nui i kahi papahana hiki ke lilo i mea paʻakikī no nā mea hoʻomohala. Eia nō naʻe, aia kekahi mau ala e hoʻoponopono ai i kēia pilikia a maʻalahi i kāu kaʻina hana. Eia kekahi mau alakaʻi e kōkua iā ʻoe e hana maikaʻi me nā faila SCSS he nui i kāu papahana:

- hoʻonohonoho i kāu mau faila: No ka hoʻomaka ʻana, e hōʻoia i loaʻa iā ʻoe kahi hoʻolālā waihona kūpono i kāu papahana. Hiki iā ʻoe ke loaʻa kahi waihona nui no ka faila SCSS nui a laila he waihona ʻokoʻa no kēlā me kēia ʻāpana a i ʻole ʻāpana kikoʻī o ka papahana. E kōkua kēia iā ʻoe e hoʻonohonoho pono i kāu mau faila a maʻalahi ka loaʻa ʻana a me ka hoʻoponopono ʻana i kēlā me kēia faila.

- E hoʻohana i ka lawe ʻana mai: ʻO Import kahi hiʻohiʻona nui ma SCSS e hiki ai iā ʻoe ke hoʻokaʻawale i kāu code i nā faila he nui a laila hoʻokomo iā lākou i loko o ka faila nui. Hiki iā ʻoe ke hoʻohana i ka ʻōlelo `@import` e hoʻokomo i nā faila SCSS ʻē aʻe i kāu faila nui. E ʻae kēia iā ʻoe e hoʻokaʻawale i kāu code i nā faila liʻiliʻi a ʻoi aku ka modular, e maʻalahi ka heluhelu a mālama ʻana.

- E noʻonoʻo i ka hoʻohana ʻana i nā mea hana: Ma waho aʻe o ka lawe ʻana mai, hiki iā ʻoe ke noʻonoʻo e hoʻohana i nā mea hana hou e hana me nā faila SCSS he nui. No ka laʻana, hiki iā ʻoe ke hoʻohana i kahi preprocessor CSS e like me Sass, kahi e hiki ai iā ʻoe ke kākau i kahi code SCSS hiki ke heluhelu a hoʻonohonoho ʻia. Hiki iā ʻoe ke hoʻohana i nā mea hana e like me Gulp a i ʻole Webpack, e ʻae iā ʻoe e hoʻokaʻawale i nā hana hou, e like me ke kūkulu ʻana i nā faila SCSS.

Me kēia mau ʻōlelo aʻoaʻo i ka noʻonoʻo, hiki iā ʻoe ke wehe a hana i nā faila SCSS he nui i kāu papahana me ka maikaʻi. E hoʻomanaʻo mau i ka mālama ʻana i kahi hoʻonohonoho folder i hoʻonohonoho ʻia, e hoʻohana i ka lawe ʻana mai e hoʻokaʻawale i kāu code, a e noʻonoʻo e hoʻohana i nā mea hana hou e hoʻomaikaʻi ai i kāu kahe hana. Me ke akahele akahele a me kēia mau hana maikaʻi loa, hiki iā ʻoe ke hana maʻalahi i nā papahana paʻakikī ma SCSS.

12. Nā ʻōlelo paipai no ka mālama ʻana i kahi kaʻina hana kūpono i ka wā e wehe ai i nā faila SCSS

Eia kekahi mau mea:

1. Hoʻonohonoho i kāu mau faila: He mea nui ka mālama ʻana i kahi papa kuhikuhi i hoʻonohonoho pono ʻia i ka wā e hana ai me nā faila SCSS. Hiki iā ʻoe ke hana i nā waihona no nā ʻāpana like ʻole, nā ʻano maʻamau a me nā loli. E maʻalahi kēia i ka hoʻokele a loaʻa i nā code kikoʻī inā pono.

2. E hoʻohana i kahi mea hōʻuluʻulu SCSS: No ka wehe a hoʻololi i nā faila SCSS, pono ʻoe i kahi mea hōʻuluʻulu SCSS. ʻO kekahi mau mea hana kaulana ʻo SASS a me LibSass. ʻAe kēia mau mea hōʻuluʻulu iā ʻoe e kākau i nā ʻano ma SCSS, e hōʻuluʻulu ʻokoʻa iā CSS. Mālama kēia iā ʻoe i ka manawa a me ka hoʻoikaika ʻana ma ka pale ʻana i ka kākau lima ʻana i ka code CSS.

3. E aʻo i nā kumu o SCSS: Ma mua o ka hana ʻana me nā faila SCSS, pono e aʻo i nā kumu kumu o SCSS, e like me nā mea koho nested a me nā mea hoʻololi. E kōkua kēia iā ʻoe e kākau i nā ʻano maʻemaʻe a ʻoi aku ka maikaʻi. Hiki iā ʻoe ke loaʻa nā kumu aʻo pūnaewele a me nā laʻana code e aʻo a hoʻomaʻamaʻa i nā hiʻohiʻona kikoʻī o SCSS. E hoʻomanaʻo i ka hoʻohana ʻana i nā mea koho nested a me nā mea hoʻololi hiki ke mālama i kou manawa a me ka hoʻoikaika ʻana i ke kākau ʻana a me ka mālama ʻana i kāu mau ʻano.

Ma ka hahai ʻana i kēia mau ʻōlelo aʻoaʻo, hiki iā ʻoe ke mālama i kahi kahe hana kūpono i ka wā e wehe ai i nā faila SCSS. ʻO ka hoʻonohonoho ʻana i kāu mau faila, me ka hoʻohana ʻana i kahi mea hōʻuluʻulu SCSS, a me ke aʻo ʻana i nā kumu kumu o SCSS e ʻae iā ʻoe e hana wikiwiki a ʻoi aku ka ʻoluʻolu. Mai hoʻokaʻulua e ʻimi hou aku e pili ana i kēia ʻenehana no ka hoʻomaikaʻi hou ʻana i kāu mau mākau hoʻomohala pūnaewele!

13. Nā Manaʻo no ka Debugging a me ka Optimizing Open SCSS Files

Ma kēia ʻatikala, hāʻawi mākou iā ʻoe i kahi alakaʻi i kēlā me kēia ʻanuʻu e kōkua iā ʻoe i ka debug a me ka koho ʻana i nā faila SCSS wehe. E hahai i kēia mau ʻōlelo aʻoaʻo a e loaʻa i kāu mau faila SCSS:

1. E hoʻohana i nā mea hana diagnostic: Ma mua o ka hoʻomaka ʻana i ka debugging a me ka optimization, pono e hōʻoia i ka maikaʻi o kāu mau faila SCSS. Hiki iā ʻoe ke hoʻohana i nā mea hana e like me Sass Lint e ʻike i nā hewa syntax, nā inoa inoa, a me nā pilikia hana. Mālama kēia mau mea hana iā ʻoe i ka manawa a kōkua iā ʻoe e ʻike i nā hewa i hiki i kāu code.

2. E hoʻomaʻamaʻa i kāu code: ʻO kekahi o nā hana maikaʻi loa no ka hoʻomaikaʻi ʻana i kāu mau faila SCSS ʻo ia ka mālama ʻana iā lākou me ka maʻemaʻe a hiki ke heluhelu ʻia. Wehe i nā code pono ʻole, e like me nā kaila i hoʻohana ʻole ʻia a i ʻole nā ​​lula pālua. Hiki iā ʻoe ke hui pū i nā ʻano like me ka hoʻohana ʻana i nā lula nested a i ʻole mixins, e hōʻemi i ka nui o ka faila a hoʻomaikaʻi i ka pono o kāu code.

3. E ho'ēmi i ka nui o ka faila: He mea nui ka ho'ēmiʻana i ka nui o kāu mau faila SCSS no ka hoʻouka wikiwikiʻana i kāu pūnaewele. Hiki iā ʻoe ke hoʻohana i nā mea hana e like me "Sass Compression" no ka hoʻopaʻa ʻana i kāu code SCSS a wehe i nā manaʻo pono ʻole a me nā wahi keʻokeʻo. E hoʻomanaʻo e hana i kēia hana ma mua o ka hoʻoneʻe ʻana i kāu mau faila SCSS i ka hana, no ka mea e paʻakikī ke heluhelu a mālama i ke code i nā pae hoʻomohala.

E hoʻomanaʻo i ka mālama ʻana i ke kahe mau o ka loiloi a me ka loiloi i kāu kaʻina hana hoʻomohala faila SCSS. Na kēia mau ʻōlelo aʻoaʻo e kōkua iā ʻoe e hoʻomaikaʻi i ka hana o kāu code, e hoʻokō i ka pono ʻoi aku ka maikaʻi, a mālama i ka code maʻemaʻe a hiki ke heluhelu ʻia. E hoʻohana i kāu ʻike me SCSS!

14. Nā hopena a me nā hana hou e aʻo ai pehea e wehe ai i nā faila SCSS

I ka pōkole, ʻo ka wehe ʻana i nā faila SCSS hiki ke lilo i hana huikau no ka poʻe ʻike ʻole i kēia ʻano o ka waihona. Eia naʻe, ma ka hahai ʻana i nā ʻanuʻu i ʻōlelo ʻia ma luna nei, hiki ke maʻalahi ke kaʻina hana ma mua o ka mea i ʻike ʻia.

ʻO ka mea mua, he mea nui e hoʻokomo i nā polokalamu hoʻoponopono code e kākoʻo ana i ka syntax SCSS. ʻO kekahi mau koho kaulana ʻo Visual Studio Code, Sublime Text, a me Atom. Hāʻawi kēia mau mea hoʻoponopono code i ka syntax highlighting a me nā hiʻohiʻona pono ʻē aʻe no ka hana ʻana me nā faila SCSS.

Ke kau ʻoe i ka polokalamu hoʻoponopono code, ʻo ka hana aʻe e wehe i ka faila SCSS i ka mea hoʻoponopono. Hiki iā ʻoe ke hana i kēia ma ka hoʻokele ʻana i kahi faila ma kāu kamepiula a me ke kaomi ʻana i ka faila. A laila, koho "Wehe me" a koho i ka hoʻoponopono code āu i kau ai.

Ke hana nei ʻoe me nā faila SCSS, pono e hoʻomanaʻo i kekahi mau hana maikaʻi loa. No ka laʻana, hiki iā ʻoe ke hoʻohana i nā mea hana e like me Sass e hōʻuluʻulu i kāu mau faila SCSS i CSS, e maʻalahi ke ʻike i nā loli ma kāu pūnaewele. Hiki iā ʻoe ke hoʻohana i nā mea hoʻololi a me nā mixins e hoʻohana hou i ka code a hoʻomaʻemaʻe i kāu CSS a hoʻonohonoho ʻia.

I ka hopena, ʻo ka wehe ʻana i nā faila SCSS e koi i kekahi mau ʻanuʻu hou e hoʻohālikelike ʻia me nā faila CSS kuʻuna. Eia naʻe, me ka polokalamu hoʻoponopono code kūpono a me ka hahai ʻana i nā hana hoʻomohala maikaʻi, hiki iā ʻoe ke hana kūpono pono me nā faila SCSS a e hoʻohana i kāna mau pono e pili ana i ka hoʻonohonoho code a me ka hoʻohana hou ʻana.

I ka hopena, ʻo ka wehe ʻana i kahi faila SCSS e like paha me kahi kaʻina paʻakikī i ka wā mua, akā me ka hoʻomaopopo ʻana i nā manaʻo kumu a me ka hoʻohana ʻana i nā mea hana pono, lilo ia i hana maʻalahi a maikaʻi. Ma kēia ʻatikala, ua ʻimi mākou i nā ala like ʻole e wehe ai i kahi faila SCSS, inā e hoʻohana ana i ka mea hoʻoponopono kikokikona, kahi mea hana hoʻomohala hoʻohui, a i ʻole kahi mea hoʻopili kūikawā. Ua kūkākūkā pū mākou i nā pono o ka hana pū me SCSS a pehea e hoʻomaikaʻi ai i ka maikaʻi a me ka maikaʻi o ka hoʻomohala pūnaewele.

He mea nui ia e hoʻomanaʻo i ka wā e wehe ai i kahi faila SCSS, he mea koʻikoʻi ka loaʻa ʻana o kahi kūlana hoʻomohala kūpono a e hōʻoia i loaʻa iā ʻoe nā mea hilinaʻi e pono ai. E hōʻoia kēia i kahi kaʻina hana maʻemaʻe a hewa ʻole.

Eia hou, pono e ʻike i nā mea hou loa i ka ʻōlelo SCSS, no ka mea hiki ke hoʻololi i nā hiʻohiʻona a me nā hana i loaʻa. ʻO ka mālama ʻana i ka lā me nā hana maikaʻi loa a me nā hiʻohiʻona hou he a ala palekana e hoʻonui i kāu kaʻina hana hoʻomohala a hoʻomau i kēia manawa i kēia ao e ulu mau nei.

I ka pōkole, ʻo ka wehe ʻana i kahi faila SCSS he mākaukau waiwai no nā mea hoʻomohala pūnaewele hou. Me ka hoʻomaopopo ʻana i nā kumu kumu, nā mea hana pono, a me ka hoʻomau ʻana i ke aʻo ʻana, e mākaukau ʻoe e lawe pono i nā pono a SCSS e hāʻawi ai i kāu mau papahana. No laila e hele a hoʻomaka e wehe i kēlā mau faila SCSS i kēia lā!