He aha ke ʻano o ka Cascading Style Pepa (CSS)?
E heluhelu ma lalo no ka wehewehe piha ʻana i ke ʻano o ka hana ʻana o nā style sheets cascading. Hōʻike mākou i kā mākou mau polokalamu ma ka piko o ka ʻaoʻao i maʻalahi ke ʻimi a hoʻohana. Inā ʻoe e heluhelu nei i kēia ʻatikala ma o ka leka uila a i ʻole ka hānai, kaomi ma o kaomi i kāu CSS.
Inā ʻaʻole ʻoe e hoʻomohala nei i nā pūnaewele, ʻaʻole paha ʻoe e hoʻomaopopo piha i nā pepa kāʻei cascading (CSS). ʻO CSS kahi ʻōlelo stylesheet i hoʻohana ʻia e wehewehe i ke ʻano a me ke ʻano o kahi palapala i kākau ʻia HTML or 'ōkuene. Hiki ke hoʻohana ʻia ka CSS e kuhikuhi i nā ʻano no nā mea like ʻole e like me ka font, kala, spacing, a me ka hoʻolālā. Hāʻawi ka CSS iā ʻoe e hoʻokaʻawale i ka hōʻike ʻana o kāu palapala HTML mai kāna ʻike, e maʻalahi ka mālama ʻana a me ka hoʻonui ʻana i ke ʻano hiʻohiʻona o kāu pūnaewele.
Hoʻolālā ʻōlelo CSS
ka mea koho ʻo ia ka mea HTML āu e makemake ai e kāhiko, a me ka waiwai a waiwai e wehewehe i nā ʻano āu e makemake ai e hoʻopili i kēlā mea:
selector {
property: value;
}No ka laʻana, e hana nā CSS a pau <h1> ʻulaʻula nā ʻeleʻele ma ka ʻaoʻao a me ka nui o 32px:
CSS
h1 {
color: red;
font-size: 32px;
}ia auoiaea
poʻomanaʻo, 'o
Hiki iā ʻoe ke kuhikuhi i ka CSS no kahi ID kū hoʻokahi ma kahi mea:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}ia auoiaea
A i ʻole e hoʻopili i kahi papa ma nā mea he nui:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}ia auoiaea
makemake wau Kahiāuli Ho'ā he huaʻōlelo ma ka hōʻailona span.
Hiki iā ʻoe ke hoʻokomo iā CSS i kāu palapala HTML ma ʻekolu mau ala:
- Inline CSS, me ka hoʻohana ʻana i ka
styleʻano ma kahi mea HTML - CSS kūloko, me ka hoʻohana ʻana i kahi
<style>mea i loko o ka<head>o kāu palapala HTML - CSS waho, me ka hoʻohana ʻana i kahi faila .css ʻokoʻa i hoʻopili ʻia i kāu palapala HTML me ka hoʻohana ʻana i ka
<link>mea i loko o ka<head>o kāu palapala HTML
CSS pane
He maʻalahi loa ka CSS a hiki ke hoʻohana ʻia e hoʻoponopono i ka hōʻike o nā mea e pili ana i ka hoʻonā pale, no laila hiki iā ʻoe ke loaʻa i ka HTML like akā kūkulu ʻia. responsive i ka hoʻonā o ka mea hana:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS Compression
Hiki iā ʻoe ke ʻike ma ka laʻana ma luna nei aia kahi manaʻo, kahi nīnau media, a me nā ʻano he nui e hoʻohana ana i nā hakahaka a me nā laina laina e hoʻonohonoho i ka ʻike o ka CSS. He hana maikaʻi loa ia e hōʻemi a hoʻopaʻa paha i kāu CSS ma kāu pūnaewele e hōʻemi i ka nui o ka faila a, ma hope iho, ka manawa e noi ai a hāʻawi i kāu hana. ʻAʻole ia he kālā liʻiliʻi… hiki iā ʻoe ke ʻike ma luna o 50% mālama kālā ma kekahi o nā laʻana ma luna.
Nui nā hoʻonohonoho kikowaena e hāʻawi i nā mea hana e hoʻopaʻa maʻalahi iā CSS ma ka lele a hūnā i ka faila liʻiliʻi i ʻole ʻoe e hana me ka lima.
He aha ka SCSS?
CSS Sassy (SCSS) he CSS preprocessor e hoʻohui i nā hana hou a me ka syntax i ka ʻōlelo CSS. Hoʻonui ia i nā mana o CSS ma ka ʻae ʻana i ka hoʻohana ʻana i nā mea hoʻololi, mixins, hana, a me nā hiʻohiʻona ʻē aʻe i loaʻa ʻole i ka CSS maʻamau.
Nā Pono SCSS
- Hoʻomaikaʻi ʻia ka mālama ʻana: Me ka hoʻohana ʻana i nā ʻano like ʻole, hiki iā ʻoe ke mālama i nā waiwai ma kahi hoʻokahi a hoʻohana hou iā lākou i loko o kāu pepa style, e maʻalahi ai ka mālama ʻana a me ka hoʻonui ʻana i kāu mau ʻano.
- ʻOi aku ka maikaʻi o ka hoʻonohonoho ʻana: Me nā mixins, hiki iā ʻoe ke hui a hoʻohana hou i nā pūʻulu o nā ʻano, e hoʻomaʻamaʻa maikaʻi a maʻalahi hoʻi ka heluhelu ʻana.
- Hoʻonui ʻia ka hana: Loaʻa i ka SCSS nā hiʻohiʻona he nui ʻaʻole i loaʻa i ka CSS maʻamau, e like me nā hana, nā hale hoʻomalu (e laʻa inā/ē aʻe), a me nā hana helu. Hāʻawi kēia i ke ʻano hoʻoikaika ikaika a hōʻike.
- ʻOi aku ka maikaʻi o ka hana: Hoʻopili ʻia nā faila SCSS i CSS, hiki ke hoʻomaikaʻi i ka hana ma o ka hoʻemi ʻana i ka nui o nā code e pono e paʻi ʻia e ka polokalamu kele pūnaewele.
Nā pōʻino SCSS
- Ke aʻo ʻana: He ʻokoʻa ko SCSS mai ka CSS maʻamau, a pono ʻoe e aʻo i kēia syntax hou ma mua o kou hoʻohana pono ʻana.
- Paʻakikī hou: ʻOiai hiki i ka SCSS ke hoʻonohonoho a maʻalahi i ka mālama ʻana i kāu pepa style, hiki iā ia ke hoʻokomo i ka paʻakikī hou i kāu codebase, ʻoiai inā ʻaʻole ʻoe i kamaʻāina i nā hiʻohiʻona hou a me ka syntax.
- Mea Paahana: No ka hoʻohana ʻana iā SCSS, pono ʻoe i kahi mea hoʻopili e unuhi i kāu code SCSS i CSS. Pono kēia i ka hoʻonohonoho hou a me nā mea hana, hiki ke lilo i mea pale i ke komo ʻana no kekahi mau mea hoʻomohala.
Ma kēia hiʻohiʻona ma lalo nei, hoʻohana ka code SCSS i nā mea hoʻololi e mālama i nā waiwai ($primary-color a $font-size) hiki ke hoʻohana hou ʻia i loko o ka pepa style. ʻO ke code CSS i hoʻokumu ʻia mai kēia code SCSS he like ia, akā ʻaʻole ia e hoʻokomo i nā mea hoʻololi. Akā, hoʻohana pololei ʻia nā waiwai o nā mea hoʻololi i ka CSS.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}ʻO kekahi hiʻohiʻona o SCSS i hōʻike ʻia ma kēia hiʻohiʻona ʻo nā ʻano pūnana. Ma ke code SCSS, ka h1 kaila i pūnana i loko o ka body nā styles, ʻaʻole hiki i ka CSS maʻamau. Ke hōʻuluʻulu ʻia ka code SCSS, hoʻonui ʻia nā ʻano pūnana i nā ʻano ʻokoʻa i ka code CSS.
Ma keʻano holoʻokoʻa, hāʻawi ʻo SCSS i nā pono he nui ma mua o CSS maʻamau, akā he mea nui e noʻonoʻo i nā kālepa-offs a koho i ka hāmeʻa kūpono no kāu papahana e pili ana i kāu mau pono a me nā kaohi.
