前言
sass一个css后置处理器，减少了开发人员的输入，极大地提升了开发效率，所以有必要花点时间学习下， 上手很快，先来学习下基本的扩展内容
嵌套规则
内层的样式将它外层的选择器作为父选择器，看例子
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
父选择器 &
当需要直接使用嵌套外层的父选择器时，可使用 & 进行连接
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。 看例子
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
变量$
变量支持块级作用域， 嵌套规则内定义的变量只能在规则内使用(局部变量) , 若要转换为全局变量需添加 !global声明
$width: 20px; // 全局变量
#main {
$height: 50px !global; // 局部变量
width: $width
}
#sidebar {
height: $height;
}
插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
变量定义 !default
在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
@import
导入其他的scc文件，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入
// 单个文件导入
@import "foo.css";
// 多个文件导入
@import "rounded-corners", "text-shadow";
导入嵌套@import，可以将@import 嵌套进css或@media中，这样导入的样式只会出现在嵌套的层中
@extend
将一个选择器下的所有样式继承给另一个选择器
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
当需要定义一套样式并不是给某个元素，而只是通过@extend指令使用时，需要使用到@extend-Only选择器
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
@at-root
@at-root指令导致一条或多条规则在文档的根位置发出，而不是嵌套在它们的父选择器下面
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
网友评论