Lý do chính khiến Sass được phát triển là để viết CSS hiệu quả và tuyệt vời hơn. Nếu bạn đang tìm kiếm một ngôn ngữ tiền xử lý để học, tôi thực sự khuyên bạn nên dùng Sass. Tại sao lại là Sass? . Trước khi tôi tiếp tục giải thích sự khác biệt giữa Sass và Scss và cái nào thích hợp hơn để sử dụng, trước tiên tôi muốn giải thích Sass là gì
ngổ ngáo
Sass là viết tắt của Syntactally Awesome Style sheet. Sass là ngôn ngữ kịch bản tiền xử lý được diễn giải hoặc biên dịch thành Cascading Style Sheets. Nó hoàn toàn tương thích với tất cả các phiên bản CSS. Tải xuống và sử dụng miễn phí
Các 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à nơi bộ xử lý trước CSS có thể trợ giúp
Nó cho phép bạn sử dụng các biến, , mixin, hàm, v.v., tất cả đều có cú pháp hoàn toàn tương thích với CSS
Sass có hai cú pháp là Sass và Scss
Sass vs Scss
Cú pháp được sử dụng phổ biến nhất được gọi là “SCSS” [viết tắt của “Sassy CSS”] và nó sử dụng cú pháp CSS mà chúng ta đã quen sử dụng và mang lại cho nó những siêu năng lực đi kèm với Sass. Điều này có nghĩa là mọi biểu định kiểu CSS3 hợp lệ cũng là SCSS hợp lệ. Các tệp SCSS sử dụng phần mở rộng. scss. Điều này thực sự tiện dụng vì việc chuyển đổi các kiểu CSS thông thường của chúng ta sang Scss trở nên dễ dàng hơn rất nhiều
/* SCSS */
$primary-color: #3bbfce;
$secondary-color: #ff8700;
.content {
background-color: $primary-color;
color: darken[$secondary-color, 9%];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Cú pháp thứ hai [cú pháp cũ hơn] là Sass được tạo ra để làm cho CSS trở nên tuyệt vời hơn một chút và viết mã CSS hiệu quả hơn bằng cách loại bỏ việc sử dụng dấu ngoặc nhọn & dấu chấm phẩy, nó sử dụng thụt đầu dòng để chỉ định các khối. Các tệp trong cú pháp thụt lề sử dụng phần mở rộng. ngổ ngáo
/* SASS */
$primary-color: #3bbfce
$secondary-color: #ff8700
.content-navigation
background-color: $primary-color
color: darken[$secondary-color, 9%]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Với giải thích trên, bạn có thể thấy rõ sự khác biệt giữa Sass và Scss, câu hỏi tiếp theo sẽ là tôi nên học cái nào và tôi nên sử dụng cái nào
Sự thật là không ai nên trả lời câu hỏi đó cho bạn, Bạn nên biết cái nào phù hợp nhất với mình và cái nào phù hợp với kiểu viết mã của bạn
Đối với tôi, tôi chưa bao giờ thích cú pháp Sass vì tôi đã quen với việc mở dấu ngoặc nhọn và sử dụng dấu chấm phẩy. Và thực tế là Scss luôn có lợi khi làm việc theo nhóm, tôi không thể ngừng sử dụng nó
Nhưng bạn là người đưa ra quyết định cho chính mình
Bạn có thể muốn tìm hiểu thêm về Sass. Vui lòng kiểm tra tài liệu của họ
Như mọi khi, bất kỳ câu hỏi hoặc đề xuất nào, vui lòng để lại phản hồi hoặc tweet cho tôi 🤭. Hãy chắc chắn để kết nối với tôi trên mạng xã hội. 😎
Viết CSS [Cascading Style Sheets] là rất quan trọng để mô tả một cách hiệu quả cách các phần tử HTML phải được hiển thị trên trang web để xác định kiểu, thiết kế, bố cục và mọi thứ bạn cần để tạo một trang web tuyệt đẹp. Nhưng khi bạn bắt đầu làm việc với các trang web lớn, phức tạp, bạn có thể bắt đầu tự hỏi liệu CSS có thể tốt hơn không. Nếu bạn đang có những suy nghĩ này thì xin chúc mừng. Đã đến lúc SASS của bạn
SASS là gì?
SASS [Syntactally Awesome Stylesheets] là bộ tiền xử lý CSS cho phép bạn sử dụng các biến, phép toán, mixin, vòng lặp, hàm, nhập và các chức năng thú vị khác giúp viết CSS hiệu quả hơn nhiều. Theo một số cách, bạn có thể coi SASS là ngôn ngữ mở rộng biểu định kiểu vì nó mở rộng các đặc điểm CSS tiêu chuẩn bằng cách giới thiệu các lợi ích của ngôn ngữ lập trình cơ bản. Vì vậy, SASS sẽ biên dịch mã của bạn và tạo đầu ra CSS mà trình duyệt có thể hiểu được
Vâng, bạn chỉ đọc "ngôn ngữ lập trình" nhưng nó thực sự là những thứ cơ bản. Nếu bạn là một lập trình viên, bạn sẽ chỉ mất 15 phút để có được SASS. Nhưng nếu bạn không có kinh nghiệm viết mã, thì đường cong học tập của bạn sẽ cao hơn một chút. Khi bạn học CSS với SASS, bạn sẽ không phải viết CSS từ đầu nữa
Dưới đây là bảy lợi ích của việc sử dụng SASS
Đó là cú pháp CSS thân thiện
Nếu bạn biết CSS, bạn biết SASS. SASS đi kèm với hai cú pháp khác nhau. SASS và SCSS, cái được sử dụng nhiều nhất. Cú pháp SCSS tương thích với CSS, vì vậy bạn chỉ cần đổi tên. tập tin css để. scss et voilà. Tệp SCSS đầu tiên của bạn đã được tạo, giống như vậy
Tất nhiên, bằng cách này, bạn không sử dụng bất kỳ siêu năng lực và khả năng nào mà SASS cung cấp, nhưng ít nhất bạn nhận ra rằng mình không cần phải dành hàng giờ đồng hồ để bắt đầu sử dụng SASS. Từ điểm bắt đầu này, bạn sẽ có thể học cú pháp SASS khi bạn tiếp tục
Đây là nơi bạn có thể tìm hiểu về những điều cơ bản về SASS
Nó cung cấp các biến cho bất cứ điều gì bạn muốn
Một trong những lợi ích tuyệt vời của việc sử dụng bộ tiền xử lý CSS như SASS là khả năng sử dụng các biến. Một biến cho phép bạn lưu trữ một giá trị hoặc một tập hợp các giá trị và sử dụng lại các biến này trong các tệp SASS của bạn bao nhiêu lần bạn muốn và ở bất cứ đâu bạn muốn. Dễ dàng, mạnh mẽ và hữu ích.
Hãy tưởng tượng một kịch bản trong đó bạn đang xây dựng một trang web có màu xanh tuyệt vời ở khắp mọi nơi; . Bạn cũng đang sử dụng một vài phông chữ tuyệt vời. Ubuntu và Nunito. Sử dụng CSS truyền thống, bạn sẽ cần lặp đi lặp lại cùng một đoạn mã, nhưng với SASS, bạn có thể lưu trữ các giá trị này dưới dạng biến.
$blue: #004BB4; $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif; $nunito-font: 'Nunito', 'Arial', 'Helvetica', sans-serif;
Khi bạn đã tạo các biến, bạn có thể sử dụng chúng ở bất cứ đâu bạn cần, như thế này
h1 {
font: $ubuntu-font;
color: $blue;
}
a {
font: $nunito-font;
background-color: $blue;
padding: 6px;
}Khi bạn biên dịch các tệp SCSS của mình, SASS sẽ xử lý các biến bạn đã sử dụng, thay thế tên biến bằng giá trị được lưu trữ của nó. Mạnh mẽ, phải không? . Những ngày sử dụng "Tìm và thay thế" trong trình soạn thảo văn bản của bạn để cập nhật màu sắc trong tệp CSS của bạn đã không còn nữa
Chỉ riêng lợi ích này thôi cũng khiến việc trở thành một ninja SASS trở nên đáng giá, nhưng còn nhiều lợi ích khác nữa
Nó sử dụng cú pháp lồng nhau
Một lợi ích tuyệt vời khác của bộ tiền xử lý CSS là cú pháp cải tiến của chúng. SASS cho phép bạn sử dụng cú pháp lồng nhau, là mã chứa trong một đoạn mã khác thực hiện chức năng rộng hơn. Trong SASS, việc lồng nhau cho phép cách nhắm mục tiêu các phần tử rõ ràng hơn. Nói cách khác, bạn có thể lồng các phần tử HTML của mình vào nhau bằng cách sử dụng bộ chọn CSS
Lợi ích của việc làm tổ
- Cú pháp tự nhiên hơn và dễ đọc trong hầu hết các trường hợp
- Ngăn chặn sự cần thiết phải viết lại bộ chọn nhiều lần
- Cấu trúc và tổ chức mã tốt hơn nhờ vào hệ thống phân cấp trực quan, đưa chúng ta đến
- Mã dễ bảo trì hơn
Ví dụ về mã SASS [cú pháp SCSS] lồng nhau
.navbar {
font: $ubuntu-font;
color: $blue;
li {
margin-left: 1rem;
a {
padding: 5px;
font-size: 1.5rem;
span {
font-weight: 600;
}
}
}
}Tuy nhiên, hãy lưu ý rằng việc xếp lồng quá sâu không phải là một phương pháp hay. Bạn lồng càng sâu, tệp SASS càng trở nên dài dòng và CSS được biên dịch càng có khả năng lớn hơn, vì việc lồng được làm phẳng khi biên dịch. Vì vậy, việc lạm dụng lồng nhau có thể tạo ra
- Các quy tắc CSS quá cụ thể khó duy trì
- Bộ chọn không thể sử dụng lại
- Vấn đề hiệu năng. Các bộ chọn lồng nhau sẽ tạo ra một chuỗi bộ chọn CSS dài mà cuối cùng sẽ tạo ra một tệp CSS lớn hơn
Nó bao gồm mixin
Sử dụng các biến là điều tuyệt vời nhưng nếu bạn có các khối mã lặp lại trong biểu định kiểu của mình nhiều lần thì sao? . Mixin giống như các chức năng trong các ngôn ngữ lập trình khác. Chúng trả về một giá trị hoặc tập hợp các giá trị và có thể nhận các tham số bao gồm các giá trị mặc định. Lưu ý rằng SASS cũng có chức năng, vì vậy đừng nhầm lẫn mixin với chức năng
Hãy xem một ví dụ. Hãy tưởng tượng bạn có mixin này
@mixin set-font[ $family: 'Ubuntu' , $weight: 400 , $style: normal ] {
font-family: $family , 'Arial', 'Helvetica', sans-serif;
font-style: $style;
font-weight: $weight;
}Bây giờ bạn đã xác định mixin của mình, bạn có thể đưa nó vào bất cứ đâu bạn muốn. Lưu ý rằng vì bạn đã khai báo các giá trị mặc định nên không cần truyền bất kỳ tham số nào
h1 {
@include set-font;
color: $blue;
}Điều này sẽ được tổng hợp thành
h1 {
font-family: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
font-style: normal;
font-weight: 400;
color: #004BB4;
}Nếu bạn muốn cập nhật các giá trị mixin mặc định, bạn chỉ cần chuyển các tham số trong lệnh gọi @include
Bạn có thể phân chia và chinh phục
Khi dự án của bạn phát triển và trở nên phức tạp hơn, các biểu định kiểu của bạn cũng vậy. Bạn có thể thêm nhận xét vào biểu định kiểu 3.000 dòng của mình và sau đó tìm kiếm một mẫu cụ thể trong trình soạn thảo văn bản của mình, nhưng đó không phải là một giải pháp tuyệt vời. Hoặc bạn có thể chia tệp CSS của mình thành 20 phần nhỏ hơn, nhưng sau đó bạn sẽ có một yêu cầu HTTP cho mỗi phần. tệp css bạn nhập. Bạn cũng không muốn điều đó
May mắn thay SASS có quy tắc @import. @import cho phép bạn mô đun hóa mã của mình để dễ bảo trì hơn bằng cách nhập các tệp SASS nhỏ hơn. Sự khác biệt giữa quy tắc này và quy tắc @import CSS là tất cả các tệp SCSS đã nhập sẽ được hợp nhất với nhau thành một tệp CSS duy nhất, do đó, cuối cùng, chỉ một lệnh gọi HTTP duy nhất sẽ được yêu cầu vì bạn sẽ cung cấp một tệp CSS duy nhất cho
Nhập tệp SCSS/SASS thực sự dễ dàng
@import "source/font-awesome"; @import "source/slick"; @import "framework/bootstrap"; @import "my-custom-theme";
Như bạn có thể thấy, bạn không phải cung cấp tên phần mở rộng tệp và đường dẫn nhập cũng có thể chứa các thư mục, điều đó có nghĩa là bạn có thể cung cấp cấu trúc mong muốn cho thư mục làm việc SASS của mình.
Nó có một cộng đồng lớn và được ghi chép đầy đủ
Một lợi thế khác của việc sử dụng SASS là số lượng lớn tài liệu có sẵn trực tuyến. Từ hướng dẫn đến sách, SASS có tất cả những gì bạn cần để trở thành một chuyên gia. Một trong những điểm khởi đầu tốt nhất là trang Tài liệu SASS chính thức, nơi bạn sẽ tìm thấy tài liệu tuyệt vời với đầy đủ các ví dụ thực tế.
Bạn cũng có thể tìm thấy rất nhiều tài nguyên tuyệt vời trên trang cộng đồng SASS, bao gồm các bài đăng blog, hướng dẫn, hướng dẫn, dự án thú vị, v.v. Bạn sẽ không cảm thấy như mình đang ở một mình khi học SASS
Nếu bạn biết SASS, bạn có thể tùy chỉnh Bootstrap 4
Thực tế là, SASS ở khắp mọi nơi. Cùng với LESS, một trong những giải pháp thay thế vững chắc khác, SASS đã trở thành bộ tiền xử lý CSS được sử dụng nhiều nhất trong thế giới giao diện người dùng. Một số khung giao diện người dùng tốt nhất như Bootstrap và Foundation đã được phát triển bằng SASS
Nếu bạn đã quen thuộc với Bootstrap, biết SASS sẽ cung cấp cho bạn khả năng thay đổi khung web này bằng cách tùy chỉnh mã SASS của nó. Âm thanh tuyệt vời, phải không?
Ví dụ: giả sử bạn không hài lòng với các điểm ngắt mặc định mà Bootstrap cung cấp và bạn muốn thêm một điểm ngắt nữa. Tất cả những gì bạn phải làm là cập nhật biến ánh xạ $grid-breakpoints mà bạn sẽ tìm thấy trong _variables. scss, để thêm các điểm dừng mới mà bạn muốn hỗ trợ. Trong ví dụ sau, chúng tôi đã thêm một điểm ngắt bổ sung 1440px
/* SASS */
$primary-color: #3bbfce
$secondary-color: #ff8700
.content-navigation
background-color: $primary-color
color: darken[$secondary-color, 9%]
Sau khi biên dịch các tệp Sass nguồn của Bootstrap, điểm dừng mới sẽ được tạo bao gồm mã định danh mới, xxl trong trường hợp này, cho tất cả các lớp phản hồi mà Bootstrap tạo ra. Ví dụ: nếu Bootstrap mặc định cung cấp các lớp phản hồi như "d-xl-none" hoặc "col-sm-7", thì bây giờ bạn sẽ có thể thực hiện "col-xxl-6" hoặc "mx-xxl-3"
Và tất nhiên, bạn sẽ có thể tùy chỉnh các khía cạnh mặc định của Bootstrap như màu sắc, phông chữ, lề, phần đệm, v.v.
Tóm tắt và suy nghĩ cuối cùng
Bộ tiền xử lý CSS vẫn ở đây. Chúng mở rộng các tính năng CSS cơ bản bằng cách cung cấp cho bạn một tập hợp các chức năng mạnh mẽ sẽ nâng cao năng suất của bạn ngay lập tức. Chúng tôi đã đề cập đến một số lợi ích nhưng còn nhiều lợi ích khác, chẳng hạn như tính kế thừa, chức năng, chỉ thị điều khiển và biểu thức như if[],for[] hoặc while[], kiểu dữ liệu, phép nội suy, v.v.
Trở thành một bậc thầy SASS có thể mất một chút thời gian; . Nhưng bạn sẽ không mất nhiều thời gian để học những điều cơ bản và thiết lập nó cho dự án của mình
Bạn có thắc mắc, nghi ngờ hoặc lo ngại về cách SASS có thể tác động đến dự án của bạn? . Chúng tôi rất thích trò chuyện