Panimula ng Sass

Ito ang dapat mong malaman

Bago magpatuloy, dapat kang may pangkaraniwang kaalaman sa ang mga sumusunod:

• HTML
• CSS

Kung gusto mong mag-aral muna ang mga bagay na ito, mangyaring sumali sa aming Home page Sa pagbisita sa mga tutorial na ito.

Ano ang Sass?

• Ang Sass ay nangangahulugan ng Syntactically Awesome Stylesheet (ang estilo na talahanayan na may napakagandang grammar)
• Ang Sass ay isang pagpapalawak ng CSS
• Ang Sass ay isang preprosesor ng CSS
• Ang Sass ay ganap na katugma sa lahat ng bersyon ng CSS
• Pinabawasan ng Sass ang pagpapatuloy ng CSS, kaya ginagawang mas mababa ang oras
• Ang Sass ay dinisenyo ni Hampton Catlin at binuo ni Natalie Weizenbaum noong 2006
• Maaaring free download at gamitin ang Sass

Bakit gamitin ang Sass?

Ang estilo ng talahanayan ay nagiging mas malaki, mas kompleks, at mas mahirap manatili. Ito ang lugar kung saan maaaring makatulong ang mga preprosesor ng CSS.

Pahintulutan ng Sass na gamitin ang mga katangian na wala sa CSS, tulad ng mga variable, mga patak-patak, mixin, paglilipat, pagpapatuloy, nakalalagay na function at iba pang mga kakayahan.

Isang simpleng halimbawa tungkol sa Sass na napaka-kapaki-pakinabang

Ipinapalagay na may tatlong pangunahing kulay ang aming websayt:

Kung paano itong ilagay ang mga HEX na halaga? Maraming beses. Ano kung nagbabago ang magkakaparehong kulay?

Maaari mong gumamit ng Sass upang isulat ang mga sumusunod na code, sa halip na ilagay nang maraming beses ang itaas na halaga:

Sass Example

/* Tukuyin ang variable para sa orihinal na kulay */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Gamit ang variable */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Kaya, kapag gumagamit ka ng Sass, kung nagbabago ang orihinal na kulay, kailangan mong baguhin ito sa isang lugar lamang.

Paano gumagana ang Sass?

Ang browser ay hindi naiintindihan ang Sass code. Kaya, kailangan mo ng Sass preprocessor upang i-convert ang Sass code sa standard na CSS.

Ang prosesong ito ay tinatawag na transpilation (transpiling). Kaya, kailangan mong magbigay ng Sass code sa transpiler (isang program), at makakuha ka ng CSS code.

Tip:Ang transpilation ay isang termino na ginagamit upang i-convert/translate ang source code na naisulat sa isang wika sa ibang wika.

File Type ng Sass

Ang file extension ng Sass file ay ".scss".

Sass Comment

Sass ay sumusuporta sa standard na CSS comment /* comment */, gayundin ang suportado ang inline comment // comment:

Sass Example

/* Tinukoy ang pangunahing kulay */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Gamit ang variable */
.main-header {
  background-color: $primary_1; // Makakadagdag ka ng komento dito
}