sass的@规则

Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例：

.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } }

编译出来：

.sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } }

@media 也可以嵌套 @media：

@media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } }

此时编译出来：

@media screen and (orientation: landscape) { .sidebar { width: 500px; } }

在使用 @media 时，还可以使用插件#{}:

$media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .sidebar { width: 500px; } }

编译出来的 CSS：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) { .sidebar { width: 500px; } }

Sass 中的 @extend 是用来扩展选择器或占位符。比如：

.error {   border: 1px #f00;   background-color: #fdd; } .error.intrusion {   background-image: url("/image/hacked.png"); } .seriousError {   @extend .error;   border-width: 3px; }

被编译为：

.error, .seriousError {   border: 1px #f00;   background-color: #fdd; }  .error.intrusion, .seriousError.intrusion {   background-image: url("/image/hacked.png"); }  .seriousError {   border-width: 3px; }

详细的可以回顾前面介绍的继承样式部分。

扩展选择器：

@extend 不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]，例如：

.hoverlink {   @extend a:hover; } a:hover {   text-decoration: underline; }

编译出来：

a:hover, .hoverlink {   text-decoration: underline; }

再来看一个复杂点的：

.hoverlink {   @extend a:hover; } .comment a.user:hover {   font-weight: bold; }

编译出来的CSS

.comment a.user:hover, .comment .user.hoverlink {   font-weight: bold; }

多个扩展

所设某个样式要继承多个地方的样式，那么可以使用 @extend 来继承多个选择器或占位符的样式，如：

.error {   border: 1px #f00;   background-color: #fdd; } .attention {   font-size: 3em;   background-color: #ff0; } .seriousError {   @extend .error;   @extend .attention;   border-width: 3px; }

编译出来的CSS

.error, .seriousError {   border: 1px #f00;   background-color: #fdd; }  .attention, .seriousError {   font-size: 3em;   background-color: #ff0; }  .seriousError {   border-width: 3px; }

扩展单一选择器

前面我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。比如下面的代码：

#context a%extreme {   color: blue;   font-weight: bold;   font-size: 2em; }

这段代码在不调用之前不产生任何代码，只有能过@extend调用之后才生成代码：

.notice {   @extend %extreme; }

编译出来的CSS

#context a.notice {   color: blue;   font-weight: bold;   font-size: 2em; }