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

dan sahkan, itu sahaja ringkas. SCSS

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

Gaya komponen

: ng g compoent demo

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

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

1. Gunakan pembolehubah

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

mengimportnya dan menggunakannya: @import

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

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

2. . Gunakan bersarang

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

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

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

#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;

juga menyediakan banyak kaedah, seperti fungsi sass: String<🎜. >

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

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

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

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

mixin

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

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

Serve juga mempunyai kesan ini. mixinextend

Sebagai contoh, kita boleh meneruskan gaya kelas sebelumnya:

Rangka dan gaya asal:

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

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

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

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

【 Tamat】

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

! !

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