sass学习--sass的@规则（进阶篇）

SASS样式指南:http://blog.jobbole.com/40542/

1.@important:引入文件

//示例：@import "foo.css","foo2.scss";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);

若你有一个 SCSS 或 Sass 文件需要引入， 但又不希望它被编译为一个 CSS 文件， 这时，你就可在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后，照常引入这个文件，省略掉文件名前面的下划线。

例如有一个文件叫做 _colors.scss，引入的时候写为colors.scss。 这样就不会生成 _colors.css 文件了， 而且你还可以这样做：

//原文件名： _colors.scss@import "colors";//引入时候不用加下划线

注意：同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。

---

2.@media:嵌套css规则

sass 中的 @media 指令有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。

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

@media 也可以嵌套 @media：

@media screen {  .sidebar {    @media (orientation: landscape) {      width: 500px;    }  }}//css@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;       } }

---

3.@extend:拓展选择器或占位符

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

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

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

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

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

扩展单一选择器: %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。

#context a%extreme {  color: blue;  font-weight: bold;  font-size: 2em;}.notice {  @extend %extreme;//此时才会编译产生}

---

4.@at-root: 跳出根元素

当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。

.a {  color: red;  .b {    color: orange;    .c {      color: yellow;      @at-root .d {        color: green;      }    }  }  }//css.a {  color: red;}.a .b {  color: orange;}.a .b .c {  color: yellow;}.d {  color: green;}

---

5.@debug、@warn、@error:三者都适用于调试，类似于控制台输出信息

---

总结：主要整理了@import、@media、@extend、@at-root、@debug、@warn、@error等@规则。其中个人感觉实战用途比较多的可能是@media和@extend了吧！本人愚见，欢迎指教！