Kiến thức cơ bản về Sass - bài 8 Toán tử - Operators

Lượt xem: 2789

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