Trước khi bạn có thể sử dụng Sass, bạn cần thiết lập nó trong dự án của mình. Nếu bạn chỉ muốn duyệt ở đây, hãy tiếp tục, nhưng chúng tôi khuyên bạn nên cài đặt Sass trước. Truy cập vào đây nếu bạn muốn tìm hiểu cách thiết lập mọi thứ
Sơ chế
Bản thân CSS có thể thú vị, nhưng biểu định kiểu ngày càng lớn hơn, phức tạp hơn và khó bảo trì hơn. Đây là lúc một bộ tiền xử lý có thể trợ giúp. Sass có các tính năng chưa có trong CSS như lồng ghép, hỗn hợp, kế thừa và các tính năng tiện lợi khác giúp bạn viết CSS mạnh mẽ, có thể bảo trì
Sau khi bạn bắt đầu mày mò với Sass, nó sẽ lấy tệp Sass đã xử lý trước của bạn và lưu dưới dạng tệp CSS bình thường mà bạn có thể sử dụng trong trang web của mình
Cách trực tiếp nhất để thực hiện điều này là trong thiết bị đầu cuối của bạn. Sau khi cài đặt Sass, bạn có thể biên dịch Sass của mình thành CSS bằng cách sử dụng lệnh
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
2. Bạn sẽ cần cho Sass biết nên xây dựng tệp nào và xuất CSS sang đâu. Ví dụ: chạy $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
3 từ thiết bị đầu cuối của bạn sẽ lấy một tệp Sass duy nhất, $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
4 và biên dịch tệp đó thành $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
5Bạn cũng có thể xem các tệp hoặc thư mục riêng lẻ có gắn cờ
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
6. Cờ theo dõi yêu cầu Sass xem các tệp nguồn của bạn để biết các thay đổi và biên dịch lại CSS mỗi khi bạn lưu Sass của mình. Nếu bạn muốn xem [thay vì tạo thủ công] tệp $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
4 của mình, bạn chỉ cần thêm cờ theo dõi vào lệnh của mình, như vậysass --watch input.scss output.css
Bạn có thể xem và xuất ra các thư mục bằng cách sử dụng đường dẫn thư mục làm đầu vào và đầu ra của mình, đồng thời phân tách chúng bằng dấu hai chấm. Trong ví dụ này
sass --watch app/sass:public/stylesheets
Sass sẽ xem tất cả các tệp trong thư mục
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
8 để biết các thay đổi và biên dịch CSS sang thư mục $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
9💡 Sự thật thú vị
Sass có hai cú pháp. Cú pháp SCSS [
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
0] được sử dụng phổ biến nhất. Đó là một siêu bộ CSS, có nghĩa là tất cả CSS hợp lệ cũng là SCSS hợp lệ. Cú pháp thụt lề [$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
1] khác thường hơn. nó sử dụng dấu thụt đầu dòng thay vì dấu ngoặc nhọn để lồng các câu lệnh và dòng mới thay vì dấu chấm phẩy để phân tách chúng. Tất cả các ví dụ của chúng tôi đều có sẵn ở cả hai cú phápBiến
Hãy nghĩ về các biến như một cách để lưu trữ thông tin mà bạn muốn sử dụng lại trong toàn bộ biểu định kiểu của mình. Bạn có thể lưu trữ những thứ như màu sắc, ngăn xếp phông chữ hoặc bất kỳ giá trị CSS nào mà bạn cho rằng mình sẽ muốn sử dụng lại. Sass sử dụng ký hiệu
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
2 để biến một thứ gì đó thành một biến. Đây là một ví dụSCSS Cú pháp
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Cú pháp Sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
Đầu ra CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Khi Sass được xử lý, nó sẽ nhận các biến mà chúng tôi xác định cho _______10_______3 và
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
4 và xuất ra CSS bình thường với các giá trị biến của chúng tôi được đặt trong CSS. Điều này có thể cực kỳ hiệu quả khi làm việc với màu sắc thương hiệu và giữ cho chúng nhất quán trên toàn bộ trang weblàm tổ
Khi viết HTML, bạn có thể nhận thấy rằng nó có một hệ thống phân cấp hình ảnh và lồng nhau rõ ràng. Mặt khác, CSS không
Sass sẽ cho phép bạn lồng các bộ chọn CSS theo cách tuân theo cùng một hệ thống phân cấp trực quan trong HTML của bạn. Xin lưu ý rằng các quy tắc được lồng ghép quá mức sẽ dẫn đến CSS quá đủ tiêu chuẩn có thể khó duy trì và thường được coi là phương pháp không tốt
Với ý nghĩ đó, đây là ví dụ về một số phong cách điển hình cho điều hướng của một trang web
SCSS Cú pháp
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Cú pháp Sass
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
Đầu ra CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Bạn sẽ nhận thấy rằng các bộ chọn
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
5, $font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
6 và $font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
7 được lồng bên trong bộ chọn $font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
8. Đây là một cách tuyệt vời để tổ chức CSS của bạn và làm cho nó dễ đọc hơnmột phần
Bạn có thể tạo một phần tệp Sass chứa các đoạn CSS nhỏ mà bạn có thể đưa vào các tệp Sass khác. Đây là một cách tuyệt vời để mô-đun hóa CSS của bạn và giúp duy trì mọi thứ dễ dàng hơn. Một phần là tệp Sass được đặt tên với dấu gạch dưới ở đầu. Bạn có thể đặt tên nó là gì đó như
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
9. Dấu gạch dưới cho Sass biết rằng tệp này chỉ là tệp một phần và nó không được tạo thành tệp CSS. Sass partials được sử dụng với quy tắc body {
font: 100% Helvetica, sans-serif;
color: #333;
}
0mô-đun
Hiện chỉ có Dart Sass hỗ trợ
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
0. Thay vào đó, người dùng của các triển khai khác phải sử dụng quy tắc body {
font: 100% Helvetica, sans-serif;
color: #333;
}
2Bạn không cần phải viết tất cả Sass của mình trong một tệp. Bạn có thể chia nhỏ nó theo cách bạn muốn với quy tắc
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
0. Quy tắc này tải một tệp Sass khác dưới dạng một mô-đun, nghĩa là bạn có thể tham chiếu đến các biến, và hàm của nó trong tệp Sass của mình bằng một không gian tên dựa trên tên tệp. Việc sử dụng một tệp cũng sẽ bao gồm CSS mà nó tạo ra trong đầu ra được biên dịch của bạnSCSS Cú pháp
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
Cú pháp Sass
sass --watch app/sass:public/stylesheets
0sass --watch app/sass:public/stylesheets
1Đầu ra CSS
sass --watch app/sass:public/stylesheets
2Lưu ý rằng chúng tôi đang sử dụng
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
4 trong tệp body {
font: 100% Helvetica, sans-serif;
color: #333;
}
5. Khi sử dụng một tệp, bạn không cần thêm phần mở rộng của tệp. Sass rất thông minh và sẽ tìm ra điều đó cho bạnhỗn hợp
Viết một số thứ trong CSS hơi tẻ nhạt, đặc biệt là với CSS3 và có nhiều tiền tố của nhà cung cấp. Mixin cho phép bạn tạo các nhóm khai báo CSS mà bạn muốn sử dụng lại trên toàn bộ trang web của mình. Nó giúp giữ cho Sass của bạn rất KHÔ. Bạn thậm chí có thể chuyển các giá trị để làm cho mixin của bạn linh hoạt hơn. Đây là một ví dụ cho
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
6SCSS Cú pháp
sass --watch app/sass:public/stylesheets
3Cú pháp Sass
sass --watch app/sass:public/stylesheets
4Đầu ra CSS
sass --watch app/sass:public/stylesheets
5Để tạo mixin, bạn sử dụng chỉ thị
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
7 và đặt tên cho nó. Chúng tôi đã đặt tên cho mixin của mình là body {
font: 100% Helvetica, sans-serif;
color: #333;
}
6. Chúng tôi cũng đang sử dụng biến body {
font: 100% Helvetica, sans-serif;
color: #333;
}
9 bên trong dấu ngoặc đơn để chúng tôi có thể chuyển vào một body {
font: 100% Helvetica, sans-serif;
color: #333;
}
6 bất cứ thứ gì chúng tôi muốn. Sau khi bạn tạo mixin của mình, bạn có thể sử dụng nó như một tuyên bố CSS bắt đầu bằng nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
1 theo sau là tên của mixinMở rộng/Kế thừa
Việc sử dụng
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
2 cho phép bạn chia sẻ một tập hợp các thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Trong ví dụ của chúng tôi, chúng tôi sẽ tạo một chuỗi thông báo đơn giản cho các lỗi, cảnh báo và thành công bằng cách sử dụng một tính năng khác đi đôi với các lớp giữ chỗ mở rộng. Lớp trình giữ chỗ là một loại lớp đặc biệt chỉ in khi nó được mở rộng và có thể giúp giữ cho CSS đã biên dịch của bạn gọn gàng và sạch sẽSCSS Cú pháp
sass --watch app/sass:public/stylesheets
6Cú pháp Sass
sass --watch app/sass:public/stylesheets
7Đầu ra CSS
sass --watch app/sass:public/stylesheets
8Tác dụng của đoạn mã trên là yêu cầu
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
3, nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
4, nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
5, và nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
6 cư xử giống như nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
7. Điều đó có nghĩa là bất cứ nơi nào có nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
7 xuất hiện, thì nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
3, nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
4, nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
5, và nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
6 cũng sẽ xuất hiện. Điều kỳ diệu xảy ra trong CSS được tạo, trong đó mỗi lớp này sẽ có các thuộc tính CSS giống như nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
7. Điều này giúp bạn tránh phải viết nhiều tên lớp trên các phần tử HTMLBạn có thể mở rộng hầu hết các bộ chọn CSS đơn giản ngoài các lớp trình giữ chỗ trong Sass, nhưng sử dụng trình giữ chỗ là cách dễ nhất để đảm bảo rằng bạn không mở rộng một lớp được lồng ở nơi khác trong kiểu của bạn, điều này có thể dẫn đến các bộ chọn ngoài ý muốn trong CSS của bạn
Xin lưu ý rằng CSS trong
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
4 không được tạo vì nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
4 không bao giờ được mở rộngnhà điều hành
Làm toán trong CSS của bạn rất hữu ích. Sass có một số toán tử toán học tiêu chuẩn như
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
6, nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
7, nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
8, nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
9 và nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
0. Trong ví dụ của chúng tôi, chúng tôi sẽ thực hiện một số phép toán đơn giản để tính chiều rộng cho một nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
1 và nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
2SCSS Cú pháp
sass --watch app/sass:public/stylesheets
9Cú pháp Sass
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
0Đầu ra CSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
1Chúng tôi đã tạo một lưới chất lỏng rất đơn giản, dựa trên 960px. Các thao tác trong Sass cho phép chúng tôi thực hiện một số việc như lấy giá trị pixel và chuyển đổi chúng thành tỷ lệ phần trăm mà không gặp nhiều rắc rối