# sass
Notes about sass&compass video: https://www.imooc.com/video/7063
# 变量
/*定义： */
$headline: Arial, Verdana, Helvetica, sans-serif;
/*使用： */
.main-sec {
font-family: $headline;
}
1
2
3
4
5
6
2
3
4
5
6
# 局部文件
_variables.scss
宿主文件可以使用 @import 'variables' 引入局部文件；
# 父类选择器
a {
&:hover {
color: blue;
}
}
1
2
3
4
5
2
3
4
5
# 属性嵌套
.main-sec {
font: {
family: $main-sec-ff;
size: 16px;
}
}
1
2
3
4
5
6
2
3
4
5
6
# 可重用代码块 mixin
@minx col($width: 50%) {
width: $width;
float: left;
}
/*调用方式： */
.webdemo {
@include col(25%);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 代码块继承
.anotherDemo{ @extend .webdemo; border: solid 1px #fff; }
- @extend 不能继承选择器序列；
- 使用%,用来构建只用来继承的选择器；
$webdemo {
margin: 10px;
}
.anotherDemo {
@extend $webdemo;
border: solid 1px #fff;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# sass 中的@media
| phone | tablets | medium devices | large devices |
|---|---|---|---|
| <768px | >=768px | >=992px | >=1200px |
@mixin col-sm($width: 50%) {
@media (min-width: 768px) {
width: $width;
float: left;
}
}
1
2
3
4
5
6
2
3
4
5
6
css 渲染时是从右向左查找元素，因此应该给元素添加类名 @root 可以嵌套书写，顶层输出样式
# compass
# Normalize.css
浏览器样式重置
# How to use sass simply
- install ruby;
- install sass;
- sass --watch sourceDirectory:distDirectory --style outputStyle e.g.: sass --watch scss:css --style expanded