Ví dụ trong mỗi chương
Công cụ "Hiển thị Sass" của chúng tôi giúp học Sass dễ dàng, nó hiển thị cả mã và kết quả
Ví dụ Sass
/* Xác định các biến và giá trị tiêu chuẩn cho trang web */
$bgcolor. lightblue;
$textcolor. darkblue;
$fontsize. 18px;
/* Sử dụng các biến */
body {
background-color. $bgcolor;
màu. $textcolor;
cỡ chữ. $fontsize;
}
Chạy ví dụ »
Việc học của tôi
Theo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools
Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm
Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning
Tham chiếu hàm Sass
Tại W3Schools, bạn sẽ tìm thấy các tài liệu tham khảo đầy đủ về tất cả các hàm Sass với cú pháp và ví dụ
SCSS là bộ xử lý trước cho CSS cho phép bạn sử dụng các tính năng bổ sung trong biểu định kiểu CSS của mình. Nó tự động biên dịch của bạn. tập tin scss vào. css để trình duyệt đọc
Tại sao nên sử dụng SCSS?
SCSS cho phép sử dụng các biến, bộ chọn lồng nhau, nhập, trộn và các tính năng khác chưa có trong CSS. Mặc dù cần thực hành một chút để thành thạo, nhưng bạn có thể viết CSS trực tiếp trong các tệp SCSS của mình
Cài đặt nhanh
Có thể tự biên dịch SCSS, tuy nhiên hầu hết các gói ứng dụng web đều dễ dàng sử dụng các thư viện của bên thứ ba để thực hiện việc này cho bạn. Trong hướng dẫn này, chúng ta sẽ thiết lập SCSS với dự án Vanilla JS Parcel cũng như ứng dụng React bằng cách sử dụng Create-React-App
Thiết lập HTML / SCSS [Bưu kiện]
Parcel là một gói ứng dụng web tương tự như Webpack, nhưng có ít cấu hình hơn [không]. Bạn có thể làm theo hướng dẫn này để thiết lập và lưu trữ các ứng dụng Bưu kiện đơn giản hoặc chỉ cần làm theo bên dưới
mkdir parcel-project
npm init -y
npm install --save-dev sass
Ở đây chúng tôi đang tạo một dự án mới trong thư mục
touch index.html
touch styles.scss
7 và khởi tạo một ứng dụng nút mới. Tiếp theo, chúng tôi đã cài đặt mô-đun javascript touch index.html
touch styles.scss
8 sẽ biên dịch biểu định kiểu touch index.html
touch styles.scss
9 cho chúng tôiGhi chú. Sass là tên và gói ban đầu cho SCSS phổ biến hơn
touch index.html
touch styles.scss
Tiếp theo, chúng tôi sẽ tạo các tệp cho html và css của chúng tôi. Trong
DOCTYPE html>
Parcel Setup
Title goes here
and text here
0 thêm vào như sauDOCTYPE html>
Parcel Setup
Title goes here
and text here
Parcel quản lý tất cả nội dung của chúng tôi và biên dịch scss cho chúng tôi, vì vậy tất cả những gì chúng tôi cần làm là nhập
DOCTYPE html>
Parcel Setup
Title goes here
and text here
1 như một biểu định kiểu thông thường
Trong
DOCTYPE html>
Parcel Setup
Title goes here
and text here
2 thêm vào như sau.container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
Tệp
touch index.html
touch styles.scss
9 này đang sử dụng các bộ chọn lồng nhau để đơn giản hóa các kiểu css. Biểu tượng DOCTYPE html>
Parcel Setup
Title goes here
and text here
4 đề cập đến tên của bộ chọn hiện tại, vì vậy mã này sẽ biên dịch CSS sautouch index.html
touch styles.scss
2Bạn có thể tự kiểm tra nó trong trình duyệt bằng lệnh terminal sau
touch index.html
touch styles.scss
3Thiết lập React [tạo-ứng dụng phản ứng]
Scss có thể được sử dụng trong dự án tạo-phản ứng-ứng dụng bằng cách đơn giản
- cài đặt phụ thuộc nhà phát triển
5DOCTYPE html> Parcel Setup Title goes here and text here
- cài đặt phụ thuộc nhà phát triển
- nhập tệp
9 vào các thành phần của bạntouch index.html touch styles.scss
- nhập tệp
Để thiết lập dự án SCSS React mới, hãy nhập các lệnh sau [riêng]
touch index.html
touch styles.scss
6create-react-app sẽ xây dựng ứng dụng React với biểu định kiểu
DOCTYPE html>
Parcel Setup
Title goes here
and text here
7 mà chúng ta có thể chỉ cần thay đổi thành touch index.html
touch styles.scss
9
Đảm bảo cũng thay đổi câu lệnh
DOCTYPE html>
Parcel Setup
Title goes here
and text here
9 trong tệp .container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
0touch index.html
touch styles.scss
1Vì chúng tôi luôn có thể viết css bên trong các tệp scss của mình, hãy khởi động ứng dụng để bắt đầu sử dụng SCSS
touch index.html
touch styles.scss
2Bạn có thể kiểm tra ứng dụng bằng cách thêm SCSS sau vào
.container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
1touch index.html
touch styles.scss
4Ở đây chúng tôi đang sử dụng các biến
.container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
2 bằng cách khai báo chúng sau dấu .container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
3. Các biến có thể được đặt một lần và được sử dụng trong nhiều bộ chọn [và tệp] để cho phép thay đổi quy mô lớn nhanh chóng
Hướng dẫn tạo ứng dụng phản ứng này có nhiều chi tiết hơn về cách thức hoạt động của công cụ
Thiết lập thư mục SCSS
SCSS cũng cho phép nhập các tệp
touch index.html
touch styles.scss
9 ở các định dạng khác. tập tin scss. Điều này cho phép chúng tôi tạo một tệp .container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
5 nhập tất cả các cá nhân của chúng tôi. tập tin scss. Chúng tôi sẽ tạo một số tệp touch index.html
touch styles.scss
9 khác nhau để xử lý các chức năng hoặc tính năng nhất định trên trang của chúng tôi. Thiết lập này cho phép chúng tôi mở rộng quy mô ứng dụng của mình trong khi vẫn làm cho biểu định kiểu của chúng tôi có thể đọc và truy cập được. Thêm các thư mục và tệp sau vào ứng dụng của bạn ngay bây giờtouch index.html
touch styles.scss
0Trong thiết lập thư mục SCSS sau đây, chúng tôi sẽ sử dụng
.container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
5 làm biểu định kiểu chính và nhập nó vào ứng dụng React của chúng tôi [trong cả hai ứng dụng. js hoặc chỉ mục. js]. Thêm các mục nhập sau vào .container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
5 ngay bây giờtouch index.html
touch styles.scss
1Khi bạn tạo các tính năng hoặc thành phần mới, hãy thêm các mục nhập bổ sung ở cuối trang này. Mỗi tệp được nhập theo thứ tự, vì vậy chúng tôi sẽ đảm bảo nhập
.container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
9 và touch index.html
touch styles.scss
20 trướcHỗn hợp truy vấn phương tiện
Chúng tôi có thể đơn giản hóa các truy vấn phương tiện của mình thành các thiết bị cụ thể làm ví dụ mixin. Thêm phần sau vào
.container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
9touch index.html
touch styles.scss
2Giờ đây, chúng tôi có quyền truy cập vào các truy vấn phương tiện trên điện thoại, tab-port, tab-land và big-desktop nếu chúng tôi muốn phát triển cụ thể cho bên ngoài 1040px-1500px [trong trường hợp này]. Vui lòng thay đổi các giá trị này cho bất kỳ điểm ngắt nào có ý nghĩa nhất đối với bạn. Cũng có thể thêm các điểm dừng bổ sung bằng cách sử dụng cùng một mẫu
Để sử dụng các mixin điểm dừng này, bên trong bất kỳ bộ chọn CSS nào, hãy thêm phần sau
touch index.html
touch styles.scss
3Cú pháp này,
touch index.html
touch styles.scss
22 có thể được sử dụng với các mixin trên. Thêm tham chiếu này vào các truy vấn phương tiện mà chúng tôi thiết lập trong touch index.html
touch styles.scss
23Danh sách biến
Biểu định kiểu
touch index.html
touch styles.scss
20 sẽ bao gồm tất cả các biến của chúng tôi về màu sắc, phông chữ và kích cỡ. Ví dụ: bao gồm đoạn mã sau trong tệp touch index.html
touch styles.scss
20 của bạntouch index.html
touch styles.scss
4Mỗi biến bạn đưa vào đây sẽ có sẵn trong các biểu định kiểu được tải sau nó [mọi thứ trừ
.container {
& h1 {
color: green;
}
&__text {
color: blue;
}
}
9]. Bằng cách bao gồm các biến này trước tiên, chúng tôi có thể thiết lập một vị trí duy nhất để lưu trữ các giá trị màu sắc, kích thước và phông chữ. Điều này cho phép chúng tôi điều chỉnh giao diện trang web của mình một cách nhanh chóng và hoàn toàn bằng cách thay đổi các biến được tham chiếu trên toàn trangKiểu cơ sở
Gọi tệp này theo ý thích của bạn, ở đây chúng tôi sẽ bao gồm các kiểu chung mà chúng tôi muốn đưa vào trang của mình. Thêm phần sau vào
touch index.html
touch styles.scss
27touch index.html
touch styles.scss
5Phong cách hoạt hình
Cuối cùng, trong tệp
touch index.html
touch styles.scss
28, chúng tôi có thể bao gồm bất kỳ hoạt ảnh khung hình chính nào mà chúng tôi muốn sử dụngtouch index.html
touch styles.scss
6Thành phần bổ sung
Trong ví dụ này, chúng tôi cũng thiết lập các tệp
touch index.html
touch styles.scss
29 và touch index.html
touch styles.scss
30. Sử dụng các tệp này [và cú pháp] để thêm biểu định kiểu dành riêng cho tính năng khi bạn tạo chúng. Bằng cách tách biệt càng nhiều chức năng cốt lõi càng tốt, SCSS quản lý để đơn giản hóa việc thiết lập và duy trì các kiểu