góc cạnh
Angular Sass [Syntactally Awesome Style Sheets] là một tiện ích mở rộng của CSS cho phép bạn sử dụng các biến, quy tắc lồng nhau, nhập nội tuyến, v.v. Nó cũng hỗ trợ bạn sắp xếp mọi thứ ngăn nắp và cho phép bạn tạo biểu định kiểu nhanh hơn
Sass là bộ tiền xử lý CSS kết hợp các tính năng độc đáo như biến, quy tắc lồng nhau và mixin [đôi khi được gọi là đường cú pháp] vào CSS thông thường. Mục tiêu chính của Sass là làm cho quá trình mã hóa CSS trở nên thoải mái và hiệu quả hơn
Sass tương thích với mọi phiên bản CSS. Các biểu định kiểu mặc định có. tiện ích mở rộng css khi làm việc với Angular CLI. Chúng tôi đang sử dụng Angular CLI 8. Vì vậy, nếu bạn chưa sử dụng nó trước đây, vui lòng nâng cấp phiên bản CLI của bạn. Chúng tôi sẽ sử dụng Bootstrap 4 Framework cho bản demo này và xem cách định cấu hình Sass trong ứng dụng Angular của chúng tôi.
Trước tiên, hãy kiểm tra phiên bản CLI góc của bạn bằng lệnh này
ng --version
Nếu nó không phải là mới nhất, hãy nâng cấp lên phiên bản mới nhất và quay lại đây.
Bước 1. Tạo một dự án góc mới
Nhập nội dung sau để tạo dự án Angular mới
ng new angularsass
Bạn sẽ thấy một số lời nhắc như thế này khi tạo một dự án mới
Angular Sass Example Search
- Login [current]
- Register
Chúng tôi đã sử dụng Thanh điều hướng Bootstrap đơn giản. Nhưng bây giờ chúng ta cần thay đổi một số kiểu của thanh điều hướng
Vì vậy, chúng tôi sẽ viết mã scss để thay đổi các kiểu đó. Lưu tệp và xem thanh điều hướng trên trình duyệt
Hãy để chúng tôi tạo các lớp mới bên trong ứng dụng. thành phần. tệp scss. Chúng tôi sẽ thêm các lớp giả vào thành phần thanh điều hướng
// 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; } }
Ở đây, chúng tôi đã xác định biến màu. Bạn có thể tạo một tệp riêng như _variables. scss, nhưng hiện tại, hãy sử dụng mã này
Nếu một số màu bị lặp lại, chúng ta có thể xác định biến rồi xác định như trên và sử dụng biến đó bất cứ khi nào cần
Bây giờ, hãy thêm các lớp mới bên trong ứng dụng. thành phần. tệp html
Angular Sass Example Search
- Login [current]
- Register
Lưu tệp và bây giờ di chuột vào nút, liên kết bên trong trình duyệt. Bạn có thể thấy rằng màu nâu được áp dụng cho phong cách của chúng tôi. Vì vậy, đó là cách bạn có thể đưa SCSS vào dự án của chúng tôi
Sử dụng Sass trong Angular 13 hoặc Angular 14
Nếu bạn có Angular CLI dưới phiên bản 7, bạn phải tạo một dự án Angular mới như thế này
________số 8_______Bây giờ, thêm Bootstrap 4
npm install bootstrap --save // or using yarn yarn add bootstrap
Sau khi cài đặt xong, chúng ta cần thêm tệp chính Bootstrap Sass [i. e. , trong đó tất cả các kiểu như biến, mixins, biểu mẫu, nút, bảng, v.v. , được nhập] vào các kiểu. scss, được tạo tự động khi bạn tạo dự án
ng new angularsass0
Vì vậy, đây là cách bạn sẽ tích hợp Sass trong Angular 5, Angular 6, Angular 7, Angular 8 hoặc Angular 9. Không có nhiều sự khác biệt trong đó