sass là gì ? hướng dẫn sử dụng sass cơ bản

SASS là gì ? Hướng dẫn sử dụng SASS cơ bản9 phút đọc

Một lập trình viên giỏi không chỉ tạo ra những sản phẩm tuyệt vời từ những dòng code khô khan mà còn có thể rút ngắn thời gian thao tác tối đa tạo ra giá trị lớn cho cá nhân và doanh nghiệp.Đồng thời code khi viết ra phải dễ hiểu cho tất cả mọi người và dễ bảo trì sửa chữa trong thời gian ngắn nhất.

Tương tự với một lập trình viên website sẽ thường xuyên phải làm việc với CSS và để có thể trở thành chuyên gia CSS thì bạn chắc chắn không thể bỏ qua SASS.Bài viết hôm nay sẽ giải thích SASS là gì ? và cách sử dụng SASS cơ bản cho người mới bắt đầu.

SASS là gì ?

SASS là ngôn ngữ được tạo ra để phục vụ việc viết CSS hiệu quả cho lập trình viên.Những lợi ích to lớn mà SASS mang lại khi ta sử dụng SASS đó là :

  • Thao tác viết code trở nên nhanh hơn nhiều lần
  • Lượng code phải viết bằng tay sẽ giảm đi đáng kể
  • Code trông gọn gàng dễ nhìn dễ hiểu hơn rất nhiều
  • Dễ dàng thao tác và bảo trì code

Phần lớn những công ty làm web hiện nay thay vì viết CSS thuần thông thường thì đã đưa vào sử dụng SASS vì những tính năng tuyệt vời mà nó mang lại.

Bạn chỉ nên học sử dụng SASS cơ bản và nâng cao sau khi đã thành thạo CSS thôi nhé.Vì SASS bản chất của nó chỉ là ngôn ngữ hỗ trợ viết CSS mà thôi.

Nếu bạn không đạt một trình độ viết CSS nhất định thì khi sang học SASS sẽ không hiểu cốt lõi của một số vấn đề, từ đó sinh ra chán nản và dễ bỏ cuộc giữa chừng.

Chuẩn bị trước khi sử dụng SASS cơ bản

Như các bạn đã biết thì một file CSS có phần mở rộng là .css phải không nào.Một file SASS hơi khác một chút là nó có phần mở rộng là .sass hoặc .scss.

Sự khác biệt lớn hơn là bạn có thể dẫn một file CSS vào file HTML và chạy bình thường nhưng SASS thì không như vậy.Mà bạn phải biên dịch một file SASS thành một file CSS để sử dụng.

Để biên dịch từ SASS thành CSS thì có khá nhiều cách và một trong những cách đơn giản nhất đó là sử dụng phần mềm biên dịch ví dụ như : Preprops hay Koala.

SCSS và SASS

SASS có hai cách viết đó là SCSSSASS.Hai cách viết này có tác dụng hoàn toàn giống nhau nhưng chỉ khác nhau ở cú pháp mà thôi.

Để dễ hình dung thì mình sẽ lấy một ví dụ đơn giản cho các bạn.

CSS

Trên đây là một đoạn CSS thông thường mà bạn viết hàng ngày.

SCSS

Còn đây là đoạn CSS trên khi được viết bằng SCSS.Bạn có thể thấy nó có cấu trúc phân tầng và khó hiểu hơn cách viết thông thường.

SASS

Đoạn CSS trên khi được viết bằng SASS thì trông nó sẽ như thế này.Cấu trúc phần tầng hoàn toàn giống với SCSS nhưng tất cả các dấu ngoặc nhọn đã được lược bỏ.

Bạn có thể thấy rằng cách viết SCSS khá giống với CSS nhưng SASS thì hơi lạ vì đã bị lược bỏ đi dấu ngoặc nhọn.Điều này vô tình gây ra nhầm lẫn khó hiểu trong việc đọc viết code vì không biết giới hạn vùng đang thao tác.

Có thể code viết bằng SASS sẽ trông ngắn gọn dễ nhìn hơn nhưng để quen với nó và hiểu code viết bằng cách này rất khó nên phần lớn lập trình viên trên thế giới đều không sử dụng cách viết SASS mà sẽ dùng cách viết SCSS.

Và trong tất cả bài viết về SASS trên blog này mình đều hướng dẫn dựa trên cách viết SCSS nhé.

Sử dụng SASS cơ bản

Một trong những quy tắc sử dụng SASS cơ bản nhất đó là quy tắc viết lồng nhau.Cách viết này giúp cho code dễ nhìn hơn và lượng code phải viết bằng tay sẽ giảm đi rất nhiều.

