Tự học Sass CSS trong 10 Phút

Nếu bạn là một lập trình viên Front end, Lập trình viên Web bạn sẽ biết CSS có thể rất thú vị.


Nhưng khi các file CSS của bạn lớn hơn, chúng sẽ khó bảo trì và sắp xếp hơn.


Đó là lúc mà các Bộ tiền xử lý CSS như SASS xuất hiện để giúp bạn tiết kiệm thời gian.


SASS giúp cho các lập trình viên frontend nâng cao các kỹ năng frontend với các tính năng độc đáo.


SASS mở rộng khả năng của CSS.


Hôm nay chúng ta sẽ cùng tìm hiểu, cùng Học SASS như 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:

• SASS là gì?

• CSS Preprocessor là gì?

• Tại sao nên sử dụng CSS Preprocessor?

• SASS vs CSS vs SCSS

• Các tính năng của SASS

• Quy trình xây dựng

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ì, sửa chữa hơn.


Bằng cách mở rộng mã CSS, SASS làm cho các dự án lớ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 lớn có thể bị lặp đi lặp lại.


Mà lặp đi lặp lại mã là không cần thiết, thừa, nặng, gây nhầm lẫn...


Thế nên,


Một bộ tiền xử lý sẽ giải quyết vấn đề này!


Bộ tiền xử lý về 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 năng 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 cấp 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. Đào tạo từ HTML, CSS, JavaScript cho tới 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 vài ưu điểm chính 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 do nesting và variables.

#2. SASS giữ code CSS của bạn "KHÔ" =))

• Bạn sẽ ít mắc lỗi hơn!

• Code có tổ chức hơn và tiết kiệm thời gian hơn.

• Code có hiệu suất 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 cứng nhắc 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 mò sửa từng chỗ.

#3. SASS ổn định hơn CSS

Một bộ tiền xử lý bổ sung một mức độ ổn định nhất định thông qua các tính năng như:

• mixins

• nesting

• inheritance

• và nhiều hơn thế nữa...

... chúng ta sẽ cùng tìm hiểu về chúng 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 code 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 đi các dòng CSS dài dòng.


Làm cho nó dễ đọc và có tổ chức hơn.


Về lâu dài, code CSS có tổ chức tốt sẽ dễ dàng làm việc, chia sẻ và dễ chỉnh sửa hơn.

4. SASS vs CSS vs SCSS

CSS

CSS được sử dụng để thêm kiểu dáng và định dạng cho các trang web.


Các code CSS này được kết hợp với HTML và JavaScript để định nghĩa:

• Phông chữ
• Cỡ chữ
• Màu sắc
• ....

... để tạo ra giao diện thống nhất trên trang web.


Thông thường, một trang web sẽ có các file CSS để mô tả kiểu dáng cho tất 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à "a better CSS".


Nó đem đến các tính năng mới và giúp làm việc dễ 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:

• SASS

• và SCSS

Hãy cùng tìm hiểu về sự khác nhau giữa chúng.

SCSS

SCSS (còn gọi là Sassy CSS) là tiêu chuẩn hiện đại của CSS sử dụng dấu ngoặc { } và dấu chấm phẩy  ;


SCSS đã được giới thiệu trong phiên bản thứ 3 của SASS dưới dạng superset của 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 ta sử dụng SCSS, chúng ta vẫn gọi nó là SASS.

 

SASS

Mặt khác, SASS là một bộ tiền xử lý CSS và có cú pháp cũ hơn sử dụng thụt lề để tổ chức và tách các khối code.


Về cơ bản, nó cung cấp một cách viết CSS súc tích, mở rộng chức năng của CSS.


Các tệp SASS sử dụng phần mở rộng .sass

Nhìn chung, đây là những ưu điểm mà các lập trình viên đưa ra cho cả SCSS và SASS:
 

SASS là...

Súc tích hơn
Dễ đọc hơn
Ít quên  ; hơn (Vì nó không dùng ;)
Cộng đồng hỗ trợ lớn hơn


SCSS là...

Biểu cảm hơn
Module 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ậ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.

 

Variables: Biến trong 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 để bạn có thể sử dụng lại trong suốt file CSS của mình.

 

Ví dụ:
 

Bạn có thể lưu trữ các giá trị 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

trong mã CSS của 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 chỗ bạn khai báo biến.

Nó sẽ tự động update trên toàn trang. Mà bạn không cần
phải sửa đổi từng chỗ như trước.
 

Các biến giúp bạn tiết kiệm hàng tấn thời gian để sửa lại code CSS đó và nó cũng giúp bạn không bỏ sót bất kỳ chỗ nào.


Tính năng biến 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.


Bạn chỉ cần sử dụng ký tự $.


Hãy cùng xem một ví dụ trong đó chúng ta gán một mã màu #ffff00 cho biến $color-primary.



* Để 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à chấm phẩy)


