scss基本使用及操作函数

操作函数

1、for循环

• @for … from … through

 @for $var from <start> through <end> // 范围包括<start>和<end>的值

• 1

• @for … from … to

@for $var from <start> to <end> // 范围包括<start>,不包括<end>的值

• 1

• 获取数组中第i项的值 nth($arr, $i)
• 获取指定键值 map-get(nth($arr, $i), $key)

1.  
   /*** scss ***/
2.  
   $arr: (
3.  
   (theme: dark, size: 40px),
4.  
   (theme: light, size: 32px)
5.  
   );
6.  
   @for $i from 1 through length($arr) { // 遍历数组
7.  
   $item: nth($arr, $i); // 获取数组中第i项的值
8.  
    
9.  
   .#{map-get($item, theme)} {
10.  
    map-get($item, size); // 获取指定键值
11.  
    height: map-get($item, size);
12.  
    }
13.  
    }
14.  
     
15.  
    /*** css ***/
16.  
    .dark {
17.  
    40px;
18.  
    height: 40px;
19.  
    }
20.  
    .light {
21.  
    32px;
22.  
    height: 32px;
23.  
    }

• 1

2、each

• @each $var in <list or map>

1.  
   /*** scss ***/
2.  
   $name: "aa", "bb"; //注意数组list的写法
3.  
   @each $i in $name {
4.  
   div.#{$i} {
5.  
   width: 100px;
6.  
   }
7.  
   }
8.  
    
9.  
   $name2: (name1: "span", name2: "div"); //注意对象map的写法
10.  
    @each $i in $name2 {
11.  
    .#{$i} {
12.  
    width: 20px;
13.  
    }
14.  
    }
15.  
     
16.  
    $name3: (name11: 2, name22: 3); //注意对象map的写法
17.  
    @each $key, $value in $name3 {
18.  
    .#{$key} {
19.  
    width: 10px * $value;
20.  
    }
21.  
    }
22.  
     
23.  
    /*** css ***/
24.  
    div.aa {
25.  
    width: 100px;
26.  
    }
27.  
    div.bb {
28.  
    width: 100px;
29.  
    }
30.  
     
31.  
    .name1 span {
32.  
    width: 20px;
33.  
    }
34.  
    .name2 div {
35.  
    width: 20px;
36.  
    }
37.  
     
38.  
    .name11 {
39.  
    width: 20px;
40.  
    }
41.  
    .name22 {
42.  
    width: 30px;
43.  
    }

3、while

1.  
   /*** scss ***/
2.  
   $i: 2;
3.  
   @while $i > 0 {
4.  
   .color#{$i} {
5.  
   color: #222 * $i;
6.  
   }
7.  
   $i:$i - 1; //注意: 不能写成$i:$i-1,因为会被当成字符串
8.  
   }
9.  
    
10.  
    /*** css ***/
11.  
    .color2 {
12.  
    color: #444444;
13.  
    }
14.  
    .color1 {
15.  
    color: #222222;
16.  
    }

• 1
• 2
• 3

4、if

• if … if …
• if … else if …

• if … else if … else …

  注：不支持 if … else …

1.  
   /*** scss ***/
2.  
   $width1: 100px;
3.  
   $width2: 200px;
4.  
   div {
5.  
   @if $width2 > $width1 {
6.  
   $width1;
7.  
   }
8.  
   }

5、extend

• 继承目标选择器的所有相关样式
• 用!optional直接跳过空样式, 防止继承不存在的样式出错

1.  
   /*** scss ***/
2.  
   .aa {
3.  
   margin: 0 auto;
4.  
   }
5.  
   div .aa {
6.  
   color: red;
7.  
   }
8.  
   .aa p {
9.  
   margin: 100px;
10.  
    }
11.  
     
12.  
    .bb {
13.  
    @extend .aa;
14.  
    }
15.  
    .cc {
16.  
    @extend .dd!optional; // 用optional,防止.dd不存在而导致的编译报错
17.  
    }
18.  
     
19.  
    /*** css ***/
20.  
    .aa, .bb {
21.  
    margin: 0 auto;
22.  
    }
23.  
    div .aa, div .bb {
24.  
    color: red;
25.  
    }
26.  
    .aa p, .bb p {
27.  
    margin: 100px;
28.  
    }

6、mixin

• 不带参数

1.  
   /*** scss ***/
2.  
   @mixin aa {
3.  
   margin: 10px;
4.  
   }
5.  
   .bb {
6.  
   @include aa;
7.  
   }
8.  
    
9.  
   /*** css ***/
10.  
    .bb {
11.  
    margin: 10px;
12.  
    }

• 带参数：参数为数组

1.  
   /*** scss ***/
2.  
   $margin: 100px;
3.  
   $left: 10px;
4.  
   @mixin aa($left, $margin) {
5.  
   margin: $margin;
6.  
   left: $left;
7.  
   }
8.  
   .bb {
9.  
   @include aa($left, $margin);
10.  
    }
11.  
     
12.  
    /*** css ***/
13.  
    .bb {
14.  
    margin: 100px;
15.  
    left: 10px;
16.  
    }

• 1
• 2

• 带参数：参数为对象
  接收传递的参数必须是对象相对应key,同时需要用…传递参数

1.  
   /*** scss ***/
2.  
   $map: (left: 10px, 100px);
3.  
   @mixin aa($left, $width) { // 接收参数为key值
4.  
   left: $left;
5.  
   $width;
6.  
   }
