Mga Batayan ng SASS
Ipinaliliwanag ng artikulong ito ang mga batayan ng SASS.
Ipapaliwanag namin ang mga pangunahing tampok ng SASS nang sunud-sunod at ipapakita kung paano ito gamitin gamit ang praktikal na halimbawa ng code.
YouTube Video
Mga Batayan ng SASS
Ang SASS (Syntactically Awesome Stylesheets) ay isang stylesheet language na nagpapalawak ng CSS. Sa paggamit ng SASS, maaari mong magamit ang mga advanced na tampok na hindi available sa CSS gaya ng variables, nesting, mixins, at inheritance. Mas pinadadali nito ang pamamahala at muling paggamit ng mga stylesheet.
Ano ang SASS?
Ang SASS ay isang wika na nagpapadali ng pagsusulat ng CSS habang nagbibigay ng mas flexible at makapangyarihang pag-istilo. Nag-aalok din ang SASS ng SCSS (Sassy CSS) syntax, na katulad ng karaniwang CSS syntax. Narito ang isang halimbawa:.
Halimbawa ng SCSS
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}Halimbawa ng CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}Pag-setup ng SASS
Paano Mag-install
Upang magamit ang SASS, unang i-install ang Node.js at pagkatapos ay i-install ang SASS gamit ang sumusunod na utos:.
1npm install -g sassPaano Mag-compile
Upang i-compile ang mga SASS file (.scss o .sass) patungong CSS, gamitin ang sumusunod na utos:.
1sass input.scss output.cssMaaari mo ring gamitin ang opsyong watch upang subaybayan ang mga pagbabago sa file at mag-compila ng real-time.
Mga Variable
Pinapayagan ka ng SASS na gumamit ng mga variable upang muling magamit ang mga halaga tulad ng mga kulay at laki ng font.
Halimbawang Kodigo
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- Ginagamit ng code na ito ang mga SASS variable upang tukuyin ang mga kulay at font, at muling ginagamit ang mga ito sa loob ng
bodyselector para mapahusay ang konsistensya at kaginhawaan ng pag-maintain.
Kinompayl na Resulta
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}Nesting
Pinapahusay ng SASS ang pagiging madaling basahin ng code sa pamamagitan ng pagpapahintulot sa nesting ng mga CSS selector.
Halimbawang Kodigo
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- Ginagamit ng code na ito ang naka-nest na hierarchy upang mas malinaw na makita ang istruktura ng mga style.
Kinompayl na Resulta
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}Mixins
Pinapayagan ka ng Mixins na muling magamit ang code sa iba't ibang mga selector.
Halimbawang Kodigo
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- Itinakda ng code na ito ang
border-radiusgamit ang@mixinat ginamit itong muli sabuttonat.cardsa pamamagitan ng@include, kaya mas episyente ang pag-istilo nang hindi inuulit-ulit.
Kinompayl na Resulta
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}Inheritance (@extend)
Pinapahintulutan ng inheritance na mailapat mo ang mga umiiral na estilo sa ibang mga selector.
Halimbawang Kodigo
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- Itinakda ng code na ito ang placeholder selector na
%button-styleat ginagamit ang@extendupang mag-apply ng parehong style sabuttonat.link-button, na nagpo-promote ng reuse at konsistensya.
Kinompayl na Resulta
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}Mga Conditionals at Loop
Sinusuportahan ng SASS ang mga conditionals at loop upang dynamic na makabuo ng mga estilo.
Halimbawa ng Conditional Statement
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- Ginagamit ng code na ito ang SASS na
iffunction upang magpalit ng background at kulay ng teksto batay sa halaga ng$theme, kaya posible ang dynamic na paggawa ng style gamit ang mga kondisyon.
Halimbawa ng Loop
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- Ginagamit ng code na ito ang SASS
@forloop upang dynamic na makagawa ng mga klase mula.column-1hanggang.column-3.
Kinompayl na Resulta
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}Pag-hati at Pag-import ng File
Pinapayagan ka ng SASS na hatiin ang mga file at muling magamit ang mga ito gamit ang @use o @import.
Istruktura ng File
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}Kinompayl na Resulta
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}Buod
Ang paggamit ng SASS ay nagpapadali sa pagsusulat ng CSS at nagpapabuti sa reusability at maintainability ng code.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.