Kiến thức cơ bản về Sass - bài 8 Toán tử - Operators
Lượt xem: 2742
Toán tử - Operators
Làm toán trong CSS của bạn rất hữu ích. Sass có một số toán tử toán học tiêu chuẩn như +, -, *, / và%.
Trong ví dụ của chúng tôi, chúng tôi sẽ thực hiện một số phép toán đơn giản để tính chiều rộng cho một aside & article;
Cú pháp SASS
.container
width: 100%
article[role="main"]
float: left
width: 600px / 960px * 100%
aside[role="complementary"]
float: right
width: 300px / 960px * 100%
Cú pháp SCSS
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
Đầu ra CSS
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
Chúng tôi đã tạo ra một lưới dễ dàng rất đơn giản dựa trên 960px. Các thao tác trong Sass cho phép chúng tôi thực hiện một số thứ như lấy giá trị pixel và chuyển đổi chúng thành tỷ lệ phần trăm mà không gặp nhiều rắc rối.
Nguồn sass-lang.com