Scss常用操作

Scss常用操作

十月 31, 2018

Scss常用到的一些函数及操作。

变量声明及使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*** scss ***/
$width: 1px;
$width2: 2px;
$pos: bottom;

.aa {
    width: $width;  // 常规使用
    border-#{$pos}: 1px solid red;  // 拼字符串
}
.bb {
    width: $width + $width2;  // 用于计算
}

/*** css ***/
.aa {
  width: 1px;
  border-bottom: 1px solid red;
}
.bb {
  width: 3px;
}

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 选择器嵌套
div{  
    color: red;
    p {
    color: green;
    }
    &:hover{
        color: blue;
    }
}

// 属性嵌套
.div{  
//注：嵌套属性后面必须写冒号 如：border：
  border: {    
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
  }
}

颜色函数

1
2
3
4
lighten(#cc3, 10%);  //颜色变浅
darken(#cc3, 10%);   //颜色加深
grayscale(#cc3);     //灰度
complement(#cc3);    //反色

extend

继承目标选择器的所有样式（!optional防止空样式编译报错）

1
2
3
4
5
6
.margin-top-10 {
    margin-top: 10px;
}
.container {
    @extend .margin-top-10!optional
}

mixin

  • 不带参数
1
2
3
4
5
6
@mixin margin-top-10 {
    margin-top: 10px;
}
.margin-top-10 {
    @include margin-top-10;
}
  • 带参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*** 参数为数组 ***/
$margin: 10px;
$border: none;
@mixin aa($margin, $border) {
    margin: $margin;
    border: $border;
}
.bb {
    @include aa($margin, $border);
}
/*** 参数为对象 ***/
$map: (left: 10px, border: none);
@mixin cc($left, $border) {
    left: $left;
    border: $border;
}
.dd {
    @include cc($map...);
}
/*** 默认参数 ***/
@mixin ee($left: 10px) {
    left: $left;
}
.ff {
    @include ee();
}

function

1
2
3
4
5
6
7
8
9
10
11
12
13
/*** scss ***/
$width: 20px;
@function fun($width) {
    @return $width * 2;
}
div {
    width: fun($width);
}

/*** css ***/
div {
  width: 40px;
}