Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS

5/5 - (12 bình chọn)

Quá trình xây dựng một website thì phần thiết kế giao diện cho trang web làm sao cho đẹp làm sao cho bắt mắt và ấn tượng đối với người xem là việc vô cùng quan trọng. Thông thường sau khi xây dựng cấu trúc trang web bằng HTML, chúng ta sử dụng CSS để định dạng cho trang web sinh động hơn. Nhưng khi quy mô của dự án lớn hơn thì việc chúng ta viết CSS cũng trở lên phức tạp và khó bảo trì hơn. Vì vậy, chúng ta cần có công cụ để giúp chúng ta viết cũng như quản lý CSS hiệu quả hơn.

Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về SASS. Mình giả sử rằng các bạn đã thành thạo HTML và CSS trước khi đọc tiếp.

Xem thêm: Hướng dẫn học HTML và CSS

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS feature-image-1

SASS là gì?

Sass là ngôn ngữ định dạng mở rộng của CSS. Đây là một trong những tiền xử lý tiện lợi đối với lập trình viên front-end. Sass cho phép bạn sử dụng các tính năng mà không tồn tại trong CSS như variables, nesting , mixins, inheritance và những tính năng khác, giúp việc viết mã CSS trở nên thú vị hơn.

Cài đặt SASS ra sao?

Trước khi bạn có thể sử dụng Sass bạn cần cài đặt nó trong project của chúng ta. Chúng ta có 2 cách để bắt đầu với Sass:

1.Sử dụng các ứng dụng hỗ trợ.

Chúng ta có rất nhiều phần mềm hỗ trợ giúp bạn biên dịch sass ra css trong vài phút dành cho Mac, Windows, và Linux.

2. Sử dụng giao diện comment line.

Các bạn có thể tham khảo cách cài đặt tại đây.

Variable

Biến trong SASS được biết đến như một cách để lưu trữ thông tin mà bạn muốn tái sử dụng trong toàn bộ file SASS. Bạn có thể lưu trữ mọi thứ như màu sắc, tập hợp font hoặc bất cứ thuộc tính CSS nào mà bạn muốn thừa kế. Sass sử dụng ký tự $tên biến để định nghĩa một biến.

Ví dụ:

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS 1-2

Khi Sass được xử lý, nó lấy biến $font-stack và $primay-color và hiển thị ra CSS mà không có sự xuất hiện của 2 biến trên trong CSS. Đây là một tính năng vô cùng mạnh mẽ khi làm việc với màu sắc chính và sử dụng trong toàn bộ trang.

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS 2-2Nesting

Khi viết HTML bạn có thể thấy sự phân cấp rõ ràng và trực quan. Sass cho phép bạn lồng các bộ chọn CSS giống như hệ thống phân cấp của HTML. Tuy nhiên cái gì quá đều không tốt, nếu quá nhiều các quy tắc lồng nhau sẽ khiến việc quản lý mã sass và việc biên dịch ra CSS trở lên phức tạp hơn rất nhiều lần.

Ví dụ:

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS 3-3Bạn nhận thấy rằng  bộ chọn ul, li và a nằm bên trong bộ chọn nav. Đây là một cách tuyệt vời để tổ chức CSS và khiến chúng dễ hiểu hơn. Sau khi biên dịch chúng ta được như sau:

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS 4-2

Partials

Chúng ta có thể dễ dàng quản lý mã sass bằng việc chia nhỏ ra các file sau đó một file chính gọi các file con. Đây là một tính năng tuyệt vời để quản lý CSS và giúp dễ dàng bảo trì. Môt partial chỉ đơn giản là file tên SASS với dấu gạch dưới. Ví dụ _partial.scss. Dấu gạch dưới cho biết rằng file này là partial file và không được biên dịch ra CSS. Sass partial được sử được cùng với @import directive.

Import

CSS có tùy chọn import cho phép bạn chia nhỏ các file CSS giúp dễ quản lý và bảo trì. Hạn chế duy nhất là mỗi lần bạn dùng @import trong CSS nó tạo ra thêm một HTTP request. Sass cũng hỗ trợ CSS @import  nhưng thay vì yêu cầu HTTP request, Sass sẽ lấy các file bạn muốn import và kết hợp chúng thành một file CSS duy nhất để giảm số lượng HTTP request tới server.

Xem thêm: HTTP request

Ví dụ bạn có 2 file sass, _reset.scss và base.scss. Chúng ta muốn import file _reset.scss vào base.scss.

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS import_sass

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS import_sass2

