Menu
×

Được chứng nhận

Ghi lại kiến ​​thức của bạn

Đăng nhập Đăng ký

Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn

Người tìm đường và việc học của tôi

Theo dõi tiến độ học tập của bạn tại Example.com.vn và thu thập phần thưởng

Nâng cấp

Trở thành người dùng PLUS và mở khóa các tính năng mạnh mẽ (không có quảng cáo, lưu trữ, hỗ trợ, ..)

Bắt đầu từ đâu

Bạn không chắc chắn muốn bắt đầu từ đâu? Đi theo con đường được hướng dẫn của chúng tôi

Trình chỉnh sửa mã (Dùng thử)

Với trình chỉnh sửa mã trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và xem kết quả trong trình duyệt của mình

Video

Tìm hiểu những điều cơ bản về HTML qua video hướng dẫn thú vị và hấp dẫn

Mẫu

Chúng tôi đã tạo một loạt mẫu trang web đáp ứng mà bạn có thể sử dụng - miễn phí!

Web hosting

Lưu trữ trang web của riêng bạn và chia sẻ nó với mọi người với Example.com.vn Spaces

Tạo một máy chủ

Tạo máy chủ của riêng bạn bằng Python, PHP, React.js, Node.js, Java, C#, v.v.

Làm thế nào để

Bộ sưu tập lớn các đoạn mã cho HTML, CSS và JavaScript

Khung CSS

Xây dựng các trang web nhanh và phản hồi bằng cách sử dụng khung W3.CSS miễn phí của chúng tôi

Thống kê trình duyệt

Đọc xu hướng dài hạn của việc sử dụng trình duyệt

Tốc độ gõ

Kiểm tra tốc độ đánh máy của bạn

Đào tạo AWS

Tìm hiểu dịch vụ web của Amazon

Bộ chọn màu

Sử dụng công cụ chọn màu của chúng tôi để tìm các màu RGB, HEX và HSL khác nhau. Bánh xe màu hình tròn thể hiện sự chuyển màu trong quang phổ

Trò chơi mã

Trò chơi mã hóa W3Schools! Giúp linh miêu thu thập nón thông Logo Lynx

Đặt mục tiêu

Nhận hành trình học tập được cá nhân hóa dựa trên các kỹ năng và mục tiêu hiện tại của bạn

Bản tin

Tham gia bản tin của chúng tôi và có quyền truy cập vào nội dung độc quyền mỗi tháng

Việc làm

Thuê những tài năng công nghệ hàng đầu. Hợp lý hóa quy trình tuyển dụng của bạn để có đội ngũ phù hợp hoàn hảo

Lớp học

Hãy liên hệ để sử dụng Example.com.vn Plus và các chứng chỉ với tư cách là một tổ chức giáo dục

×
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP CÁCH W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS AN NINH MẠNG DỮ LIỆU KHOA HỌC

Sass @mixin và @include


Sass Mixins

Lệnh @mixin cho phép bạn tạo mã CSS để sử dụng lại trên toàn bộ trang web.

Lệnh @include được tạo để cho phép bạn sử dụng (bao gồm) mixin.


Xác định một Mixin

Một mixin được xác định bằng lệnh @mixin .

Sass @mixin Cú pháp:

@mixin name {
  property : value ;
  property : value ;
  ...
}

Ví dụ sau tạo một mixin có tên "quan trọng-văn bản":

Cú pháp SCSS:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

Mẹo: Mẹo về dấu gạch nối và dấu gạch dưới trong Sass: Dấu gạch nối và dấu gạch dưới được coi là giống nhau. Điều này có nghĩa là @mixin important-text { } và @mixin important_text { } được coi là cùng một mixin!


Sử dụng Mixin

Lệnh @include được sử dụng để bao gồm một mixin.

Sass @include mixin Cú pháp:

selector {
  @include mixin-name ;
}

Vì vậy, để bao gồm mixin văn bản quan trọng được tạo ở trên:

Cú pháp SCSS:

.danger {
  @include important-text;
  background-color: green;
}

Bộ chuyển mã Sass sẽ chuyển đổi phần trên sang CSS thông thường:

Đầu ra CSS:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

Chạy ví dụ »

Một mixin cũng có thể bao gồm các mixin khác:

Cú pháp SCSS:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}



Truyền biến cho Mixin

Mixins chấp nhận đối số. Bằng cách này, bạn có thể chuyển các biến tới một mixin.

Đây là cách xác định một mixin với các đối số:

Cú pháp SCSS:

/* Define mixin with two arguments */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
}

Lưu ý rằng các đối số được đặt làm biến và sau đó được sử dụng làm giá trị (màu sắc và chiều rộng) của thuộc tính đường viền.

CSS sau khi biên dịch sẽ có dạng như sau:

Đầu ra CSS:

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

Chạy ví dụ »


Giá trị mặc định cho Mixin

Cũng có thể xác định giá trị mặc định cho các biến mixin:

Cú pháp SCSS:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

Sau đó, bạn chỉ cần chỉ định các giá trị thay đổi khi bạn đưa mixin vào:

Cú pháp SCSS:

.myTips {
  @include bordered($color: orange);
}


Sử dụng Mixin cho tiền tố nhà cung cấp

Một cách sử dụng tốt khác của mixin là dành cho tiền tố của nhà cung cấp.

Đây là một ví dụ cho việc chuyển đổi:

Cú pháp SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

CSS sau khi biên dịch sẽ có dạng như sau:

Đầu ra CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}


×

Liên hệ bán hàng

Nếu bạn muốn sử dụng dịch vụ của Example.com.vn với tư cách là một tổ chức giáo dục, nhóm hoặc doanh nghiệp, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Báo cáo lỗi

Nếu bạn muốn báo cáo lỗi hoặc nếu bạn muốn đưa ra đề xuất, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Example.com.vn được tối ưu hóa cho việc học tập và đào tạo. Các ví dụ có thể được đơn giản hóa để cải thiện khả năng đọc và học. Các hướng dẫn, tài liệu tham khảo và ví dụ liên tục được xem xét để tránh sai sót, nhưng chúng tôi không thể đảm bảo tính chính xác hoàn toàn của mọi nội dung. Khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng , chính sách cookie và quyền riêng tư của chúng tôi.

Bản quyền 1999-2024 của Refsnes Data. Đã đăng ký Bản quyền. Example.com.vn được cung cấp bởi W3.CSS .