SASS/SCSS là gì? Cách viết CSS bằng SASS/SCSS
Để làm cho giao diện web trông đẹp hơn, bạn chắc chắn sẽ cần làm việc với CSS. Tuy nhiên, CSS thuần túy sẽ khá “nhàm chán” nếu bạn đang tìm cách sử dụng CSS nhanh hơn, chuyên nghiệp hơn, sạch sẽ và lành mạnh. Và SASS / SCSS chính là thứ bạn đang tìm kiếm. Vậy, SASS / SCSS là gì? Làm thế nào để viết CSS trong SASS / SCSS?
Tìm hiểu về SASS / SCSS
Trước khi đi vào SASS / SCSS là gì? Chúng ta sẽ cần tìm hiểu về CSS Preprocessor, vì cả SASS / SCSS đều là CSS Preprocessor.
CSS Preprocessor là gì?
Bộ tiền xử lý CSS tốt đẹp Ngôn ngữ tiền xử lý CSS, là một ngôn ngữ kịch bản mở rộng CSS và được biên dịch thành cú pháp CSS để bạn có thể tăng tốc độ viết CSS với cấu trúc gọn gàng hơn. Do đó, CSS Preprocessor giúp bạn tiết kiệm thời gian viết, duy trì và phát triển CSS.
SASS / SCSS là gì?
Về cơ bản, SASS và SCSS có bản chất giống nhau, điểm khác biệt duy nhất giữa chúng là cách viết.
SASS là gì?
Trang tính kiểu tuyệt vời về mặt cú pháp hoặc thường được viết tắt là SASS. Một Ngôn ngữ kịch bản tiền xử lý - Chương trình tiền nhiệm bằng ngôn ngữ kịch bản và sẽ được dịch sang CSS.
SASS có 2 kiểu viết khác nhau là HAML và Pug, sử dụng thụt đầu dòng để phân tách các khối mã với nhau thay vì sử dụng dấu ngoặc; SASS sử dụng phương pháp dòng mới để phân biệt các quy tắc.
Phần mở rộng của SASS là .sass.
SCSS là gì?
SCSS có cú pháp tương tự như ngôn ngữ lập trình Ruby, vì SCSS được phát triển bởi nhóm phát triển ngôn ngữ Ruby.
Bản thân SCSS ra đời sau SASS. Tuy nhiên, SCSS có cú pháp kế thừa và giống với CSS hơn. Từ đó, SCSS thu hẹp khoảng cách giữa việc viết SASS và viết CSS thông thường.
Phần mở rộng SCSS là .scss.
4 tính năng cơ bản của SCSS
Vì đa số lập trình viên sẽ chọn SCSS, cũng như SCSS thông dụng, nó mạnh hơn SASS nên thuthuatkiemtien.com sẽ giới thiệu cho các bạn 4 tính năng cơ bản của SCSS nhé!
Quy tắc lồng nhau - xếp chồng lên nhau
Quy tắc lồng nhau là một trong những tính năng khiến SCSS được đánh giá cao hơn CSS thuần túy. Ví dụ, để chèn một đoạn CSS vào HTML, bạn sẽ thực thi mã từ thẻ, sau đó bạn phải gọi tên thẻ, lớp, ID cha của thẻ mà bạn muốn sử dụng CSS. Điều này sẽ làm cho công việc của bạn trở nên phức tạp hơn rất nhiều.
Trong khi đó, với tính năng Quy tắc lồng nhau của SCSS, việc viết CSS của bạn sẽ trở nên đơn giản hơn khi chúng được xếp chồng lên nhau, bạn sẽ không cần phải nhớ lại tên của thẻ, lớp hoặc ID nữa.
Variable - biến
Biến là một thứ gì đó rất quen thuộc với các lập trình viên. Các biến chứa các giá trị mà bạn cần sử dụng nhiều lần như: mã màu, kiểu phông chữ, phông chữ, v.v.
Để khai báo một biến và gọi chúng khi cần, chỉ cần thêm dấu $ cùng với tên biến.
Ví dụ:
$whiteColor = #fff;
.navbar
ul.menu
list-style: none;
li
padding: 5px;
a
text-decoration: none;
color: $whitecolor
Không chỉ có một màu trong bảng màu. Mã màu cực kỳ khó nhớ. Do đó, sử dụng ngôn ngữ tự nhiên như một biến số để phân biệt sắc độ của màu sắc cũng là một phương pháp hữu hiệu, thay vì xem qua từng mã màu và sử dụng khi cần thiết!
Quy tắc của Mixin
Điều gì sẽ xảy ra nếu bạn muốn sử dụng 1 biến để lưu trữ các giá trị khác nhau? Bạn có tạo nhiều biến khác nhau không? Không cần! Với cơ chế Mixin, bạn có thể đưa nhiều thuộc tính bạn đã chỉ định vào hỗn hợp, sau đó @include vào bất kỳ phần tử nào mà không cần tạo thêm biến hoặc nhập lại thuộc tính.
Ví dụ:
@mixin colorVsFont($color, $fontSize)
color: $color;
font-size: $fontSize;
.navbar
ul.menu
list-style: none;
li
padding: 5px;
a
text-decoration: none;
@include colorVsFont(#000, 50px);
Mở rộng - kế thừa
Nếu bạn đã học lập trình hướng đối tượng, bạn sẽ quen thuộc với kế thừa hoặc mở rộng. Khi bạn định nghĩa một lớp nào đó, khi cần sử dụng, bạn chỉ cần @extend thuộc tính đó.
Ví dụ:
.title-box
color: #dacb46;
text-shadow: 1px 1px 1px #1a1a1a;
display: inline-block;
text-transform: uppercase;
.navbar
ul.menu
list-style: none;
li
padding: 5px;
a
text-decoration: none;
@extend .title-box;
Cách viết CSS trong SASS / SCSS
Nên chọn cách viết SASS / SCSS?
Cách viết mã giữa SASS và SCSS sẽ khác nhau .. SCSS được phát triển sau SASS và kế thừa các dấu ngoặc giống với cú pháp của CSS. Do đó, nhiều lập trình viên thích sử dụng SCSS hơn SASS vì sự quen thuộc khi làm việc với CSS.
Bạn chỉ cần “thuần” những gì khi làm việc với CSS để làm việc với SCSS. Ngoài ra, bạn chỉ cần làm việc nhiều hơn với một vài plugin CSS mạnh mẽ hơn như toán tử, hàm, biến, v.v.
Cách nhập vào dự án
Để nhập vào một dự án, một trang chỉ mục, bạn chỉ cần thực hiện tương tự với cách yêu cầu hoặc đưa tệp a vào tệp b trong PHP.
Thông thường, bạn sẽ "nhồi" tất cả thông tin trong đầu trang, nội dung và chân trang trên trang web của mình vào một tệp style.css. Điều này sẽ khiến bạn rất khó nâng cấp và bảo trì mã CSS của mình. Tùy chọn tạo 3 file riêng biệt để sử dụng trong từng phần và @import 3 thành phần trên sẽ giúp bạn “bớt khổ” hơn rất nhiều sau này. Bạn thực hiện các bước sau:
- Tạo tệp _header.scss được sử dụng riêng cho tiêu đề.
- Tạo ra _body.scss sử dụng cho cơ thể
- Cuối cùng, bạn tạo _footer.scss cho chân trang.
Sau khi được tạo, bạn chỉ cần nhập @ chúng vào tệp style.scss Ổn.
- @import 'tiêu đề';
- @import 'body';
- @import 'footer';
Cách biên dịch SASS / SCSS sang CSS
Để biên dịch SASS / SCSS thành CSS, bạn có nhiều cách, từ sử dụng lệnh, đến sử dụng phần mềm. Bạn thậm chí có thể biên dịch SASS / SCSS thành CSS bằng các công cụ trực tuyến tiện lợi.
Nếu bạn muốn cài đặt phần mềm để sử dụng ngoại tuyến, Koala là một trong những phần mềm biên dịch SASS / SCSS sang CSS miễn phí phổ biến nhất. Bạn chỉ cần tải về => cài đặt => sử dụng hoàn toàn miễn phí.
SASS / SCSS trên Node.js
Làm cách nào để cài đặt SASS / SCSS trên Node.js?
Để cài đặt SASS / SCSS trên Node.js, chỉ cần làm theo các bước sau:
Bước 1: Kiểm tra phiên bản Node.js
Node -vNếu chưa cài đặt, bạn có thể tải xuống bộ Node.js và cài đặt.
Bước 2: cài đặt SASS / SCSS trên Node.js, bạn chỉ cần chạy lệnh
npm install -g sassLàm thế nào để sử dụng SASS / SCSS trên Node.js?
Ví dụ: bạn có tệp SASS / SCSS với nội dung sau:
$font-stack: Helvetica, sans-serif; //Khai báo biến $font-stack
$primary-color: #333;
body
font: 100% $font-stack;
color: $primary-color;
Nếu bạn không có công cụ biên dịch SASS / SCSS sang CSS, bạn có thể sử dụng dòng lệnh sau để chuyển đổi tệp SASS / SCSS sang CSS với điều kiện SASS / SCSS được cài đặt trên Node.js:
sass filescss.scss filecss.cssVí dụ: bạn có thể chuyển đổi tệp trong dòng lệnh như sau:
sass style.scss style.cssSau khi biên dịch, bạn sẽ có tệp style.scss kết quả thành nội dung style.css:
body
font: 100% Helvetica, sans-serif;
color: #333;
Xin chúc mừng bạn đã chuyển đổi thành công!
Vậy là chúng ta đã trải qua một hành trình không quá ngắn cũng không quá dài nhưng đủ để hiểu SASS / SCSS là gì, các tính năng cơ bản của SASS / SCSS cũng như cách viết CSS trong SASS / SCSS. thuthuatkiemtien.com hy vọng những kiến thức này sẽ giúp bạn làm đẹp trang web, ứng dụng và tối ưu hóa trải nghiệm người dùng!
Câu hỏi thường gặp về SASS / SCSS
Cần làm gì để mã SASS / SCSS hiệu quả?
Một trong những yếu tố bạn nên xem xét khi mã hóa SASS / SCSS là: nên đặt tên biến có ý nghĩa và tránh các từ khóa mã.
Tôi có nên viết mã bằng SASS hay không?
Câu trả lời sẽ phụ thuộc vào bạn. Nếu không thích dấu ngoặc, bạn có thể làm quen với việc thụt lề để tạo thành các khối mã.
Làm cách nào để biên dịch SASS / SCSS sang CSS trực tuyến?
Nếu bạn không thích cài đặt phần mềm, bạn có thể sử dụng từ khóa SASS tới CSS hoặc là SCSS sang CSS, để tìm kiếm các công cụ biên dịch SASS / SCSS sang CSS miễn phí trên internet.
Một số công cụ như: JSON Formatter, SassMeister | Sân chơi Sass !, Kiến thức cơ bản về Sass,…
Tôi có thể tìm hiểu thêm về SASS / SCSS ở đâu?
Nếu bạn muốn tìm hiểu thêm về SASS / SCSS, bạn có thể học miễn phí tại W3Schools, học bằng các ví dụ thực hành rất dễ hiểu. W3Schools là trang dạy lập trình trên nền web hoàn toàn miễn phí và cực kỳ nổi tiếng trong giới lập trình cũng như được các thầy cô giới thiệu để học thêm tại nhà.
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
- Trụ sở chính: L17-11, Lầu 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, P. Bến Nghé, Q.1, TP.
VPĐD: 42 Trần Phú, P.4, Q.5, TP.HCM - Điện thoại: 0364 333 333
Tổng đài miễn cước: 1800 6734 - Email: sales@tino.org
- Trang web: www.tino.org
Nguồn: SASS/SCSS là gì? Cách viết CSS bằng SASS/SCSSXem thêm nhiều bài viết về : Kiến Thức Cơ Bản
Nhận xét
Đăng nhận xét