Những điều cơ bản về SASS
Bài viết này giải thích những kiến thức cơ bản về SASS.
Chúng tôi sẽ giải thích các tính năng cơ bản của SASS từng bước một và trình bày cách sử dụng chúng bằng mã mẫu thực tế.
YouTube Video
Những điều cơ bản về SASS
SASS (Syntactically Awesome Stylesheets) là một ngôn ngữ cho stylesheet mở rộng CSS. Bằng cách sử dụng SASS, bạn có thể tận dụng các tính năng nâng cao mà CSS không có, như biến, lồng nhau, mixins và kế thừa. Điều này giúp việc quản lý và tái sử dụng stylesheet trở nên dễ dàng hơn rất nhiều.
SASS là gì?
SASS là một ngôn ngữ giúp việc viết CSS trở nên đơn giản hơn và mang lại khả năng chỉnh sửa linh hoạt và mạnh mẽ hơn. SASS cũng cung cấp cú pháp SCSS (Sassy CSS), có cú pháp tương tự như CSS chuẩn. Dưới đây là một ví dụ:.
Ví dụ về SCSS
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}Ví dụ về CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}Cài đặt SASS
Cách cài đặt
Để sử dụng SASS, hãy cài đặt Node.js trước, sau đó cài đặt SASS bằng lệnh sau:.
1npm install -g sassCách biên dịch
Để biên dịch các tệp SASS (.scss hoặc .sass) sang CSS, hãy sử dụng lệnh sau:.
1sass input.scss output.cssBạn cũng có thể sử dụng tuỳ chọn watch để theo dõi các thay đổi trong tệp và thực hiện biên dịch thời gian thực.
Biến
SASS cho phép bạn sử dụng biến để tái sử dụng các giá trị như màu sắc và kích cỡ phông chữ.
Mã mẫu
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- Đoạn mã này sử dụng biến SASS để định nghĩa màu sắc và phông chữ, sau đó tái sử dụng chúng trong bộ chọn
bodynhằm tăng tính nhất quán và dễ bảo trì.
Kết quả biên dịch
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}Lồng nhau
SASS giúp mã dễ đọc hơn bằng cách cho phép các bộ chọn CSS được lồng nhau.
Mã mẫu
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- Đoạn mã này sử dụng cấu trúc lồng nhau để làm rõ cấu trúc của các kiểu dáng một cách trực quan.
Kết quả biên dịch
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}Mixins
Mixins cho phép bạn tái sử dụng mã trên nhiều bộ chọn khác nhau.
Mã mẫu
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- Đoạn mã này định nghĩa kiểu
border-radiusbằng@mixinvà tái sử dụng nó trongbuttonvà.cardbằng@include, giúp tạo kiểu hiệu quả mà không bị trùng lặp.
Kết quả biên dịch
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}Kế thừa (@extend)
Kế thừa cho phép bạn áp dụng các kiểu đã có sẵn cho các bộ chọn khác.
Mã mẫu
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- Đoạn mã này định nghĩa bộ chọn placeholder
%button-stylevà sử dụng@extendđể áp dụng các kiểu chung cho cảbuttonvà.link-button, tăng khả năng tái sử dụng và tính nhất quán.
Kết quả biên dịch
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}Câu điều kiện và vòng lặp
SASS hỗ trợ câu điều kiện và vòng lặp để tạo kiểu động.
Ví dụ về câu điều kiện
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- Đoạn mã này sử dụng hàm
ifcủa SASS để chuyển đổi màu nền và màu chữ dựa trên giá trị$theme, cho phép tạo kiểu động thông qua các điều kiện.
Ví dụ về vòng lặp
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- Đoạn mã này sử dụng vòng lặp
@forcủa SASS để tự động tạo các lớp từ.column-1đến.column-3.
Kết quả biên dịch
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}Chia tệp và nhập tệp
SASS cho phép bạn chia nhỏ tệp và tái sử dụng chúng bằng cách dùng @use hoặc @import.
Cấu trúc tệp
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}Kết quả biên dịch
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}Tóm tắt
Việc sử dụng SASS giúp việc viết CSS trở nên dễ dàng hơn và cải thiện khả năng tái sử dụng và bảo trì mã nguồn.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.