Skip to content

Dashboard

SASS P2 - CSS Extensions

Created by Admin

1. Nested Rules

Quy tắc này cho phép viết các CSS lồng vào nhau. Khi biên dịch, Sass sẽ cho ra tập tin CSS với đầy đủ các selector theo đúng chuẩn. Kiểu viết này giống với kiểu phân cấp trong HTML

Ta có HTML như sau

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass_P1</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Feature</a></li>
    <li><a href="#">Product</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
</html>

Đây là cách viết CSS thông thường mà mình hay viết

ul.menu {
  list-style: none;
}
ul.menu li {
  float: left;
}
ul.menu li a {
  text-decoration: none;
  color: #696969;
  font-size: 16px;
  padding: 6px 9px;
  margin: 0px 9px;
}

Còn đây là cách viết theo kiểu Nested Rules

ul.menu {
  list-style: none;
  li {
    float: left;
    a {
      text-decoration: none;
      color: #696969;
      font-size: 16px;
      padding: 6px 9px;
      margin: 0px 9px;
    }
  }
}

2. Referencing Parent Selectors

Sử dụng kí hiệu & đứng trước hiệu ứng, trạng thái mà chúng ta muốn. Ví dụ ta muốn khi hover vào thẻ a thì có gạch chân và đổi màu chữ

ul.menu {
  list-style: none;
  li {
    float: left;
    a {
      text-decoration: none;
      color: #696969;
      font-size: 16px;
      padding: 6px 9px;
      margin: 0px 9px;
      &:hover {
        text-decoration: underline;
        color: #999;                
      }
    }
  }
}

3. Nested Properties

Kiểu viết này sẽ gom các thuộc tính có cùng namespaces giống nhau, ví dụ như margin-left, margin-right, margin-top, margin-bottom...

ul.menu {
  list-style: none;
  li {
    float: left;
    a {
      text-decoration: none;
      color: #696969;
      font-size: 16px;
      padding: 6px 9px;
      margin: {
        top: 0;
        bottom: 0;
        left: 9px;
        right: 9px;
      }
    }
  }
}

Còn đây là lúc khi đã Compile ra file CSS

ul.menu {
  list-style: none;
}
ul.menu li {
  float: left;
}
ul.menu li a {
  text-decoration: none;
  color: #696969;
  font-size: 16px;
  padding: 6px 9px;
  margin: 0px 9px;
}

/*# sourceMappingURL=style.css.map */
Source: https://viblo.asia/p/sass-p2-css-extensions-L4x5xJBrZBM
SCSS SASS