Hướng dẫn scss for - scss cho
|
Hướng dẫn học SCSS, nội dung bài học đơn giản, khoa học giúp bạn cài đặt, tự động thực thi file CSS chỉ với thao tác save, giúp bạn làm quen với các nội dung của SCSS một cách nhanh chóng và dễ hiểu nhất. Show
Bắt đầu học SCSS thôi
SCSS @for
Ví dụ về SCSS @forTạo độ giảm giần
|
| SCSS | CSS |
|---|---|
$lenght: 5;
@for $i from 1 through $lenght {
.item-#{$i} {
opacity: 1/$i;
}
} | .item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}
|
- Nội dung trên có nghĩa là: lặp cho nội dung bên trong @for sao cho
.item-1 { opacity: 1; } .item-2 { opacity: 0.5; } .item-3 { opacity: 0.33333; } .item-4 { opacity: 0.25; } .item-5 { opacity: 0.2; }5 chạy từ.item-1 { opacity: 1; } .item-2 { opacity: 0.5; } .item-3 { opacity: 0.33333; } .item-4 { opacity: 0.25; } .item-5 { opacity: 0.2; }6 cho tới.item-1 { opacity: 1; } .item-2 { opacity: 0.5; } .item-3 { opacity: 0.33333; } .item-4 { opacity: 0.25; } .item-5 { opacity: 0.2; }7.
Tạo chiều rộng tự động theo số cột
| SCSS | CSS |
|---|---|
$total-cols: 8;
@function column-width($col) {
@return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
.col-#{$i} { width: column-width($i) };
}
| .col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}
|
Nội dung trên có nghĩa là: lặp cho nội dung bên trong @for sao cho .item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}5 chạy từ .item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}6 cho tới .item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}7.
| SCSS | CSS |
|---|---|
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}
| ul:nth-child(3n + 1) { background-color: #004080; } ul:nth-child(3n + 2) { background-color: #004d99; } ul:nth-child(3n + 3) { background-color: #0059b3; } |
SASS: Là gì, tại sao và như thế nào?
SASS là một bộ tiền xử lý CSS, giúp bạn sử dụng các tính năng không tồn tại trong CSS như các biến, lồng nhau, mixins, function, các tính năng tiện lợi khác. Điều này giúp cho code dễ đọc, ngắn gọn, dễ kế thừa và maintain hơn so với cách viết CSS truyền thống. Khi bạn bắt đầu chạy, nó sẽ lấy tệp Sass của bạn, chuyển đổi và lưu nó 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.
Khởi tạo dự án
Đầu tiên, cần tạo 1
.item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}9 giúp quản lý các package version cũng như khởi chạy dự án thông qua npmnpm init -y
Bạn có thể tham khảo cây thư mục dưới đây của mình
.
├─ node_modules/
├─ public/
│ ├─ styles/
│ ├─ index.html
├─ src/
│ ├─ scss/
package.json
Tại sao phải chia ra 2 thư mục
$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }0 và$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }1? Bởi vì source code từ$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }0 sẽ được biên dịch và tự động đặt vào thư mục$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }1. Khi giữ sự tách biệt các thư mục này, bạn có thể chắc chắn rằng mọi thứ bạn cần để đưa web của mình lên môi trường Product đều nằm trong thư mục$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }1 và mọi thứ để triển khai phát triển dự án của bạn đều nằm trong thư mục$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }0.
Cài đặt SASS
Đầu tiên, chúng ta sẽ cài đặt sass , thư viện giúp để biên dịch
$total-cols: 8;
@function column-width($col) {
@return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
.col-#{$i} { width: column-width($i) };
}6 hoặc $total-cols: 8;
@function column-width($col) {
@return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
.col-#{$i} { width: column-width($i) };
}7 các tệp thành $total-cols: 8;
@function column-width($col) {
@return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
.col-#{$i} { width: column-width($i) };
}8.npm install -D sass
Trong file
.item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}9, chúng ta sẽ thêm 1 dòng khởi chạy giúp biên dịch SASS."scripts": {
...
"start": "sass src/scss:public"
...
}
Dòng khởi chạy có dạng
.col-1 { width: 12.5%; } .col-2 { width: 25%; } .col-3 { width: 37.5%; } .col-4 { width: 50%; } .col-5 { width: 62.5%; } .col-6 { width: 75%; } .col-7 { width: 87.5%; } .col-8 { width: 100%; }0, chúng ta sẽ khai báo cho sass cần biên dịch bất kỳ file$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }7 nào mà nó tìm thấy (ngoại trừ những tệp bắt đầu bằng dấu gạch dưới) từ thư mục.col-1 { width: 12.5%; } .col-2 { width: 25%; } .col-3 { width: 37.5%; } .col-4 { width: 50%; } .col-5 { width: 62.5%; } .col-6 { width: 75%; } .col-7 { width: 87.5%; } .col-8 { width: 100%; }2 và xuất tới$total-cols: 8; @function column-width($col) { @return percentage($col/$total-cols); } @for $i from 1 through $total-cols { .col-#{$i} { width: column-width($i) }; }1.
Viết code
Sau khi đã cài đặt SASS, chúng ta có thể bắt đầu làm việc trên dự án của mình. Chúng ta sẽ bắt đầu bằng cách tạo một file
$total-cols: 8;
@function column-width($col) {
@return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
.col-#{$i} { width: column-width($i) };
}7 trong thư mục .col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}2. Tạo một file .col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}6 trong .col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}2 và import nó vào .col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}8..item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}0.col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}6 là một file chứa tất cả các style cơ bản cho dự án. Đó là một nơi tốt để đặt các style global như màu sắc, phông chữ, kích thước và các style khác được sử dụng trong toàn bộ dự án.Có 1 số style cơ bản thường dùng như:
.item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}1Thêm SASS vào HTML
Trình duyệt không thể hiểu SASS. Vì vậy, chúng ta cần thêm file đã biên dịch của SASS (CSS) vào HTML. Chúng ta có thể thêm bằng cách thêm thẻ
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}0 vào trong $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}1..item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}2Bây giờ chúng ta có thể chạy
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}2 tại terminal để chuyển đổi từ $total-cols: 8;
@function column-width($col) {
@return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
.col-#{$i} { width: column-width($i) };
}7 sang $total-cols: 8;
@function column-width($col) {
@return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
.col-#{$i} { width: column-width($i) };
}8.Môi trường Development và Production
Có 1 vài sự khác biệt khi build ở môi trường development và production. Nếu ở môi trường Dev, bạn cần giữ code nguyên vẹn, cùng với
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}5 giúp debug và dễ dàng tìm kiếm khi phát sinh lỗi, lỗi ở đâu. Nếu ở môi trường Prod, bạn cần nén code, loại bỏ $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}5, những khoảng trống và comment không cần thiết để tăng hiệu suất.Khi nãy chúng ta đã tạo 1 lệnh giúp build code về CSS, bây giờ hãy tách riêng nó ra 2 phiên bản cho phù hợp với đặc điểm của mỗi môi trường.
.item-1 {
opacity: 1;
}
.item-2 {
opacity: 0.5;
}
.item-3 {
opacity: 0.33333;
}
.item-4 {
opacity: 0.25;
}
.item-5 {
opacity: 0.2;
}3Dev Script: $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}7 giúp SASS lắng nghe trong thư mục .col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}2 và biên dịch lại nếu phát hiện có sự thay đổi trong file. $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}9 để tạo ra $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}5 dành cho file CSS đã được biên dịch.:
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}7 giúp SASS lắng nghe trong thư mục .col-1 {
width: 12.5%;
}
.col-2 {
width: 25%;
}
.col-3 {
width: 37.5%;
}
.col-4 {
width: 50%;
}
.col-5 {
width: 62.5%;
}
.col-6 {
width: 75%;
}
.col-7 {
width: 87.5%;
}
.col-8 {
width: 100%;
}2 và biên dịch lại nếu phát hiện có sự thay đổi trong file. $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}9 để tạo ra $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}5 dành cho file CSS đã được biên dịch.Prod Script: Sử dụng ul:nth-child(3n + 1) {
background-color: #004080;
}
ul:nth-child(3n + 2) {
background-color: #004d99;
}
ul:nth-child(3n + 3) {
background-color: #0059b3;
}
1 để không khởi tạo $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}5. Còn ul:nth-child(3n + 1) {
background-color: #004080;
}
ul:nth-child(3n + 2) {
background-color: #004d99;
}
ul:nth-child(3n + 3) {
background-color: #0059b3;
}
3 giúp nén và loại bỏ bất kỳ khoảng trắng không cần thiết nào khỏi file CSS đã biên dịch. Cả hai tùy chọn này sẽ giảm kích thước file và cải thiện hiệu suất khi tải trang.: Sử dụng
ul:nth-child(3n + 1) { background-color: #004080; } ul:nth-child(3n + 2) { background-color: #004d99; } ul:nth-child(3n + 3) { background-color: #0059b3; }1 để không khởi tạo
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}5. Còn ul:nth-child(3n + 1) { background-color: #004080; } ul:nth-child(3n + 2) { background-color: #004d99; } ul:nth-child(3n + 3) { background-color: #0059b3; }3 giúp nén và loại bỏ bất kỳ khoảng trắng không cần thiết nào khỏi file CSS đã biên dịch. Cả hai tùy chọn này sẽ giảm kích thước file và cải thiện hiệu suất khi tải trang.
Kết luận
- SCSS là một công cụ giúp bạn viết CSS rõ ràng, dễ dàng và ít tốn kém hơn trong một cấu trúc chương trình.
- Trình duyệt không thể hiểu SASS. Vì vậy, chúng ta cần chuyển SCSS sang CSS.
- Trong môi trường Development, việc sử dụng
$base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } }5 cho trình duyệt sẽ tái tạo lại code ban đầu và hiển thị bản gốc đã được tái tạo lại trong trình gỡ lỗi. - Trong môi trường Production, hãy xóa
$base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } }5 và giảm kích thước tệp để tải trang nhanh hơn, giúp đạt được hiệu suất tốt hơn.
