Home / Web Design / 9. Kutengeneza SASS Task na Kutest

9. Kutengeneza SASS Task na Kutest

Katika video iliopita tulitengeneza Gruntfile pamoja na Watch task, sasa tunatakiwa tengeneza sass task ambayo itachukua mafile yote ya .scss na kutengeneza file moja la .css.

Kabla hatujaandika chochote hapa ngoja tuangalia hili folder la sass, na tukiangalia hili file la style.scss utagundua ndilo file lina tambulisha theme yetu kwa hizi comment zake hapa juu. Hapa chini inafuata licence information kisha table of contents. Hapa chini tuna mistari mingi ikianza na @import na hii inaita mafolder na mafile tofauti ya sass ambayo ya style sehemu ya website tuu kama header au footer na hili file la style.scss inayaunganisha yote hapa. Mafile haya yanayotengeneza style ya sehemu ya website tunayaita partials.

Sasa turudi kwenye Gruntfile na kulifanya lifanye kazi, nitaanza kwa kuduplicate huu mstari wa kuload watch task, na nitabadili task kuwa sass. Hapa juu ya watch task ndiko nitakaandika sass task, kama kawaida nitaandika comment ambazo zinaeleza kuhusu task yetu, nitaandika SASS Task.

Kisha nianza andika jina la task:

sass:{

},

Ndani ya sass nitatengeneza task mbili, moja litaitwa dev na jingine dist, na kwenye dev task tutatengeneza expanded output ambayo ni human readable. Kwenye dist file tutatengeneza compressed file ambalo ni kwa ajili ya computer tuu.

Hivyo nitaanza na dev task

dev: {

}

Hapa ndani tunatakiwa set vitu viwili, options na files, nitaanza na options

options: {

},

Option yetu ya kwanza ni style, ni style ya namna ambavyo file litatokea expanded au compressed:

style: ‘expanded’
sourcemap: ‘none’

Source map itatuonyesha wapi kila component imetokea, kwenye project hii hatuna haja fuatilia hilo ndio maana tumeweka kuwa none.

Hatua nyingine ni files task, hii inaset wapi file linatokea kable halijawa processed na wapi litapelekwa baada ya kuwa processed.

files: {

}

Na tutaweka mafile haya in reverse order kwa kuanza na wapi tutaweka file baada ya kuliprocess,

'style-human.css': 'sass/style.scss'

Nikimaliza nitarudia hatua hizi tengeneza dist task na kufanya marekebisho machache kwenye options, style nitaweka compressed na jina la file baada ya kuwa processed nitaandika style.css.

Tumefikia hatua nzuri sana sana sana, sasa nitaanza fanya back up ya file la style.css kwa kulibadili jina. Kisha nitaenda kwenye command prompt na kuandika grunt, kama unaona haya maandishi Running watch task na chini pale waiting basi Grunt inafanya kazi vizuri kabisa.

Nitarudi kwenye sublime na nitajaribu fanya mabadiliko kidogo kwenye mafile ya .scss kisha nitasave na kurudi kwenye command prompt kuona nini kimetokea. Hapa unaweza ona watch task imeona kuna changes ndani ya file la fields na ikaita task nyingine inaitwa sass. Nikirudi tena kwenye sublime utaona file la style.css and style-human.css yametengenezwa.

Ungana nami kipindi kijacho na tutaanza style theme yetu kwa kuanza na header.

About Yesaya R. Athuman

Colleagues know me as a highly Creative Software Developer who can always be trusted to come up with the new approach. But I know that client's business come first, and I never try to impose my ideas on others. Instead, I spend a lot of time understanding business and the audience before suggesting ideas. I can (and often do) work well alone, but I'm at my best collaborating with others.

Check Also

Take Your CSS Experience to the Next Level with SASS

Take Your CSS Experience to the Next Level with SASS

Beginners or those who have taken a break from web design for a few years …