Với những bạn lần đầu làm quen với SASS có lẽ sẽ hơi khó chịu với cách viết lồng nhau này nhưng khi đã quen rồi thì mình đảm bảo bạn sẽ không bao giờ muốn quay trở về cách viết CSS thông thường nữa.

Cách tốt nhất để nhanh chóng thành thạo cách viết SASS lồng nhau này là bạn tự code lại một dự án nào đó bằng cách sử dụng nó.

Dưới đây mình sẽ giới thiệu cho bạn những cách viết lồng nhau thông dụng nhất.

Selector lồng nhau

SCSS

Đây là một đoạn code được viết bằng SCSS sử dụng quy tắc lồng nhau.Do .item nằm trong .container nên nó sẽ được viết trong ngoặc nhọn của .container.

Tương tự như vậy thì .box cũng nằm trong .item nên nó cũng được viết trong ngoặc của .item.Khi biên dịch ra CSS thì nó sẽ phân tích từng lớp để biên dịch sao cho đúng với cấu trúc mà bạn đã viết.

CSS

Sau khi đoạn code được viết bằng SCSS trên biên dịch ra CSS thì trông nó sẽ như thế này.Lượng code viết bằng tay rất ít nhưng khi biên dịch ra thì vẫn đầy đủ.

Property lồng nhau

CSS

Trên đây là một đoạn CSS bao gồm toàn thuộc tính liên quan đến font.Để rút ngắn code và dễ hiểu hơn thì bạn có thể sử dụng cách viết SCSS như dưới đây.

Toàn bộ thuộc tính này đều liên quan đến font và bắt đầu khai báo bằng chữ font nên nó sẽ được rút gọn lại bằng cách lấy chữ cái chung là font ở đầu rồi bọc các phần tên khác cùng thuộc tính kèm theo trong ngoặc nhọn.

Còn có rất nhiều thuộc tính CSS khác nữa mà bạn có thể áp dụng cách viết này ví dụ như thuộc tính background hay border, animation…chẳng hạn.

Tham chiếu đến selector cha mẹ

SCSS không có &

Kết quả biên dịch ra CSS sẽ là :

Nếu không có dấu & thì bạn thấy giữa .container.row sẽ có một khoảng trắng.

SCSS có &

Kết quả biên dịch ra CSS sẽ là :

Còn khi có dấu & thì giữa hai class sẽ không xuất hiện khoảng trắng nữa.

Từ đó ta có kết luận quan trọng sau :

  • Không có dấu & : Giữa yếu tố mẹ và yếu tố con sẽ có một khoảng trắng được tạo ra khi biên dịch thành CSS
  • Có dấu & : Giữa yếu tố mẹ và yếu tố con sẽ không xuất hiện khoảng trắng như thông thường nữa.

Viết nối tiếp tên

Khi bạn làm quen với những quy chuẩn đặt tên CSS như BEM thì việc viết tên class sẽ rất dài dòng.Để tiết kiệm thời gian thì SASS hỗ trợ bạn viết nối tiếp tên bằng cách sử dụng dấu &.

SCSS

Như bạn thấy thì ở ví dụ SCSS trên mình có sử dụng tới ba dấu & để minh họa.Dấu & này có chức năng gán tên yếu tố mẹ vào đầu tên của yếu tố con để thể hiện sự liên quan giữa chúng.

CSS

Sau khi biên dịch đoạn code SCSS trên thành CSS ta có kết quả như sau.

Bạn thấy rằng mình không hề phải viết lại tên yếu tố mẹ đi đầu nhưng khi biên dịch ra thì nó vẫn xuất hiện đầy đủ.

Việc sử dụng cách viết lồng nhau này quả thực rất tiện lợi và dễ hiểu nhưng bạn cần chú ý là không nên tạo ra quá nhiều lớp lồng nhau.

Việc tạo ra nhiều lớp lồng nhau sẽ tạo ra tác dụng ngược khi khó phân tích code hơn đồng thời lượng code biên dịch ra CSS sẽ dài hơn rất khó nhìn.

Kết luận

Kiến thức sử dụng SASS cơ bản nhất đã được mình tóm gọn trong một bài viết này.Với bài viết này hi vọng bạn sẽ lý giải được SASS là gì ? Tại sao nên sử dụng nó ? và hiểu được cách viết SCSS cơ bản.

Tuy nói là kiến thức sử dụng SASS cơ bản nhưng để thành thạo nó thì không phải đơn giản.Bạn cần luyện tập thật nhiều để quen với cách viết SCSS, sau khi thành thạo rồi thì sẽ chuyển lên mức nâng cao hơn như sử dụng biến số, hàm…vv.

Ngay sau bài viết này sẽ là bài viết sử dụng SASS nâng cao.Các bạn hãy theo dõi thường xuyên blog để cập nhật những kiến thức bổ ích liên quan đến lập trình website nhé.

 

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x