SCSS
1.嵌套规则
1.1. 内层的样式将它外层的选择器作为父选择器
p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
1.2. 可以用 &
代表嵌套规则外层的父选择器
编译后的 CSS 文件中 &
将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
1.3.属性嵌套
如 font-family, font-size, font-weight
都以 font
作为属性的命名空间
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
2.SassScript
2.1.变量
变量以美元符号开头,赋值方法与 CSS 属性的写法一样
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量)
将局部变量转换为全局变量可以添加 !global
声明
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
3.导入Sass文件
3.1.全部导入
@import
"sidebar";这条命令将把sidebar.scss
文件中所有样式添加到当前样式表中
3.2.使用SASS部分文件
sass
局部文件的文件名以下划线开头。这样,sass
就不会在编译时单独编译这个文件输出css
,而只把这个文件用作导入
当你@import
一个局部文件时,还可以不写文件的全名
导入_night-sky.scss
这个局部文件里的变量,你只需在样式表中写@import
"night-sky"
3.3.默认变量值
!default
用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
3.4.嵌套导入
sass
允许@import
命令写在css
规则内
.blue-theme {@import "blue-theme"}
3.5.原生的CSS导入
把原始的css
文件改名为.scss
后缀,即可直接导入
4.静默注释
静默注释(//),其内容不会出现在生成的css
文件中
当注释出现在原生css
不允许的地方,如在css
属性或选择器中,sass
将不知如何将其生成到对应css
文件中的相应位置,于是这些注释被抹掉
body {
color /* 这块注释内容不会出现在生成的css中 */: #333;
padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}
5.混合器
5.1.混合器使用
用于大段大段的重用样式的代码
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
5.2.混合器传参
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
6.选择器继承精简css
不仅会继承.error自身所有样式,与其.error相关的组合器样式也都会被继承
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}