基本使用
1、定义变量及变量使用
- 常规使用 $var
- 拼字符串 #{$var}
- 用于计算 $var + $var
$width: 1px;
$width2: 2px;
$pos: bottom;
.aa {
width: $width; // 常规使用
border-#{
$pos}: 1px solid red; // 拼字符串
}
.bb {
width: $width + $width2; // 用于计算
}
.aa {
width: 1px;
border-bottom: 1px solid red;
}
.bb {
width: 3px;
}
2、嵌套
// 选择器嵌套
div{
color: red;
p {
color: green;
}
&:hover{
color: blue;
}
}
// 属性嵌套
.div{
//注：嵌套属性后面必须写冒号 如：border：
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
}
}
3、 继承
- SASS允许一个选择器，继承另一个选择器。 @extend 要继承的选择器
.class1{
border: 1px solid #ddd;
}
.class2{
@extend .class1;
color: #000;
}
4、 Mixin
- Mixin有点像C语言的宏（macro），是可以重用的代码块。
//使用@mixin 定义一个可重用的代码段
@mixin left {
float: left;
margin-left: 10px;
}
//使用@include 调用
div{
@include left;
}
- mixin的强大之处，在于可以指定参数和缺省值。使用的时候，根据需要加入参数。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
5、颜色函数
lighten(#cc3, 10%); //颜色变浅
darken(#cc3, 10%); //颜色加深
grayscale(#cc3); //灰度
complement(#cc3); //反色
6、注释
SASS共有两种注释风格。 标准的CSS注释 ，会保留到编译后的文件。 单行注释 //
comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
7、插入文件
@import "path/filename.scss";
@import "foo.css";
8、编译风格
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
9、List（相当于js中的数组）
- 定义列表
- 注：1、在Scss中括号不是用来创建列表（除非是空的列表），而是用来做为分隔符
- 2、和CSS一样，只要没有特殊字符，列表项的引号是可以省略的
$list: 'item-1', 'item-2', 'item-3'; //（推荐）
$list-space1: 'item-1' 'item-2' 'item-3';
$list-space2: ('item-1' 'item-2' 'item-3');
$list-space3: ('item-1', 'item-2', 'item-3');
- 列表嵌套
- 列表索引是从1开始
- 列表长度length($list)
- 获取列表项nth($list, 1)
$list: (
('item-1.1', 'item-1.2', 'item-1.3'),
('item-2.1', 'item-2.2', 'item-2.3'),
('item-3.1', 'item-3.2', 'item-3.3')
); //（推荐）
$list: 'item-1.1' 'item-1.2' 'item-1.3',
'item-2.1' 'item-2.2' 'item-2.3',
'item-3.1' 'item-3.2' 'item-3.3';
10、Map（相当于js中的json）
- map-keys($map) 返回map里面所有的key(list)
- map-values($map) 返回map里面所有的value(list)
- map-get($map, key) 返回map里面指定key的value
map: (
(theme: dark, size: 40px),
(theme: light, size: 32px)
);
操作函数
1、for循环
@for $var from through // 范围包括和的值
@for $var from to // 范围包括,不包括的值
- 获取数组中第i项的值 nth($arr, $i)
- 获取指定键值 map-get(nth($arr, $i), $key)
$arr: (
(theme: dark, size: 40px),
(theme: light, size: 32px)
);
@for $i from 1 through length($arr) {
// 遍历数组
$item: nth($arr, $i); // 获取数组中第i项的值
.#{
map-get($item, theme)} {
width: map-get($item, size); // 获取指定键值
height: map-get($item, size);
}
}
.dark {
width: 40px;
height: 40px;
}
.light {
width: 32px;
height: 32px;
}
2、each
$name: "aa", "bb"; //注意数组list的写法
@each $i in $name {
div.#{
$i} {
width: 100px;
}
}
$name2: (name1: "span", name2: "div"); //注意对象map的写法
@each $i in $name2 {
.#{
$i} {
width: 20px;
}
}
$name3: (name11: 2, name22: 3); //注意对象map的写法
@each $key, $value in $name3 {
.#{
$key} {
width: 10px * $value;
}
}
div.aa {
width: 100px;
}
div.bb {
width: 100px;
}
.name1 span {
width: 20px;
}
.name2 div {
width: 20px;
}
.name11 {
width: 20px;
}
.name22 {
width: 30px;
}
3、while
$i: 2;
@while $i > 0 {
.color#{
$i} {
color: #222 * $i;
}
$i:$i - 1; //注意: 不能写成$i:$i-1,因为会被当成字符串
}
.color2 {
color: #444444;
}
.color1 {
color: #222222;
}
4、if
- if … if …
- if … else if …
- if … else if … else …
- 注：不支持 if … else …
$width1: 100px;
$width2: 200px;
div {
@if $width2 > $width1 {
width: $width1;
}
}
5、extend
- 继承目标选择器的所有相关样式
- 用!optional直接跳过空样式, 防止继承不存在的样式出错
.aa {
margin: 0 auto;
}
div .aa {
color: red;
}
.aa p {
margin: 100px;
}
.bb {
@extend .aa;
}
.cc {
@extend .dd!optional; // 用optional,防止.dd不存在而导致的编译报错
}
.aa, .bb {
margin: 0 auto;
}
div .aa, div .bb {
color: red;
}
.aa p, .bb p {
margin: 100px;
}
6、mixin
@mixin aa {
margin: 10px;
}
.bb {
@include aa;
}
.bb {
margin: 10px;
}
$margin: 100px;
$left: 10px;
@mixin aa($left, $margin) {
margin: $margin;
left: $left;
}
.bb {
@include aa($left, $margin);
}
.bb {
margin: 100px;
left: 10px;
}
- 带参数：参数为对象
- 接收传递的参数必须是对象相对应key,同时需要用…传递参数
$map: (left: 10px, width: 100px);
@mixin aa($left, $width) {
// 接收参数为key值
left: $left;
width: $width;
}
div {
@include aa($map...); // 传递参数为对象名+...
}
div {
left: 10px;
width: 100px;
}
@mixin aa($left: 10px){
} // 不传参数的话就用默认参数
@mixin box-shadow($shadows...) {
//不定参数,用...
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(2px 2px 2px #eee);
}
.shadows {
-moz-box-shadow: 2px 2px 2px #eee;
-webkit-box-shadow: 2px 2px 2px #eee;
box-shadow: 2px 2px 2px #eee;
}
7、function
$width: 20px;
@function fun($width) {
@return $width * 2;
}
div {
width: fun($width);
}
div {
width: 40px;
}
