Sass Angular: Cara Menggunakan Sass Dalam Sudut 14 – Codewithaden

Angular dukungan Kelancangan , CSS , dan Lebih sedikit Untuk gaya gaya aplikasi global serta gaya komponen. Selain itu, gaya komponen sudut memiliki mekanisme enkapsulasi CSS yang efektif yang menjamin komponen CSS adalah lokal ke komponen dan tidak secara global mengubah gaya apa pun.

Sass sudut

Angular Kelancangan (Lembar gaya yang luar biasa secara sintaksis) adalah perpanjangan dari CSS yang memungkinkan Anda melakukannya menggunakan Variabel, aturan bersarang, impor inline, dan banyak lagi. Ini juga mendukung Anda dalam menjaga hal -hal tetap terorganisir dan memungkinkan Anda untuk membuat lembar gaya lebih cepat.

Kelancangan adalah preprocessor CSS yang menggabungkan fitur unik seperti variabel, aturan bersarang, dan mixin (kadang -kadang disebut sebagai gula sintaksis) menjadi CSS biasa. Objek utama Sass adalah membuat proses pengkodean CSS lebih nyaman dan efisien.

Kelancangan kompatibel dengan semua versi CSS. Stylesheet styles default memiliki .css ekstensi saat bekerja dengan cli sudut. Kami menggunakan Angular CLI 8. Jadi, jika Anda belum pernah menggunakannya sebelumnya, silakan tingkatkan Versi CLI . Kami akan menggunakan kerangka Bootstrap 4 untuk demo ini dan melihat cara mengkonfigurasi sass di aplikasi sudut kami.

Pertama, periksa versi CLI Angular Anda dengan perintah ini.

ng --version 

Jika bukan yang terbaru, tingkatkan ke versi terbaru, dan kembali ke sini.

Langkah 1: Buat proyek sudut baru

Ketik yang berikut untuk membuat proyek sudut baru.

ng new angularsass 

Anda akan melihat beberapa petunjuk seperti ini saat membuat proyek baru.

Sass

Kita dapat melihat bahwa kita telah bertanya apakah kita ingin menggunakan gaya sass untuk proyek kita. Saya telah memilih perutean sudut untuk tidak dan memilih sass untuk gaya.

Sekarang gaya proyek kami diubah menjadi sass. Anda dapat melihat file di dalam SRC folder yang kami miliki styles.scss file, dan di dalam aplikasi folder, kami punya app.component.scss mengajukan.

Selanjutnya, kita perlu menyertakan Bootstrap 4 dalam proyek kami.

Langkah 2: Instal Perpustakaan Bootstrap-Sass.

Instal Bootstrap-Sass Library, yang merupakan versi Sass dari Bootstrap.

npm install bootstrap --save 

Langkah selanjutnya adalah mengimpor file itu di dalam SRC >> styles.scss mengajukan. Jadi mari kita lakukan itu.

/* You can add global styles to this file, and also import other style files */

@import "../node_modules/bootstrap/scss/bootstrap.scss"; 

Jadi, di sini kami telah memasukkan Bootstrap.scss File untuk proyek kami, simpan file dan mulai server pengembangan sudut.

ng serve 

Anda dapat melihat bahwa kami telah berhasil mengintegrasikan Perpustakaan Bootstrap Sass ke dalam proyek kami. Sekarang, kami dapat menambahkan lebih banyak file SCSS ke dalamnya, mengkompilasinya ke CSS, dan menggunakannya dalam proyek kami.

Langkah 3: Tambahkan gaya SCSS baru.

Pertama, mari kita membuat navbar di dalam proyek kami.

Jadi tulis kode berikut di dalam app.component.html mengajukan.

 

Kami telah menggunakan navbar bootstrap sederhana. Tapi sekarang kita perlu mengubah beberapa gaya Navbar.

Jadi kami akan menulis kode SCSS untuk mengubah gaya tersebut. Simpan file dan lihat navbar di browser.

Mari kita membuat kelas baru di dalam app.component.scss mengajukan. Kami akan menambahkan kelas semu ke komponen Navbar.

// app.component.scss

$backColor: brown;

.search-button {
    border-color: skyblue;
    color: blue;

    &:hover, &:after, &:focus {
        background-color: transparent;
        color: $backColor;
    }
}
.brand-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor;
    }
}

.login-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor !important;
    }
}

.register-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor !important;
    }
} 

Di sini, kami telah menentukan variabel warna. Anda dapat membuat file terpisah seperti _variables.scss file, tetapi untuk saat ini, tetap dengan kode ini.

Jika beberapa warna diulang, kita dapat menentukan variabel dan kemudian menentukan yang di atas dan menggunakan variabel itu kapan pun diperlukan.

Sekarang, tambahkan kelas baru di dalam app.component.html mengajukan.

 

Simpan file, dan sekarang arahkan tombol, tautan di dalam browser. Anda dapat melihat bahwa warna coklat diterapkan pada gaya kami. Jadi itulah cara Anda dapat memasukkan SCSS dalam proyek kami.

Gunakan sass dalam sudut 13 atau sudut 14

Jika Anda memiliki Angular CLI di bawah versi 7, Anda harus membuat proyek sudut baru seperti ini.

ng new angularsass --style=scss 

Sekarang, tambahkan bootstrap 4

npm install bootstrap --save

// or using yarn

yarn add bootstrap
 

Setelah menginstalnya, kita perlu menambahkan file utama Bootstrap Sass (mis., Di mana semua gaya seperti variabel , Mixin , formulir , tombol , tabel , dll., diimpor) ke styles.scss file, yang secara otomatis dihasilkan saat Anda membuat proyek.

// styles.scss

@import "../node_modules/bootstrap/scss/bootstrap.scss"; 

Jadi ini adalah bagaimana Anda akan mengintegrasikan sass Angular 5 , Angular 6 , Angular 7 , Angular 8 , atau Angular 9 . Tidak ada banyak perbedaan di dalamnya.

Itu untuk tutorial Sass Angular. Terima kasih telah mengambilnya.

Pos terkait

Formcontrol Angular

Modul sudut

Angular ngclass

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *