Sintaks ng SASS at Sintaks ng SCSS

Ipinaliliwanag ng artikulong ito ang sintaks ng SASS at SCSS.

Ipapaliwanag namin nang detalyado ang mga pagkakaiba ng sintaks ng SASS at SCSS, pati na rin ang pagbibigay ng mga konkretong halimbawa para mas mapalalim ang iyong pang-unawa.

YouTube Video

Sintaks ng SASS at Sintaks ng SCSS

Ang SASS ay isang stylesheet language na idinisenyo upang palawakin ang kakayahan ng CSS. Ang SASS ay may dalawang sintaks. Ito ay ang SASS syntax at ang SCSS syntax.

Pangkalahatang-ideya ng SASS at SCSS

Sintaks ng SASS

Ang sintaks ng SASS ay isinusulat sa ganitong paraan:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Isang sintaks na nakabase sa indentation na hindi gumagamit ng curly braces {} o semicolon ;.
• Dinisenyo ito upang makasulat ng maikli at madaling basahing code.
• Ang file extension ay .sass.

Sintaks ng SCSS

Ang sintaks ng SCSS ay isinusulat sa ganitong paraan:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Isang sintaks na katulad ng CSS, na gumagamit ng curly braces {} at semicolon ;.
• Lubos na compatible sa kasalukuyang code ng CSS, kaya madaling ma-convert nang direkta ang CSS sa SCSS file.
• Ang file extension ay .scss.

Pangunahing mga pagkakaiba sa pagitan ng SASS at SCSS

Pamantayan sa pagpili

Nakasalalay sa pangangailangan ng proyekto at ng grupo kung alin ang gagamitin.

• Kung Kailan Pumili ng SASS na Sintaks

  • Sa SASS na sintaks, maaaring magsulat ng maikli at malinis na code.
  • Kung pamilyar ang buong team sa SASS na sintaks, mainam na gamitin ito.

• Kung Kailan Pumili ng SCSS na Sintaks

  • Kung mahalaga ang pagkakatugma sa CSS at maraming kasapi ang bihasa sa CSS, mas maganda ang SCSS na sintaks.

Mga benepisyo ng SASS at SCSS

Ang mga sumusunod ay mga karaniwang benepisyo ng parehong SASS at SCSS na sintaks:.

1. Paggamit ng Variables

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Sa pamamagitan ng paggamit ng mga variable, maaari kang magtakda ng isang estilo sa isang lugar at magamit ito muli sa iba't ibang bahagi. Maaaring baguhin ang disenyo sa kabuuan sa pamamagitan lamang ng pagbabago ng mga halaga ng variable, kaya't pinapadali ang pagpapanatili.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Pinapahintulutan ka ng mga mixin na pagsamahin ang mga estilo o vendor-prefixed na code na paulit-ulit na ginagamit sa iba't ibang bahagi at magamit ito nang flexible gamit ang mga argumento. Pinapababa nito ang pag-uulit ng code at nagpapabuti ng pagpapanatili.

3. Nested Rules

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Sa pamamagitan ng nesting, maaari kang magsulat ng mga estilo nang sunod-sunod ayon sa estruktura ng HTML, kaya't mas madali ang pagpangkat ng mga magkakaugnay na patakaran. Napapabuti nito ang parehong pagbabasa at pagpapanatili ng code.

4. Inheritance

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Sa pamamagitan ng inheritance, maaari mong pagsamahin at muling gamitin ang mga karaniwang estilo. Pinapababa nito ang pag-uulit ng code at pinananatili ang pagkakapareho ng disenyo.

Konklusyon

Ang pagpili sa pagitan ng SASS at SCSS ay nakasalalay sa kagustuhan ng developer at pangangailangan ng proyekto.

Iniahon ng SASS na sintaks ang pagiging simple, habang ang SCSS na sintaks ay tumutok sa pagkakatugma sa CSS. Parehong makapangyarihan ang dalawang sintaks at makakatulong para mapaunlad ang produktibidad sa CSS.

Ang pagpili ng pinakaangkop na opsyon para sa iyong proyekto ay magreresulta ng mas mahusay na pamamahala ng stylesheet.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video