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

"Sass là cô gái đẹp, phải đến với Sass và nói những lời hay ho.

Học dùng được SASS khiến anh cảm thấy mình cũng rất gì... và này nọ!"

Tự học SASS

Tự học SASS

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.

Bạn đang đọc: Tự học Sass CSS trong 10 Phút

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 thiết kế xây dựng

Trước khi mở màn, mình có một gợi ý :

Nếu bạn đã sẵn sàng và muốn học lập trình web

bài bản bao gồm cả Front end và Back end, hãy tham gia ngay Khóa học PHP Full stack Khóa học Java Full stack

Hay bạn cũng có thể Tự học Java

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?

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

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):Một bộ tiền giải quyết và xử lý CSS có năng lực tăng hiệu suất rất lớn. Thông thường, Trong những dự án Bất Động Sả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 thao tác trong thực tiễn. Đây cũng là bước tăng cấp kỹ năng và kiến thức thiết yếu của bất kể lập trình viên Front end chuyên nghiệp nào. Bộ tiền giải quyết và xử lý CSS này tăng cường sản xuất và xử lý 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 giải quyết và xử lý CSS ( đại diện thay mặt là SASS ) :

#1. SASS giúp tạo mã sạch hơn do nesting và variables.

nesting) 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ử 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 css khác.Một lợi thế rất lớn của SASS là bạn hoàn toàn có thể lồng ( ) cáctrong Selector khác. Nó giúp bạn trực quan hóa khi CSS cho những thành phần dạng cha – con ( phân cấp ) … Tương tự, với SASS, bạn hoàn toàn có thể sử dụng những biến ( ). Biến được cho phép bạn tàng trữ một giá trị và sử dụng lại chúng trong những đoạn css khác .

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

DRY (“Don’t Repeat Yourself”) có nghĩa là đừng lặp lại code.

Vì với cú pháp SASS, bạn có thể sử dụng lại các đoạn code mà bạn đã viết nên:

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

Code có tổ chức triển khai hơn và tiết kiệm chi phí thời hạn 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 giải quyết và xử lý bổ trợ một mức độ không thay đổi nhất định trải qua những 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à khám phá 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-family

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

USD color-primary: # ffff00; / / Yellow

body toàn thân {

background-color: USD color-primary;

}

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.

body toàn thân {

color: # ffff00;

}

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:

. navbar {

background-color: orangered;

padding: 1 rem;

}

. navbar ul {

list-style: none;

}

. navbar li {

text-align: center;

margin: 1 rem;

}

Code SASS:

. navbar {

background-color: orangered;

padding: 1rem;

ul {

list-style: none;

}

li {

text-align: center;

margin: 1rem;

}

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:

@ mixintransform {

– webkit-transform: rotate (180deg);

– ms-transform: rotate (180deg);

transform: rotate (180deg);

}

Sử dụng Mixin:

. navbar {

background-color: orangered;

padding: 1rem;

ul {

list-style: none;

}

li {

text-align: center;

margin: 1rem;

@ includetransform ;

}

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)

/ * CSS này sẽ được in vì nó được extend. * /

% message-shared

border:

Xem thêm: Chủ Đề Javascript Là Ngôn Ngữ Thông Dịch Hay Biên Dịch, Javascript Là Ngôn Ngữ Thông Dịch Hay Biên Dịch

px solid # ccc

padding: 10px

color: # 333

/ * CSS này không được in vì nó không được extend. * /

% equal-heights

display: flex

flex-wrap: wrap

. message

@ extend% message-shared

. success

@ extend% message-shared

border-color: green

. error

@ extend% message-shared

border-color: red

. warning

@ extend% message-shared

border-color: yellow

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

/ * CSS này được in vì % message-shared được extend. * /

. message, . success, . error, . warning {

border: 1 px solid # ccc;

padding: 10 px;

color: # 333;

}

. success {

border-color: green;

}

. error {

border-color: red;

}

. warning {

border-color: yellow;

}

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:

>div>

Thay vì phải đặt như thế này trong CSS cơ bản:

>div>

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ư:

. message-shared

border: 1px solid # ccc

padding: 10px

color: # 333

. success

@ extend. message-shared

border-color: green

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

Lưu ý! Lệnh này khác với CSS, vì nó không tạo HTTP request. Thay vào đó, nó nhập và kết hợp các tệp thành một tệp CSS mà không ảnh hưởng đến hiệu suất.

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:

/ / Trong main.scss

@ import ‘ header ‘;

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

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.Sử dụng autoprefixer để bảo vệ rằng những tệp của tất cả chúng ta hoạt động giải trí trên tổng thể những trình duyệt chính bằng cách : Thêm tiền tố của nhà sản xuất vào code của tất cả chúng ta. Điều này hoàn toàn có thể được thực thi thủ công bằng tay hoặc với một công cụ như

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

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:Sau đó tất cả chúng ta hoàn toàn có thể sử dụng packageđể kiểm tra xem nó có hoạt động giải trí trên những nền tảng khác nhau bằng lệnh sau :