Analisis ringkas tentang cara menggunakan gaya SASS dalam projek Angular

Bagaimana untuk menggunakan gaya SASS dalam projek Angular? Artikel berikut akan memperkenalkan kepada anda cara menggunakan gaya SASS dalam Angular saya harap ia akan membantu anda!

Dalam artikel Petua Alat Arahan Tersuai Angular, kami berkata kami akan mempunyai artikel tentang gaya sass dan kini ia ada di sini.

Salah satu daripada tiga pendekar pedang bahagian hadapan, Cascading Style Sheets (CSS), ialah pengilat rangka HTML. Walau bagaimanapun, gaya yang kita tulis secara asli akan mempunyai banyak kod berulang, dan logiknya tidak jelas.

Kemudian, kita boleh menulis dan mengekalkannya melalui bahasa sambungan CSS. Pada masa ini, dua bahasa sambungan CSS paling popular di dunia bahagian hadapan ialah less dan sass. Artikel ini menerangkan sass.

kurang serupa, sass lebih matang

SASS menyediakan dua sintaks penulisan, satu .scss sebagai akhiran, satu lagi .sass ialah akhiran.

• .scss ialah akhiran, dan sintaks diubah suai dengan {}
• .sass ialah akhiran dan sintaks ialah penguncupan
<.>

Adalah disyorkan untuk menggunakan .scss

Penyatuan projek

Projek ini dijana menggunakan perancah. Dalam langkah menambah gaya, anda akan ditanya Cara anda menulis gaya anda, anda boleh memilih: angular

Pilih

dan sahkan, itu sahaja ringkas. SCSS

Gaya penulisan dalam

boleh dibahagikan kepada gaya komponen dan gaya global. [Tutorial berkaitan yang disyorkan: "angulartutorial sudut"]

Gaya komponen

Gaya komponen bermaksud komponen dimiliki sendiri dan komponen lain akan tidak berkuat kuasa, seperti , anda menjana komponen melalui

: ng g compoent demo

- demo.component.ts
- demo.component.html
- demo.component.scss
- deom.component.spec.ts

dengan

ialah helaian gaya komponen ini demo.compoent.scss. deom

Gaya global

Projek yang dijana oleh gaya global kedai perancah dalam fail angular secara lalai. Gaya yang diubah suai dalam fail ini akan mempengaruhi gaya keseluruhan aplikasi. src/style.scss

Tatabahasa Utama Sass

Untuk kerja pembangunan harian, mari perkenalkan kandungan yang lebih penting.

1. Gunakan pembolehubah

Menggunakan pembolehubah membolehkan anda membuat panggilan pada berbilang halaman atau berbilang tempat pada halaman.

// _varible.scss
// **** COLORS ****
$black: #000000;
$white: #ffffff;
$dark-green: #007f7f;
// **** usage ****
$primary-color: $dark-green;

Kami mengurus kaedah pembolehubah dalam fail Apabila kami perlu menggunakannya, kami boleh terus

mengimportnya dan menggunakannya: @import

@import "path/to/varible.scss";

#demo {
  color: $primary-color; // 调用
}

2. . Gunakan bersarang

Apabila menggunakan gaya

, kita perlu menulis gaya untuk elemen yang berbeza Kita perlu mempertimbangkan tahap elemen dan menggunakan pemberat yang berbeza untuk menggayakannya. css

Rangka sekarang adalah seperti berikut:

<div id="demo">
  <div class="inner">
    <span class="prefix">Mr.</span>
  </div>
  <div class="inner">
    <span class="name">Jimmy<span>
  </div>
</div>

Gayanya sekarang seperti berikut:

#demo .inner .prefix {
  color: red;
  font-size: 11px;
}
#demo .inner .name {
  font-size: 14px;
}

Kemudian kita boleh menggunakan tulisan bersarang, yang menjadikan logiknya jelas dan mudah dibaca:

#demo {
  .inner{
    .prefix {
      color: red;
      font-size: 11px;
    }
    .name {
      font-size: 14px;
    }
  }
}

3 Gunakan pengiraan

menyediakan satu siri operator, seperti sass, yang boleh digunakan hanya. seperti menulis 、-、*、/、% operasi pembolehubah Anda juga boleh membawa unit: javascript

width: 100px / 400px * 100%l;

Selain operator asas ini,

juga menyediakan banyak kaedah, seperti fungsi sass: String

dan Sebagai contoh, tukar kaedah ketelusan warna:

to-upper-case('italic'); // ITALIC

#demo {
  background-color: transparentize($black, 0.5)
}

4 Gunakan pengadun mixin

Apabila gaya menulis, kami akan memanggil. kaedah yang sama dalam berbilang kelas sebahagian daripada kandungan gaya. Contohnya:

Kami menggunakan

.demo {
  font-size: 12px;
  color: red;
}
.another_demo {
  font-size: 12px;
  color: blue;
}

untuk menulis semula:

mixin

Gunakan

@mixin common-style {
  font-size: 12px;
}

.demo {
  @include common-style;
  color: red;
}
.another_demo {
  @include common-style;
  color: blue;
}

untuk mengekstrak kod awam supaya kami boleh membuat perubahan di satu tempat dan dalam berbilang tempat. Sudah tentu,

Serve juga mempunyai kesan ini. mixinextend

5. Gunakan pewarisan lanjutan

Sebagai contoh, kita boleh meneruskan gaya kelas sebelumnya:

Rangka dan gaya asal:

<span class="prefix name">Hello, Jimmy.</span>

Selepas menulis semula:

.prefix {
  font-size: 12px;
}
.name {
  color: red;
}

<span class="name">Hello, Jimmy.</span>

Dalam perkembangan harian, menguasai kemahiran di atas sudah cukup untuk anda mengendalikan gaya penulisan dengan mudah~

.prefix {
 font-size: 12px;
}
.name {
  @extend .prefix
  color: red;
}

【 Tamat】

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengajaran Pengaturcaraan

! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan gaya SASS dalam projek Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!