Chỉ thị @media trong SASS

Trong SASS, chỉ thị @media được sử dụng giống như quy tắc tương ứng trong CSS. Và nó cũng có thể được lồng trực tiếp vào tất cả các quy tắc CSS. Cần lưu ý rằng, trong trường hợp chúng ta lồng chỉ thị @media vào một quy tắc CSS, sau khi biên dịch nó sẽ được đưa lên trên đầu các bảng định kiểu, còn các bộ chọn, nơi đặt chỉ thị sẽ được chuyển vào bên trong @media. Từ đó, có thể thêm các quy tắc vào chỉ thị @media mà không cần lặp lại bộ chọn hoặc làm gián đoạn luồng của bảng định kiểu.

Hãy xem xét ví dụ:

style.scss.navbar {
  width: 400px;
  @media picture and (orientation: portrait) {
    width: 300px;
    height: auto;
  }
}

Bây giờ hãy xem kết quả biên dịch:

style.css.navbar {
  width: 400px; 
}
@media picture and (orientation: portrait) {
  .navbar {
    width: 300px;
    height: auto; 
  } 
}

Ngoài ra còn có khả năng lồng các truy vấn @media vào nhau, và sau khi biên dịch chúng sẽ được kết hợp bằng toán tử and:

style.scss@media div {
  .picture {
    @media (orientation: portrait) {
      width: 200px;
    }
  }
}

Đây là những gì chúng ta sẽ thấy sau khi biên dịch:

style.css@media div and (orientation: portrait) {
  .picture {
    width: 200px; 
  } 
}

Một đặc điểm khác của chỉ thị @media là nó có thể được sử dụng để truyền các biến, hàm và toán tử:

style.scss$media: style;
$feature: -webkit-max-device;
$value: 3.0;
    
@media #{$media} and ($feature: $value) {
  div {
    color: red;
  }
}

Và trong tệp style.css, chúng ta nhận được mã sau:

style.css@media style and (-webkit-max-device: 3) {
    div {
      color: red; 
    } 
}

styles.scss.active-link {
  color: blue;
  @media content {
    font-size: 14px;
    text-decoration: underline;
  }
}

styles.scss@media p {
  #product-card {
    @media (font-family: Arial) {
      font-size: 12px;
    }
  }
  #product-card-title {
    @media (font-family: Arial) {
      font-size: 14px;
      font-weight: bold;
    }
  }
}

styles.scss$var: link;
$font: font-size;
$size: 10px;
    
@media #{$var} and ($font: $size) {
  .block {
    color: red;
  }
}