Ở trên mình dùng @import ‘reset’; vào file base.scss. Khi bạn muốn import một file bạn không cần thêm phần file mở rộng .scss. Khi biên dịch ra CSS chúng ta được như sau:

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS result_import

Mixins

Thật sự sẽ rất tẻ nhạt và nhàm chán khi bạn phải viết lặp đi lặp lại những đoạn CSS giống nhau, đặc biệt là vendor prefixes trong CSS3. Sự xuất hiện của mixins sẽ giúp chúng ta tạo ra một nhóm định nghĩa CSS mà chúng ta muốn tái sử dụng trong toàn bộ trang. Hơn thế nữa chúng ta có thể truyền vào các tham số khiến mixins linh hoạt hơn.

Ứng dụng thông dụng nhất của mixin đó là vendor prefixes. Dưới đây là một ví dụ về border-radius.

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS mixin

Để tạo mixins bạn sử dụng @mixin và đăt tên. Ở đây mình dùng tên mixins là border-radius. Bên cạnh đó cũng sử dụng biến $radius bên trong cặp ngoặc đơn để truyền vào giá trị $radius vào mixin.

Sau khi tạo mixin bạn có thể sử dụng nó như là một định nghĩa CSS bắt đầu bằng @include sau đó là tên mixin. Khi biên dịch chúng ta được mã CSS như sau:

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS result_mixin

Extend/Inheritance

Đây là một tính năng tiện lợi nhất của Sass. Sử dụng @extend cho phép bạn chia sẻ tập hợp thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Nó giúp chúng ta thực hiện tốt quy tắc DRY (Dont’ Reapeat Yourself).

Ví dụ dưới đây tạo ra một chuỗi các thông báo như errors, warnings and successes kế thừa từ class message.

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS inheritĐoạn code phía trên lấy các thuộc tính trong .message và áp dụng chúng cho .success, .error và .warning. Phép màu xảy ra khi biên dịch ra CSS, nó giúp chúng ta tránh khỏi việc viết nhiều tên class vào  các phần tử HTML.

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS result_inherit

Operators

Việc tính toán trong CSS rất hữu ích cho lập trình viên. Sass hỗ trợ các phép toán tiêu chuẩn như + , , * , /%. Trong ví dụ dưới đây chúng ta sẽ thực hiện các phép tính đơn giản để tính chiều rộng của aside và article.

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS operators

Chúng ta vừa tạo ra một fluid grid dựa trên 960px. Operations trong Sass cho phép chúng ta chuyển từ giá trị pixel(px) sang phần trăm (%) một cách dễ dàng. Sau khi biên dịch chúng ta được mã CSS như sau:

Hướng dẫn sử dụng SASS để tiết kiệm thời gian viết CSS result_operation

 

Kết luận:

Như vậy chúng ta đã cùng nhau tìm hiểu về SASS và những tính năng tuyệt vời của nó. Nếu bạn nắm vững những kiến thức ở trên thì bạn đã đạt được level mới trong việc viết CSS rồi đó. Hẹn gặp lại các bạn ở bài tiếp theo. Chúc các bạn thành công!

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Nếu bạn có hàng trăm từ khóa mục tiêu, việc tối ưu hóa mỗi bài viết cho một từ khóa...
    1 giây trước
  2. WordPress là nền tảng CMS được ưa chuộng nhất trên web. Do sự phổ biến và phát triển của WordPress CMS,...
    30 giây trước
  3. Bạn có biết, nội dung bài viết rất quan trọng trong SEO cũng như Kinh doanh online, một bài viết...
    9 giây trước
  4. Việc giải quyết tất cả lỗi và lỗi tiềm ẩn trong mã của bạn có vẻ như là một việc...
    9 giây trước
  5. Khi các bạn đọc trong các thiết kế web của các nhà cung cấp chuyên nghiệp hay các nhà cung...
    1 giây trước
  6. Bạn có biết rằng link nội bộ có ảnh hưởng tương đối lớn trong SEO không? Trong bài viết này,...
    4 giây trước
  7. Công cụ SEO Majestic là gì và cách sử dụng nó như thế nào - Công cụ SEO Majestic là...
    19 giây trước
  8. Có thể bạn đã nghe nói rằng gần đây Google đã cập nhật các nguyên tắc cho các bài hiển thị xếp hạng sao. Nếu...
    18 giây trước
  9. Để kiểm tra tốc độ load của trang và tối ưu trang web một cách hiệu quả, chính xác nhằm...
    9 giây trước
  10. Giảm thời gian phản hồi của máy chủ là mục tiêu chính của các chủ Web và chuyên gia SEO....
    25 giây trước