7.  
   div {
8.  
   @include aa($map...); // 传递参数为对象名+...
9.  
   }
10.  
     
11.  
    /*** css ***/
12.  
    div {
13.  
    left: 10px;
14.  
    100px;
15.  
    }

• 1

• 默认参数

@mixin aa($left: 10px){}  // 不传参数的话就用默认参数

• 1

• 不定参数

1.  
   /*** scss ***/
2.  
   @mixin box-shadow($shadows...) { //不定参数,用...
3.  
   -moz-box-shadow: $shadows;
4.  
   -webkit-box-shadow: $shadows;
5.  
   box-shadow: $shadows;
6.  
   }
7.  
   .shadows {
8.  
   @include box-shadow(2px 2px 2px #eee);
9.  
   }
10.  
     
11.  
    /*** css ***/
12.  
    .shadows {
13.  
    -moz-box-shadow: 2px 2px 2px #eee;
14.  
    -webkit-box-shadow: 2px 2px 2px #eee;
15.  
    box-shadow: 2px 2px 2px #eee;
16.  
    }

• 1

7、function

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

• 1

基本使用

1、定义变量及变量使用

• 常规使用 $var
• 拼字符串 #{$var}
• 用于计算 $var + $var

1.  
   /*** scss ***/
2.  
   $ 1px;
3.  
   $width2: 2px;
4.  
   $pos: bottom;
5.  
    
6.  
   .aa {
7.  
   $width; // 常规使用
8.  
   border-#{$pos}: 1px solid red; // 拼字符串
9.  
   }
10.  
    .bb {
11.  
    $width + $width2; // 用于计算
12.  
    }
13.  
     
14.  
    /*** css ***/
15.  
    .aa {
16.  
    1px;
17.  
    border-bottom: 1px solid red;
18.  
    }
19.  
    .bb {
20.  
    3px;
21.  
    }

2、嵌套

• 选择器嵌套
• 属性嵌套

1.  
   // 选择器嵌套
2.  
   div{
3.  
   color: red;
4.  
   p {
5.  
   color: green;
6.  
   }
7.  
   &:hover{
8.  
   color: blue;
9.  
   }
10.  
    }
11.  
     
12.  
    // 属性嵌套
13.  
    .div{
14.  
    //注：嵌套属性后面必须写冒号 如：border：
15.  
    border: {
16.  
    style: solid;
17.  
    left: {
18.  
    4px;
19.  
    color: #888;
20.  
    }
21.  
    }
22.  
    }

• 1

3、 继承

SASS允许一个选择器，继承另一个选择器。 @extend 要继承的选择器

1.  
   .class1{
2.  
   border: 1px solid #ddd;
3.  
   }
4.  
   .class2{
5.  
   @extend .class1;
6.  
   color: #000;
7.  
   }

• 1

4、 Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

1.  
   //使用@mixin 定义一个可重用的代码段
2.  
   @mixin left {
3.  
   float: left;
4.  
   margin-left: 10px;
5.  
   }
6.  
   //使用@include 调用
7.  
   div{
8.  
   @include left;
9.  
   }

1

• 2

mixin的强大之处，在于可以指定参数和缺省值。使用的时候，根据需要加入参数。

1.  
   @mixin left($value: 10px) {
2.  
   　　float: left;
3.  
   　　margin-right: $value;
4.  
   }
5.  
   div {
6.  
   　　@include left(20px);
7.  
   }

• 1

5、颜色函数

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

• 1
• 2
• 3
• 4

6、注释

SASS共有两种注释风格。 标准的CSS注释 /* comment */ ，会保留到编译后的文件。 单行注释 //
comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

7、插入文件

1.  
   @import "path/filename.scss";
2.  
   @import "foo.css";

• 1
• 2

8、编译风格

nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。

9、List（相当于js中的数组）

定义列表

1.  
   $list: 'item-1', 'item-2', 'item-3'; //（推荐）
2.  
    
3.  
   $list-space1: 'item-1' 'item-2' 'item-3';
4.  
   $list-space2: ('item-1' 'item-2' 'item-3');
5.  
   $list-space3: ('item-1', 'item-2', 'item-3');

• 1
• 2
• 3
• 4
• 5

注：1、在Scss中括号不是用来创建列表（除非是空的列表），而是用来做为分隔符
2、和CSS一样，只要没有特殊字符，列表项的引号是可以省略的

列表嵌套

1.  
   $list: (
2.  
   ('item-1.1', 'item-1.2', 'item-1.3'),
3.  
   ('item-2.1', 'item-2.2', 'item-2.3'),
4.  
   ('item-3.1', 'item-3.2', 'item-3.3')
5.  
   ); //（推荐）
6.  
    
7.  
   $list: 'item-1.1' 'item-1.2' 'item-1.3',
8.  
   'item-2.1' 'item-2.2' 'item-2.3',
9.  
   'item-3.1' 'item-3.2' 'item-3.3';

• 1
• 2

列表索引是从1开始

列表长度length($list)

获取列表项nth($list, 1)

10、Map（相当于js中的json）

1.  
   map: (
2.  
   (theme: dark, size: 40px),
3.  
   (theme: light, size: 32px)
4.  
   );

• 1
• 2
• 3
• 4

map-keys($map) 返回map里面所有的key(list)

map-values($map) 返回map里面所有的value(list)

map-get($map, key) 返回map里面指定key的value

转载于:https://www.cnblogs.com/Zting00/p/7497640.html

 

相关资源：vue项目中使用scss的方法步骤-其它代码类资源