* File của chúng ta sẽ lưu với phần mở rộng là .scss

 

Bây giờ background-color là màu vàng, và khi chúng ta biên dịch code của mình, nó sẽ tạo ra code CSS như sau.

 

 

Nesting: Lồng CSS Selector

SASS thêm cú pháp lồng nhau (nesting), 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 các CSS Selector nhiều lần, do đó, việc thay đổi kiểu của bạn bây giờ rất dễ dàng.


Hãy xem code CSS gốc và so sánh nó với code SASS với cú pháp lồng nhau.

 

Lưu ý!

Cách lồng li và ul 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.

Code CSS gốc:

 

Code SASS:

 

 

Mixin: 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 cứ đâu.


Chúng tương tự như các function trong các ngôn ngữ lập trình khác.

 

Lưu ý!

Mixin khác với Function nên đừng nhầm lẫn.

Để tạo một mixin, 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 @include 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.


Tạo một Mixin trong SASS:

 

Sử dụng Mixin:

 

 

Bạn có thấy Mixin gần giống với biến không?

Thay vì chỉ định nghĩa được một thuộc tính, mixin định nghĩa được một nhóm thuộc tính.

 

Extend / Inheritance: 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 @extend cho phép bạn chia sẻ một tập các thuộc tính CSS Selector này sang selector khác.


Nó giúp cho Sass của bạn DRY.


Trong ví dụ bên dưới...


Chúng ta có tạo một tập thuộc tính để chuẩn bị để có thể mở rộng, bạn chỉ cần sử dụng ký tự % (placeholder classes) và đặt tên cho nó.


Placeholder classes là một loại class đặc biệt chỉ được in 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ẽ.

* Thử sử dụng cú pháp kiểu SASS (Không ngoặc nhọn và không chấm phẩy)

 

Sau khi biên dịch, chúng ta có CSS như sau:

 

Khi sử dụng @extend, tạo CSS, thì trong đó mỗi lớp (.success, .error, .warning) này sẽ nhận được các thuộc tính CSS giống như %message-shared.


Có nghĩa là trong phần tử HTML bạn chỉ cần đặt class là success hoặc error hoặc warrning.


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 CSS Selector đơn giản ngoài các placeholder trong Sass như:

 

Nhưng sử dụng placeholder là cách dễ nhất để quản lý code, nó đảm bảo là bạn không vô tình mở rộng một class đã được lồng ở nơi khác.


Nếu không, nó có thể dẫn đến các selector ngoài ý muốn.


Lưu ý rằng CSS %equal-height không được tạo, bởi vì %equal-height không được mở rộng.

 

Partials và Importing

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 ra một phần tệp 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 _.


Sau đó, nó có thể được import bất cứ lúc nào bằng cách sử dụng lệnh @import





Ví dụ:


Chúng ta có thể tạo một một file riêng cho header có tên _header.scss


Sau đó nó có thể được import lại vào main.scss bằng cách này:

6. Thiết lập Build Processes

Vì SASS có rất nhiều tính năng và công cụ.


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ụ 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 ta được tạo và triển khai như một Web Server.


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 ngắn gọn các bước để phát triển build processes 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: Compiling

Tệp main.scss thực hiện 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 pack.json

Giai đoạn 2: Concatenating

Đây là nơi chúng ta 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à additional.css

Giai đoạn 3: Prefixing

Sử dụng autoprefixer để đảm bảo rằng các tệp của chúng ta hoạt động trên tất cả các trình duyệt chính bằng cách:


Thêm tiền tố của nhà cung cấp vào code của chúng ta.


Điều này có thể được thực hiện thủ công hoặc với một công cụ như Autoprefixer.

Giai đoạn 4: Compressing

Đây là giai đoạn chúng ta nén code 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 code sau đây:

"compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed"

 

Viết một đoạn script để chạy code

Khi các bước này được thực hiện trong package.json


Chúng ta có thể viết một tập lệnh cuối cùng để chạy tất cả code của cùng một lúc.


Chúng ta sử dụng dòng code sau đây:

"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"

Code cuối cùng của chúng ta sẽ thêm tất cả các tác 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:

• compile-sass

• concat-css

• prefix-css

• và compress-css

Sau đó chúng ta có thể sử dụng package 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:

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!


Rất dễ phải không?

Nâng cấp kỹ năng Front end thành công với SASS

Bây giờ bạn có biết về một số tính năng của SASS có thể thay đổi level lập trình front end 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ũng giúp lộ trình học lập trình web của bạn đầy đủ và thú vị hơn.


Qua bài viết này, chúng ta đã tìm hiểu sơ qua 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ề:

• functions

• & operators

• control directive

• placeholders

• interpolation

• ...

Tự học SASS tốt cũng chỉ cần hiểu cách SASS hoạt động, đọc Doc và sau đó nhanh chóng thử vận dụng nó vào dự án của bạn.


Chúc bạn học tập hiệu quả!