支持 CSS 规则
Sass支持所有属于CSS本身的规则。为了保持灵活性并与未来版本的 CSS 向前兼容，Sass 提供了基本支持，默认情况下几乎涵盖了所有 CSS 规则。CSS 规则写为@<name><value>，@<name>{…}，或@<name><value>{…}。名称必须是标识符，值（如果存在）可以是几乎任何东西。名称和值都可以包含插值。
@namespace svg url(http://www.w3.org/2000/svg);
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
}
如果 CSS AT 规则嵌套在样式规则中，则两者会自动交换位置，以便 AT 规则位于 CSS 输出的顶层并且样式规则位于其中。这使得添加条件样式变得容易，而无需重写样式规则的选择器。
| scss 语句 | css 语句 |
|---|---|
.print-only {
display: none;
| .print-only {
display: none;
}
@media print {
.print-only {
display: block;
}
}
|
@media
该
| scss 语句 | css 语句 |
|---|---|
$layout-breakpoint-small: 960px;
@media (min-width: $layout-breakpoint-small) {
.hide-extra-small {
display: none;
}
}
| @media (min-width: 960px) {
.hide-extra-small {
display: none;
}
}
|
在可能的情况下，Sass 还将合并相互嵌套的媒体查询，以便更轻松地支持尚未原生支持嵌套
| scss 语句 | css 语句 |
|---|---|
@media (hover: hover) {
.button:hover {
border: 2px solid black;
@media (color) {
border-color: #036;
}
}
}
| @media (hover: hover) {
.button:hover {
border: 2px solid black;
}
}
@media (hover: hover) and (color) {
.button:hover {
border-color: #036;
}
}
|
@supports
该
| scss 语句 | css 语句 |
|---|---|
@mixin sticky-position {
position: fixed;
@supports (position: sticky) {
position: sticky;
}
}
.banner {
@include sticky-position;
}
| .banner {
position: fixed;
}
@supports (position: sticky) {
.banner {
position: sticky;
}
}
|
@keyframes
该<number>%、from或to），而不是普通的选择器。
| scss 语句 | css 语句 |
|---|---|
| @keyframes slide-in {
from {
margin-left: 100%;
width: 300%;
}
70% {
margin-left: 90%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
|