Hôm nay chúng ta sẽ cùng tìm hiểu, cùng Học SASS với tư cách là một người mới bắt đầu để bạn dần quen với công cụ viết CSS thực tế này
Đây là những thứ chúng ta sẽ cùng học về SASS
- Tại sao nên sử dụng CSS Preprocessor?
Trước khi bắt đầu, mình có một gợi ý
1. SASS là gì?
SASS là viết tắt của từ Syntactively Awesome Style Sheets
SASS là ngôn ngữ kịch bản và bộ tiền xử lý CSS, biên dịch mã thành CSS để giúp bạn viết CSS nhanh hơn, dễ dàng hơn, thanh lịch hơn
SASS bổ sung các tính năng và công cụ mới trên CSS cơ bản giúp bạn sắp xếp CSS tối ưu hơn, dễ duy trì, chỉnh sửa tốt hơn
Bằng cách mở rộng mã CSS, SASS làm cho các dự án thân thiện hơn
2. CSS Preprocessor là gì?
SASS là một công cụ được gọi là CSS Preprocessor [Bộ tiền xử lý] được sử dụng để giúp mã CSS dễ bảo trì hơn
Nó thực sự có ý nghĩa như thế nào?
Như bạn đã biết, viết CSS cho dự án có thể được lặp lại
That lap it repeat code is not required, thừa, nặng, gây nhầm lẫn
Thế nên,
Một bộ xử lý tiền sẽ giải quyết vấn đề này
Bộ tiền xử lý cơ bản là một ngôn ngữ kịch bản lấy một loại dữ liệu và chuyển đổi nó thành loại khác
Bộ tiền xử lý CSS mở rộng các tính năng mặc định của CSS bằng cách cho phép bạn viết CSS bằng cú pháp của SASS
Sau đó biên dịch nó thành CSS
3. Tại sao nên sử dụng CSS Preprocessor?
Một bộ tiền xử lý CSS có khả năng tăng hiệu suất rất lớn
Thông thường,
Trong các dự án chuyên nghiệp, người ta không viết CSS
Người ta chỉ viết SASS và biên dịch nó thành CSS
Vì thế,
Sau khi học CSS, bạn phải học SASS nếu muốn làm việc thực tế
Đây cũng là bước nâng cao kỹ năng cần thiết của bất kỳ lập trình viên Front end chuyên nghiệp nào
> Tham khảo ngay KHÓA HỌC FRONT END chuyên nghiệp. Dao create from HTML, CSS, JavaScript for to React
Bộ tiền xử lý CSS này tăng tốc độ sản xuất và giải quyết nhiều hạn chế của CSS
Dưới đây là một số điểm ưu tiên của việc sử dụng bộ tiền xử lý CSS [đại diện là SASS]
#1. SASS giúp tạo mã sạch hơn làm tổ và các biến
Một lợi thế rất lớn của SASS là bạn có thể lồng [lồng] các CSS Selector trong Selector khác
Nó giúp bạn trực quan hóa khi CSS cho các phần tử định dạng cha - con [phân cấp]
Tương tự, với SASS, bạn có thể sử dụng các biến [variables]
Biến cho phép bạn lưu trữ một giá trị và sử dụng lại chúng trong các đoạn cs khác
#2. SASS giữ mã CSS của bạn "KHÔ" =]]
DRY ["Don't Repeat Yourself"] có nghĩa là không lặp lại mã
Vì với SASS cú pháp, bạn có thể sử dụng lại các đoạn mã mà bạn đã viết.
- Mã có tổ chức hơn và tiết kiệm thời gian hơn
- Mã có hiệu lực tốt hơn
#3. SASS linh hoạt hơn
Bộ tiền xử lý CSS sinh ra để giải quyết một số tính năng phần cứng của CSS
Có nhiều thứ bạn có thể làm khi bạn sử dụng bộ tiền xử lý CSS, chẳng hạn như điều kiện hoặc tính toán
Bạn thậm chí có thể sửa đổi màu sắc một cách nhanh chóng trên toàn trang mà không cần chỉnh sửa từng chỗ
#3. SASS ổn định hơn CSS
Một bộ tiền xử lý bổ sung mức ổn định nhất định thông qua các tính năng như
chúng ta sẽ cùng tìm hiểu về chúng ta ngay sau đây
Quan trọng. Sự ổn định từ bộ tiền xử lý giúp dễ dàng xử lý các dự án lớn
#4. SASS tổ chức mã CSS tốt hơn
Các tính năng như biến và hàm giúp bạn có thể giảm bớt các dòng CSS dài
Làm cho nó dễ đọc và có tổ chức hơn
Về lâu dài, mã CSS có tổ chức tốt sẽ dễ dàng thực hiện công việc, chia sẻ và dễ chỉnh sửa hơn
4. SASS so với CSS so với SCSS
CSS được sử dụng để bổ sung kiểu dáng và định dạng cho các trang web
Các mã CSS này được kết hợp với HTML và JavaScript để định nghĩa
- font chữ
- Chữ kích thước
- color color
- ....
to make up the best interface on page web
Thông thường, một trang web sẽ có các tệp CSS để mô tả kiểu dáng cho tất cả các phần tử của trang web
Tuy nhiên, khi có rất nhiều file CSS, nhiều dòng CSS thì
Với CSS cơ bản, bạn sẽ khó làm chủ, dễ phát sinh nhiều sai sót
Đó là lý do tại sao SASS được phát triển như là "một CSS tốt hơn"
Nó đưa đến các tính năng mới và giúp làm việc dễ dàng hơn
SASS có hai dạng cú pháp khác nhau có thể gây nhầm lẫn cho người mới
Hãy cùng tìm hiểu về sự khác nhau giữa chúng ta
SCSS
SCSS [còn được gọi là Sassy CSS] là tiêu chuẩn hiện đại của CSS sử dụng dấu trích dẫn { } và dấu chấm phẩy ;
SCSS has been started in phiên bản thứ 3 của SASS dưới dạng superset CSS
SCSS không mở rộng tiêu chuẩn CSS mà chỉ đơn giản là cú pháp CSS tiến bộ hơn
Trên thực tế, CSS hợp lệ theo cú pháp SCSS, do đó, nó dễ dàng chuyển đổi qua lại giữa cả hai
Các tệp SCSS sử dụng phần mở rộng .scss và khi chúng tôi sử dụng SCSS, chúng tôi vẫn gọi nó là SASS
SASS
Mặt khác, SASS là một bộ xử lý CSS tiền tệ và có cú pháp cũ hơn là sử dụng nhận lề để tổ chức và phân tách các mã khối
Về cơ bản, nó cung cấp một cách viết CSS thú vị, mở rộng chức năng của CSS
File SASS sử dụng phần mở rộng. sass
Nhìn chung, đây là những điểm ưu tiên mà các thành viên lập trình đưa ra cho cả SCSS và SASS
SASS is
Súc tích hơn
Đọc dễ hơn
Ít quên ;
Suc đồng hỗ trợ lớn hơn
SCSS is
Icon cảm hơn
mô-đun hơn
Tích hợp tốt với CSS
5. Các tính năng của SASS
SASS nghe rất tốt phải không?
Vì vậy,
Cụ thể thì SASS giúp bạn như thế nào?
Hãy cùng tìm hiểu về 5 tính năng quan trọng nhất của SASS để bạn nâng cấp code CSS của mình
Biến. Variation in SASS
Các biến cung cấp một cách để lưu trữ thông tin hoặc đóng gói các kiểu gói để bạn có thể sử dụng lại trong suốt tệp CSS của mình
Ví dụ
Bạn có thể lưu trữ các giá trị của color hoặc font-family1
bằng tên, sau đó bạn có thể sử dụng lại bất cứ lúc nào
in CSS code of mình
Nếu bạn cần thay đổi nó thành mã màu khác?
Chỉ cần sửa đổi tại vị trí bạn khai báo biến
Nó sẽ tự động cập nhật trên toàn trang. You don't need
must edit each place as before
Các biến giúp bạn tiết kiệm hàng hóa thời gian để chỉnh sửa lại mã CSS đó và nó cũng giúp bạn không bỏ sót bất kỳ vị trí nào
Biến tính năng trong SASS đặc biệt cần thiết cho các dự án lớn
Định nghĩa một biến là khá đơn giản trong SASS
You only need to use the character
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"0
Hãy cùng xem một ví dụ trong đó chúng ta gán một mã màu
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"1 cho biến
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"2
* quen thuộc, mình vẫn sử dụng cú pháp kiểu SCSS [Có sử dụng dấu ngoặc nhọn và dấu chấm than]
* Tệp của chúng ta sẽ lưu với phần mở rộng là .scss
$color-chính. #ffff00;
màu nền. $color-chính;
Bây giờ
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"4 là màu vàng, và khi chúng ta biên dịch mã của mình, nó sẽ tạo ra mã CSS như sau
làm tổ. CSS Selector trống
SASS thêm cú pháp lồng nhau [làm tổ], cho phép bạn nhắm mục tiêu các phần tử DOM theo cách gọn gàng hơn nhiều
Bạn không còn phải viết lại CSS Selector nhiều lần, làm vậy, việc thay đổi kiểu của bạn bây giờ rất dễ dàng
Vui lòng xem mã CSS gốc và so sánh nó với mã SASS với cú pháp lồng nhau
Lưu ý
Cách lồng
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"5 và
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"6 trong SASS trở nên trực quan, phân cấp giúp việc sử dụng, chỉnh sửa và đọc dễ dàng hơn nhiều
Mã CSS gốc
màu nền. đỏ cam;
Mã SASS
màu nền. đỏ cam;
hỗn hợp. Nhóm CSS
Mixins trong SASS cho phép bạn nhóm nhiều dòng CSS lại với nhau mà bạn có thể sử dụng lại ở bất kỳ đâu.
Chúng tương tự như các
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"7 trong các ngôn ngữ lập trình khác nhau
Lưu ý
Mixin other with Function, don'tầm nhầm
Để tạo một
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"8, bạn chỉ cần định nghĩa mixin của mình
Và sử dụng lại nó bằng cách sử dụng lệnh
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"9 bất cứ nơi nào bạn muốn
Mixin sau đó cũng có thể được cập nhật bất cứ lúc nào
Create a Mixin in SASS
-webkit-biến đổi. xoay [180 độ];
-ms-biến đổi. xoay [180 độ];
biến đổi. xoay [180 độ];
Use Mixin
màu nền. đỏ cam;
Bạn có thấy Mixin gần giống với biến không?
Thay vì định nghĩa chỉ là một thuộc tính, mixin định nghĩa là một nhóm thuộc tính
Mở rộng / Kế thừa. Mở rộng / Kế thừa trong CSS
Đây là một trong những tính năng hữu ích nhất của Sass
Sử dụng
npm install npm-run-all --save-dev0 cho phép bạn chia sẻ một tập tin thuộc tính Bộ chọn CSS này sang bộ chọn khác
Nó giúp cho Sass của bạn DRY
Trong ví dụ bên dưới
Chúng ta đã tạo một tập tin thuộc tính để chuẩn bị cho khả năng mở rộng, bạn chỉ cần sử dụng các ký tự
npm install npm-run-all --save-dev1 [các lớp giữ chỗ] và đặt tên cho nó
Các lớp giữ chỗ là một loại lớp đặc biệt chỉ được sử dụng khi được mở rộng
Nó có thể giúp giữ cho CSS được biên dịch của bạn gọn gàng và sạch sẽ
* Attempt sử dụng cú pháp kiểu SASS [Không trích dẫn và không chấm phẩy]
/* CSS này sẽ được trong vì nó được mở rộng. */
/* CSS này không được trong vì nó không được mở rộng. */
Sau khi biên dịch, chúng ta có CSS như sau
/* CSS này được trong vì %message-shared được mở rộng. */
thông điệp,. sự thành công,. lỗi,. cảnh báo {
Khi sử dụng
npm install npm-run-all --save-dev0, tạo CSS, thì trong đó mỗi lớp [
npm install npm-run-all --save-dev3,
npm install npm-run-all --save-dev4,
npm install npm-run-all --save-dev5] này sẽ nhận được các thuộc tính CSS giống như
npm install npm-run-all --save-dev6
Có nghĩa là trong phần tử HTML bạn chỉ cần đặt lớp là
npm install npm-run-all --save-dev7 hoặc
npm install npm-run-all --save-dev8 hoặc
npm install npm-run-all --save-dev9
Như thế này
Thay vì phải đặt như thế này trong CSS cơ bản
Bạn có thể mở rộng hầu hết các Bộ chọn CSS đơn giản ngoài các trình giữ chỗ trong Sass như
Nhưng sử dụng trình giữ chỗ là cách dễ nhất để quản lý mã, chắc chắn là bạn không vô tình mở rộng một lớp đã được lồng ở nơi khác
Nếu không, nó có thể dẫn đến các bộ chọn ngoài ý muốn
Lưu ý rằng CSS
npm run build-css0 không được tạo, bởi vì
npm run build-css0 không được mở rộng
Partials và Import
SASS partials cho phép chúng ta chia các tệp thành các tệp nhỏ hơn
Về cơ bản chúng ta có thể mô-đun hóa CSS để tạo mã dễ bảo trì hơn
Bạn có thể tạo một tệp phần chỉ chứa mã có liên quan cho mỗi phần
Điều này rất tốt nếu tệp SASS của bạn quá lớn
Tên của một phần bắt đầu bằng một dấu gạch dưới
npm run build-css2
Sau đó, nó có thể được nhập vào bất kỳ lúc nào bằng cách sử dụng lệnh
npm run build-css3
Lưu ý
Lệnh này khác với CSS, vì nó không tạo yêu cầu HTTP
Thay vào đó, nó sẽ nhập và kết hợp các tệp thành một
CSS file which does not image to effect
Ví dụ
Chúng ta có thể tạo một tệp riêng cho tiêu đề có tên
npm run build-css4
Sau đó nó có thể được nhập lại vào
npm run build-css5 bằng cách này
6. Thiết lập quy trình xây dựng
Vì SASS có rất nhiều tính năng và công cụ
Vì vậy, cuối cùng tất cả chúng sẽ hoạt động như thế nào?
Lúc này bạn cần thiết lập Build Processes [Quy trình xây dựng]
Build Processes là một chuỗi các nhiệm vụ được thực hiện tự động sau khi chúng ta chạy dự án
Tất cả các tệp của chúng tôi được tạo và phát triển như một Máy chủ Web
Một quy trình xây dựng có thể thúc đẩy quy trình phát triển của bạn
Khi đó, bạn có thể biên dịch, hợp nhất, thêm tiền tố và nén bằng một lệnh duy nhất
Dưới đây mình sẽ giới thiệu rút gọn các bước để phát triển xây dựng các quy trình giúp bạn làm việc dễ dàng hơn
Dưới đây là các giai đoạn chúng ta cần có
giai đoạn 1. Biên soạn
Tệp
npm run build-css5 thực hiện công việc biên dịch sang CSS
Như chúng ta đã học ở trên, SCSS biên dịch rất dễ dàng sang CSS
Chúng ta thực hiện biên dịch bằng cách sử dụng tệp
npm run build-css7
giai đoạn 2. nối
Đây là nơi chúng tôi hợp nhất tất cả các tệp CSS của chúng tôi thành một
Chúng ta có thể kiểm tra điều này bằng cách sử dụng tệp CSS có tên là
npm run build-css8
giai đoạn 3. tiền tố
Sử dụng autoprefixer để đảm bảo rằng các tệp của chúng hoạt động trên tất cả các trình duyệt chính bằng cách
Add tien tien cua nha cung cap vao code of them ta
Điều này có thể được thực hiện bằng thủ công hoặc với một công cụ như Autoprefixer
Giai đoạn 4. nén
Đây là giai đoạn chúng ta nén mã của mình để tối đa hóa hiệu suất
Chúng ta làm điều này bằng cách sử dụng dòng mã sau đây
"compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
Viết đoạn script để chạy code
Khi các bước này được thực hiện trong
npm run build-css9
Chúng ta có thể viết một tập lệnh cuối cùng để chạy tất cả mã của cùng một lúc
We we use the code lines after here
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"
Code cuối cùng của chúng ta sẽ bổ sung tất cả các nhiệm vụ của chúng ta sẽ được chạy khi chúng ta thực thi lệnh build của mình
Bao gồm
Sau đó, chúng ta có thể sử dụng gói npm-run-all để kiểm tra xem nó có hoạt động trên các nền tảng khác nhau bằng lệnh sau không
npm install npm-run-all --save-dev
Sau đó, bạn có thể xóa các tệp của mình khỏi thư mục CSS và chạy lệnh build
npm run build-css
Bây giờ tất cả các tệp CSS của bạn đã được tạo từ một lệnh duy nhất
It must not easy?
Nâng cấp kỹ năng Front-end thành công với SASS
Bây giờ bạn đã biết về một số tính năng của SASS có thể thay đổi cấp độ thiết lập giao diện người dùng của bạn
SASS làm cho CSS của bạn đơn giản hơn, đáng tin cậy hơn và có tổ chức hơn
Trên hết, học SASS cũng không hề khó khi đã biết CSS
Ngoài ra, Sass còn giúp lộ trình học thiết lập web của bạn đầy đủ và thú vị hơn
Qua bài viết này, chúng tôi đã tìm hiểu sơ lược về các tính năng quan trọng mà SASS cung cấp
Nhưng đó không phải là tất cả về SASS
Bạn nên "Google" và tìm hiểu kỹ hơn về
Tự học SASS cũng chỉ cần hiểu cách SASS hoạt động, đọc Tài liệu và sau đó nhanh chóng thử vận tải nó vào dự án của bạn
Chúc bạn học tập hiệu quả
HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI
Học lập trình chất lượng cao [Từ năm 2002]. Học thực tế + Tuyển dụng ngay
Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT. 02435574074 - 0383. 180086
E-mail. xin chào@niithanoi. giáo dục. vn
trang chủ. https. //Facebook. com/NIIT. CNTT-TT/
#sass #css #niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python