Sass là gì? Tìm hiểu cách sử dụng ngôn ngữ mở rộng CSS này
Các biểu định kiểu tuyệt vời về mặt cú pháp (Sass) là một ngôn ngữ mở rộng CSS phổ biến. Ngôn ngữ này đã tồn tại khoảng 15 năm. Nó hoạt động tốt với mọi phiên bản CSS, làm cho nó tương thích với mọi thư viện và khuôn khổ CSS, từ Bootstrap đến Foundation.
Ngôn ngữ này cho phép bạn viết mã Sass và sau đó biên dịch mã đó thành CSS. Giá trị của việc sử dụng Sass thay vì CSS đơn thuần là nó cung cấp các tính năng bổ sung hiện nằm ngoài phạm vi của CSS.
Trong hướng dẫn này, bạn sẽ học cách sử dụng Sass và các tính năng quan trọng nhất của nó.
Mục Lục
Cài đặt Sass
Có một số cách để sử dụng Sass trên thiết bị của bạn. Chúng bao gồm chạy một ứng dụng (chẳng hạn như LiveReload hoặc Scout-App), tải xuống Sass từ GitHub hoặc cài đặt nó bằng npm.
Cài đặt Sass với npm
Để cài đặt Sass bằng npm, bạn cần cài đặt NodeJS và npm trên thiết bị của mình. Sau đó, bạn sẽ cần tạo một package.json (một thực tiễn tốt khi cài đặt bất kỳ gói npm nào trong các dự án của bạn). Bạn có thể tạo một cơ bản package.json tệp trong thư mục dự án của bạn bằng lệnh đầu cuối sau:
npm init -y
Việc thực thi lệnh này sẽ tạo ra một tệp package.json với nội dung sau:
{
"name": "my_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Các package.json tệp quan trọng vì nó đóng vai trò là cấu hình cho dự án của bạn. Mỗi khi bạn cài đặt một gói npm mới, package.json tệp sẽ phản ánh điều này.
Bây giờ bạn có thể cài đặt Sass bằng cách chèn lệnh sau vào thiết bị đầu cuối của mình:
npm install sass
Lệnh này sẽ cập nhật package.json tệp bằng cách tạo mới trường phụ thuộc, sẽ chứa gói Sass mới. Nó cũng sẽ tạo ra một package-lock.json tập tin và cài đặt sass (cộng với các phụ thuộc) vào một node_modules danh mục.
Các loại tệp Sass khác nhau
Tệp Sass có thể có một trong hai phần mở rộng, .sass hoặc .scss. Sự khác biệt chính giữa chúng là .scss tệp sử dụng dấu ngoặc nhọn và dấu chấm phẩy (giống như CSS), trong khi .sass cấu trúc tệp CSS bằng cách sử dụng thụt lề (giống như Python). Một số nhà phát triển thích sử dụng .scss vì cấu trúc của nó gần với CSS hơn.
Ví dụ về tệp .scss
$primary-color: blue;
body {
color: $primary-color;
p {
color: red;
}
}
Ví dụ về tệp .sass
$primary-color: blue
body
color: $primary-color
p
color: redBiên dịch một tệp Sass sang CSS
Bạn có thể biên dịch một tệp Sass riêng lẻ bằng cách sử dụng hỗn láo chương trình dòng lệnh:
sass file.scss > file.cssBạn cũng có thể chạy sass trên tất cả các tệp trong một thư mục cụ thể:
sass scss:dist/css/Lệnh đó biên dịch tất cả các tệp Sass trong scss thư mục và lưu trữ các tệp kết quả trong dist / css.
Nếu bạn đang sử dụng npm, bạn có thể thiết lập một phím tắt thuận tiện để biên dịch sass bằng cách sử dụng tập lệnh lĩnh vực của bạn package.json tập tin:
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"sass": "sass --watch scss:dist/css/"
},
Cấu hình này sử dụng –đồng hồ đeo tay Lựa chọn. Nó giữ cho sass chạy và đảm bảo nó biên dịch lại các tệp đó bất cứ khi nào chúng thay đổi. Đối với mỗi tệp, sass sẽ tạo ra một .css và một .css.map tập tin.
Để thực thi tập lệnh Sass ở trên, bạn sẽ cần thực hiện lệnh sau trong thiết bị đầu cuối của mình:
npm run sass
Chạy lệnh đó sẽ tạo ra kết quả tương tự như sau:
> my_app@1.0.0 sass C:UserskadeishaDocumentsmy_app
> sass --watch scss:dist/css/
Compiled scssmain.scss to distcssmain.css.
Sass is watching for changes. Press Ctrl-C to stop.
Biến Sass
Bạn có thể tạo các biến trong CSS ngày nay, nhưng 15 năm trước, các biến CSS không tồn tại, vì vậy sự hỗ trợ của Sass dành cho chúng là rất có giá trị. Các biến Sass hoạt động giống như cách mà các biến CSS làm. Chúng lưu trữ các giá trị (chẳng hạn như màu sắc) mà bạn định sử dụng trong toàn bộ tệp CSS. Một trong những lợi ích chính của các biến là chúng cho phép bạn cập nhật nhiều lần xuất hiện của một giá trị bằng cách thay đổi nó chỉ ở một nơi.
Mỗi biến Sass bắt đầu bằng ký hiệu đô la, theo sau là bất kỳ tổ hợp ký tự nào. Cố gắng làm cho các biến của bạn mang tính mô tả, như $ màu chính ví dụ trên. Điều quan trọng cần lưu ý là biến Sass không biên dịch thành các biến CSS. Ví dụ: tệp .scss này:
$primary-color: blue;body {
color: $primary-color;
}
Sẽ biên dịch sang CSS sau:
body {
color: blue;
}
Như bạn có thể thấy từ tệp ở trên, không có biến CSS nào. Ưu điểm của các biến là bất kỳ thay đổi nào được thực hiện đối với tệp Sass sẽ cập nhật tệp CSS tương ứng.
Sass Mixins
Nếu bạn có một thuộc tính mà bạn muốn sử dụng nhiều lần trong suốt dự án của mình, thì một biến là rất tốt. Nhưng nếu bạn có một nhóm thuộc tính mà bạn muốn sử dụng làm đơn vị, thì một mixin sẽ làm được điều đó.
Mọi mixin đều bắt đầu với @mixin từ khóa, theo sau là tên mà bạn muốn gán cho mixin. Bạn có tùy chọn chuyển các biến cho mixin dưới dạng tham số và sử dụng các biến đó trong phần thân của mixin, theo cách giống như một hàm.
Sử dụng Mixin
@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: $primary-color;
color: $secondary-color;
}#home {
@include light-theme(blue);
}
Điều đầu tiên mà bạn có thể nhận thấy trong đoạn mã trên là mixin chấp nhận hai đối số. Bạn có thể gán các giá trị mặc định cho các đối số và ghi đè chúng khi bạn bao gồm nó.
Sau khi bạn đã tạo mixin của mình, bạn có thể sử dụng nó trong bất kỳ phần nào trên trang web của mình bằng cách sử dụng @bao gồm từ khóa theo sau là tên của mixin.
Biên dịch mã Sass ở trên sẽ tạo ra mã CSS sau trong tệp đích của bạn:
#home {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
background-color: blue;
color: #2c2c2c;
}
Chức năng Sass
Ngoài các từ khóa khác nhau, sự khác biệt chính giữa hàm và mixin là một hàm phải trả về một cái gì đó. Bạn có thể sử dụng các hàm Sass để tính toán các giá trị hoặc thực hiện các phép toán.
@function add-numbers($num-one, $num-two){
$sum: 0;
$sum: $num-one + $num-two;
@return $sum
}
Hàm trên chấp nhận hai số và trả về tổng của chúng. Các hàm Sass thậm chí có thể chứa các câu lệnh if, vòng lặp for và các câu lệnh luồng điều khiển khác.
Mô-đun Sass
Nếu bạn phải bao gồm tất cả các biến, mixin và chức năng của mình trong cùng một tệp, bạn sẽ có một tệp Sass lớn khi tạo các ứng dụng lớn. Các mô-đun cung cấp một cách để chia các tệp lớn thành các tệp nhỏ hơn mà sass kết hợp trong quá trình biên dịch. Ví dụ: bạn có thể có một mô-đun chức năng và một mô-đun mixin, tất cả những gì bạn cần nhớ là @sử dụng từ khóa.
Dưới đây là một ví dụ cho thấy cách bạn có thể tách mixin trước đó thành tệp riêng của nó:
Tệp mixins.scss
@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: $primary-color;
color: $secondary-color;
}
Tệp main.scss
@use 'mixins';
#home{
@include mixins.light-theme;
}Để nhập và sử dụng tệp bên ngoài làm mô-đun, bạn sẽ cần sử dụng @sử dụng từ khóa để nhập nó. Sau đó, để sử dụng một mixin cụ thể từ tệp đã nhập, hãy đặt tiền tố tên mixin cụ thể với tên tệp theo sau là dấu chấm. Việc biên dịch các tệp ở trên sẽ tạo ra mã CSS sau:
#home {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
background-color: white;
color: #2c2c2c;
}
Sử dụng Sass để mở rộng và sắp xếp CSS của bạn
Sass là một phần mở rộng của cú pháp CSS. Nó cho phép bạn sắp xếp hợp lý các biểu định kiểu của mình và quản lý chúng hiệu quả hơn. Nhưng bạn vẫn cần phải có lệnh về CSS và các nguyên tắc thiết kế web để tạo ra các thiết kế hiệu quả.
Bài viết này hướng dẫn bạn cách cài đặt và sử dụng Sass. Bạn đã học cách tạo biến Sass, mixin, hàm và mô-đun. Bây giờ tất cả những gì bạn cần làm là tạo một tài liệu HTML và xem mã Sass của bạn trở nên sống động.
Đọc tiếp
Thông tin về các Tác giả
