Sass là gì? Sử dụng Sass để viết CSS như thế nào?

Sass là gì? Đó là câu hỏi mà chúng tôi sẽ giải đáp trong bài viết này. Nếu bạn là người mới làm quen với thiết kế web, chắc chắn bạn đã nghe thấy thuật ngữ này ở đâu đó, nhưng bạn không hiểu chính xác Sass là gì, nó có tác dụng gì và liệu bạn có nên sử dụng nó hay không.

Giới thiệu

Trong quá trình xây dựng giao diện website bằng CSS, các nhà phát triển web có thể gặp rất nhiều mã giống nhau cần sử dụng nhiều lần, hoặc một số mã màu cần sử dụng nhiều lần nhưng khó nhớ. Khi đó, bạn chắc chắn sẽ cần một công cụ có thể giải quyết các vấn đề trên để giúp việc viết CSS trở nên dễ dàng và nhanh chóng hơn. Một trong những công cụ phổ biến nhất là Sass.

Sass là một bộ tiền xử lý CSS bổ sung các tính năng đặc biệt như biến, quy tắc lồng nhau và mixin vào CSS thông thường. Mục đích là làm cho quá trình viết CSS trở nên đơn giản và hiệu quả hơn.

Để hiểu cụ thể hơn chúng ta cùng tìm hiểu chi tiết nhé.

Bộ tiền xử lý CSS

Bộ tiền xử lý CSS là một ngôn ngữ mở rộng CSS bằng cách cho phép các nhà phát triển viết mã bằng một ngôn ngữ và sau đó dịch nó thành CSS. Ngoài Sass, trên thị trường còn có một vài bộ tiền xử lý khác như Less hoặc Stylus.

Sass là gì?


Sass (Biểu định kiểu tuyệt vời theo cú pháp) là một phần mở rộng CSS cho phép bạn sử dụng các công cụ như biến, quy tắc lồng nhau, nhập nội tuyến và nhiều hơn nữa. Nó cũng giúp bạn quản lý mã CSS của mình tốt hơn và tạo các biểu định kiểu nhanh hơn.

Mình nghĩ bạn cần xem =>  Hệ thống mạng là gì? Có những loại mạng máy tính nào?

Sass tương thích với tất cả các phiên bản CSS. Yêu cầu duy nhất khi sử dụng Sass là bạn phải cài đặt Ruby.

Lợi ích của việc sử dụng Sass

– Viết CSS nhanh hơn, tiết kiệm thời gian làm việc

– Cung cấp nhiều công cụ mạnh mẽ như biến, nhập nội tuyến, quy tắc lồng nhau, …

– Dễ dàng quản lý mã CSS một cách khoa học

– Hoàn toàn tương thích với tất cả các phiên bản CSS

– Sắp xếp hồ sơ khoa học, thuận tiện cho việc bảo trì, sửa chữa.

– Sử dụng Sass

Sass có thể được sử dụng theo ba cách: như một công cụ dòng lệnh, như một mô-đun Ruby độc lập và như một plugin cho các khung công tác Rack, bao gồm cả Ruby on Rails và Merb.

Cài đặt

Để cài đặt Sass, hãy chạy lệnh sau:

gem cài đặt sass

Để chạy Sass từ dòng lệnh, hãy sử dụng:

sass input.scss output.css

Để theo dõi các File Sass và thực hiện cập nhật CSS mỗi khi File Sass thay đổi:

sass –watch input.scss: output.css

Tiếp theo, chúng ta sẽ tìm hiểu một vài mẹo cơ bản để sử dụng Sass một cách hiệu quả. Để bạn hiểu, tất cả đều có ví dụ thực tế.

Cú pháp (cú pháp)

Sass có 2 tùy chọn cú pháp:

SCSS (Sassy CSS): sử dụng phần mở rộng File .scss Hoàn toàn tương thích với cú pháp trong CSS.

Thụt lề (thường được gọi là ‘Sass’): sử dụng phần mở rộng File .sass và thụt lề thay vì dấu ngoặc nhọn {}; Tuy không tương thích hoàn toàn với CSS nhưng ưu điểm của loại cú pháp này là có thể viết rất nhanh => Tiết kiệm thời gian viết.

Chúng ta có thể chuyển đổi giữa hai cú pháp bằng lệnh chuyển đổi sass.

Mình nghĩ bạn cần xem =>  Thực hư chuyện công cụ miễn phí python anaconda đem lại thu nhập hàng trăm ngàn USD/ năm cho các data scientist

Biến

Giống như nhiều ngôn ngữ khác, Sass cho phép bạn sử dụng các biến để lưu trữ thông tin và sử dụng lại chúng trong quá trình làm việc với các biểu định kiểu.

Ví dụ: bạn có thể lưu mã màu trong một biến ở đầu File, sau đó sử dụng lại biến đó để gán màu cho các phần tử khác.

Điều này có nghĩa là bạn có thể nhanh chóng thay đổi màu của nhiều phần tử cùng một lúc mà không cần phải chỉnh sửa từng dòng mã.

Ví dụ khi bạn viết trong Sass:

$ font-stack: Helvetica, sans-serif;

$ màu chính: # 333;

thân hình { nét chữ: 100% $ font-stack;

màu sắc: $ màu chính; }

Các dòng CSS sau sẽ được tạo:

thân hình {

nét chữ: 100% Helvetica, sans-serif;

màu sắc: # 333;

}

Làm tổ

Làm tổ là một con dao hai lưỡi. Mặc dù nó cung cấp một cách tuyệt vời để giảm thiểu số lượng mã cần thiết để viết, nó cũng có thể dẫn đến CSS quá chất lượng nếu người dùng thiếu kinh nghiệm và sử dụng không cẩn thận.

Ý tưởng lồng ghép là lồng các lựa chọn CSS của bạn theo cách bắt chước hệ thống phân cấp HTML.

Để hiểu thêm về Nesting, hãy xem xét ví dụ sau.

Đây là một kiểu điều hướng sử dụng lồng nhau. Kết quả sẽ là CSS sau:

Như đã đề cập, lồng ghép là con dao hai lưỡi và nhiều nhà phát triển web không thích lồng ghép. Họ thà không sử dụng tính năng này còn hơn phải đối mặt với những rủi ro mà việc lồng vào các File CSS. Bạn có thể tham khảo bài viết này để hiểu rõ tác hại của việc nuôi yến không hiệu quả.

Các phần

Phần là các File Sass nhỏ hơn có thể được nhập vào các File Sass khác. Để dễ hiểu, các phần tử giống như các đoạn mã. Với những đoạn mã này, CSS của bạn có thể ở dạng mô-đun giúp quản lý và bảo trì dễ dàng hơn. Mỗi phần được chỉ định bằng cách đặt tên nó với một dấu gạch dưới: _partial.scss.

Mình nghĩ bạn cần xem =>  Hướng dẫn chi tiết 24 bước cài đặt SQL Server 2012

Nhập khẩu

Comeinand @import cho phép bạn nhập các File phân đoạn vào File hiện tại để tạo một File CSS duy nhất. Lưu ý rằng bạn sử dụng càng nhiều lần nhập, thì càng nhiều yêu cầu HTTP được tạo ra.

Theo Rapidsharefiles tổng hợp

>> Có thể bạn quan tâm: 7 đơn vị CSS có thể bạn chưa biết

✤ Top 20 bài viết Tổng Hợp mới nhất :

Xem thêm nhiều Tổng Hợp mới hay

Leave A Reply

Your email address will not be published.