Asas SASS

Articles

Asas SASS

Artikel ini menerangkan asas-asas SASS.

Kami akan menerangkan ciri-ciri asas SASS langkah demi langkah dan menunjukkan cara menggunakannya dengan kod contoh yang praktikal.

YouTube Video

Asas SASS

SASS (Syntactically Awesome Stylesheets) ialah bahasa stylesheet yang memperluaskan CSS. Dengan menggunakan SASS, anda boleh memanfaatkan ciri-ciri lanjutan yang tidak tersedia dalam CSS, seperti pembolehubah, penetasan, campuran (mixins), dan pewarisan (inheritance). Ini memudahkan pengurusan dan penggunaan semula helaian gaya.

Apakah itu SASS?

SASS ialah bahasa yang memudahkan penulisan CSS serta membolehkan penggayaan yang lebih fleksibel dan berkuasa. SASS juga menawarkan sintaks SCSS (Sassy CSS) yang hampir sama dengan sintaks CSS standard. Berikut adalah contohnya:.

Contoh SCSS

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

Contoh CSS

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

Penyediaan SASS

Cara Memasang

Untuk menggunakan SASS, pasang Node.js terlebih dahulu dan kemudian pasang SASS menggunakan arahan berikut:.

1npm install -g sass

Cara Menyusun

Untuk menyusun fail SASS (.scss atau .sass) ke dalam CSS, gunakan arahan berikut:.

1sass input.scss output.css

Anda juga boleh menggunakan pilihan watch untuk memantau perubahan fail dan melakukan kompilasi secara masa nyata.

Pembolehubah

SASS membolehkan anda menggunakan pembolehubah untuk menggunakan semula nilai seperti warna dan saiz fon.

Contoh Kod

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

Kod ini menggunakan pembolehubah SASS untuk menetapkan warna dan fon, serta menggunakannya semula dalam penyeleksi body untuk meningkatkan konsistensi dan kemudahan penyelenggaraan.

Hasil Kompilasi

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

Penyarangan

SASS meningkatkan keterbacaan kod dengan membenarkan pemilih CSS disarangkan.

Contoh Kod

 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}

Kod ini menggunakan hierarki bertingkat untuk memperjelas struktur gaya secara visual.

Hasil Kompilasi

 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

Mixins membolehkan anda menggunakan semula kod merentasi beberapa pemilih.

Contoh Kod

 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}

Kod ini menetapkan gaya border-radius menggunakan @mixin dan menggunakannya semula dalam button dan .card dengan @include, membolehkan penggayaan yang cekap tanpa penduaan.

Hasil Kompilasi

 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}

Pewarisan (@extend)

Pewarisan membolehkan anda menggunakan gaya sedia ada pada pemilih lain.

Contoh Kod

 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}

Kod ini menetapkan penyeleksi placeholder %button-style dan menggunakan @extend untuk menerapkan gaya yang sama kepada kedua-dua button dan .link-button, menggalakkan penggunaan semula dan konsistensi.

Hasil Kompilasi

 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}

Kenyataan Bersyarat dan Gelung

SASS menyokong kenyataan bersyarat dan gelung untuk menjana gaya secara dinamik.

Contoh Kenyataan Bersyarat

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

Kod ini menggunakan fungsi if daripada SASS untuk menukar warna latar belakang dan teks berdasarkan nilai $theme, membolehkan penjanaan gaya secara dinamik melalui syarat.

Contoh Gelung

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

Kod ini menggunakan gelung @for SASS untuk menjana kelas secara dinamik daripada .column-1 hingga .column-3.

Hasil Kompilasi

 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}

Pembahagian dan Pengimportan Fail

SASS membolehkan anda membahagikan fail dan menggunakannya semula dengan @use atau @import.

Struktur Fail

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}

Hasil Kompilasi

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Ringkasan

Penggunaan SASS melancarkan penulisan CSS dan meningkatkan kebolehgunaan semula serta penyelenggaraan kod.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.