变量
变量定义
$变量名: 变量值;
$color: red;
变量使用
$变量名
$变量名不能使用在CSS选择器和属性名中
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
嵌套规则
普通嵌套
- 类似于大盒套小盒 大盒可以同时装小盒和东西
- 大盒相当于父级
- 小盒相当于子级
- 东西相当于父级本身的属性
- 父级的属性会单独生成CSS样式
SCSS源码
@charset "UTF-8";
#content {
background: red;
article {
font-size: 12px;
h1 {
font-size:24px;
}
p {
line-height:24px;
}
}
aside {
background: green;
}
}
CSS源码
#content {
background: red; }
#content article {
font-size: 12px; }
#content article h1 {
font-size: 24px; }
#content article p {
line-height: 24px; }
#content aside {
background: green; }
父选择器嵌套 &
-
伪类选择器
SCSS源码
@charset "UTF-8"; #content { background: red; article { a { color:white; } &:hover { text-decoration:underline; } } }CSS源码
#content { background: red; } #content article a { color: white; } #content article:hover { text-decoration: underline; }
-
后置 & 父选择器之前添加选择器
SCSS源码
@charset "UTF-8"; #content { background: red; article { color:green; } body & { font-size: 12px; } }CSS源码
#content { background: red; } #content article { color: green; } body #content { font-size: 12px; }
群组选择器嵌套
SCSS源码
@charset "UTF-8";
nav, aside {
a {
color: blue
}
}
CSS源码
nav a, aside a {
color: blue; }
组合选择器嵌套
- > 子选择器
- + 同层相邻组合选择器
- ~ 同层全体组合选择器
属性嵌套
SCSS源码
@charset "UTF-8";
nav {
//属性嵌套
border: {
style: solid;
width: 1px;
radius: 8px;
};
//指明例外规则
margin:0 {
bottom: 0;
};
}
CSS源码
nav {
border-style: solid;
border-width: 1px;
border-radius: 8px;
margin: 0;
margin-bottom: 0; }
导入SASS文件
@import
SCSS源码
@import "路径";
默认变量值
- $变量名: 变量值 !default;
SCSS源码
@charset "UTF-8";
$box-width: 400px !default;
.box {
width: $box-width;
}
CSS源码
.box {
width: 400px; }
嵌套导入
SCSS源码
//width.scss
$box-width: 400px !default;
//theme.scss
aside {
background: blue;
color: white;
}
@charset "UTF-8";
@import "width";
.box {
@import "theme";
width: $box-width;
}
CSS源码
.box {
width: 400px; }
.box aside {
background: blue;
color: white; }
以上是两种导入方式
原生CSS导入
- CSS@import
注释
// 这种注释内容不会出现在生成的css文件中
/* 这种注释内容会出现在生成的css文件中 */
混合器
- 混合器实际大段样式重用
- 混合器类似函数
- 混合器主要用于样式展示层的重用
混合器定义@mixin
SCSS源码
@mixin 混合器名称 {
......
}
混合器的使用@include
SCSS源码
@charset "UTF-8";
@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;
}
CSS源码
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
使用混合器的场景
利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。
混合器中的CSS规则
SCSS源码
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
CSS源码
ul.plain {
color: #444;
list-style: none; }
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px; }
混合器传参
SCSS源码
@charset "UTF-8";
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
//必须按顺序调用
a {
@include link-colors(blue, red, green);
}
//不必按顺序调用
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
CSS源码
a {
color: blue; }
a:hover {
color: red; }
a:visited {
color: green; }
a {
color: blue; }
a:hover {
color: red; }
a:visited {
color: green; }
混合器参数默认值
SCSS源码
@charset "UTF-8";
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(red);
}
CSS源码
a {
color: red; }
a:hover {
color: red; }
a:visited {
color: red; }
继承 @extend
继承占位符 %
混合器/继承/占位符区别
1040067-20161019114010342-630734152.jpg
网友评论