scss基本使用及操作函数

操作函数

1、for循环

• @for … from … through

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

• @for … from … to

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

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

/*** scss ***/
$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)} {
     map-get($item, size);  // 获取指定键值
    height: map-get($item, size);
  }
}

/*** css ***/
.dark {
   40px;
  height: 40px;
}
.light {
   32px;
  height: 32px;
}

2、each

• @each $var in <list or map>

/*** scss ***/
$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;
    }
}

/*** css ***/
div.aa {
  width: 100px;
}
div.bb {
  width: 100px;
}

.name1 span {
  width: 20px;
}
.name2 div {
  width: 20px;
}

.name11 {
  width: 20px;
}
.name22 {
  width: 30px;
}

3、while

/*** scss ***/
$i: 2;
@while $i > 0 {
    .color#{$i} {
        color: #222 * $i;
    }
    $i:$i - 1; //注意: 不能写成$i:$i-1,因为会被当成字符串
}

/*** css ***/
.color2 {
  color: #444444;
}
.color1 {
  color: #222222;
}

4、if

• if … if …
• if … else if …

• if … else if … else …

  注：不支持 if … else …

/*** scss ***/
$width1: 100px;
$width2: 200px;
div {
    @if $width2 > $width1 {
         $width1;
    }
}

5、extend

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

/*** scss ***/
.aa {
    margin: 0 auto;
}
div .aa {
    color: red;
}
.aa p {
    margin: 100px;
}

.bb {
    @extend .aa;
}
.cc {
    @extend .dd!optional;  // 用optional,防止.dd不存在而导致的编译报错
}

/*** css ***/
.aa, .bb {
  margin: 0 auto;
}
div .aa, div .bb {
  color: red;
}
.aa p, .bb p {
  margin: 100px;
}

6、mixin

• 不带参数

/*** scss ***/
@mixin aa {
    margin: 10px;
}
.bb {
    @include aa;
}

/*** css ***/
.bb {
  margin: 10px;
}

• 带参数：参数为数组

/*** scss ***/
$margin: 100px;
$left: 10px;
@mixin aa($left, $margin) {
    margin: $margin;
    left: $left;
}
.bb {
    @include aa($left, $margin);
}

/*** css ***/
.bb {
  margin: 100px;
  left: 10px;
}

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

/*** scss ***/
$map: (left: 10px,  100px);
@mixin aa($left, $width) {  // 接收参数为key值
    left: $left;
     $width;
}
div {
    @include aa($map...);  // 传递参数为对象名+...
}

/*** css ***/
div {
  left: 10px;
   100px;
}

• 默认参数

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

• 不定参数

/*** scss ***/
@mixin box-shadow($shadows...) {  //不定参数,用...
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}
.shadows {
  @include box-shadow(2px 2px 2px #eee);
}

/*** css ***/
.shadows {
  -moz-box-shadow: 2px 2px 2px #eee;
  -webkit-box-shadow: 2px 2px 2px #eee;
  box-shadow: 2px 2px 2px #eee;
}

7、function

/*** scss ***/
$ 20px;
@function fun($width) {
    @return $width * 2;
}
div {
     fun($width);
}

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

基本使用

1、定义变量及变量使用

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

/*** scss ***/
$ 1px;
$width2: 2px;
$pos: bottom;

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

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

2、嵌套

• 选择器嵌套
• 属性嵌套

// 选择器嵌套
div{  
    color: red;
    p {
    color: green;
    }
    &:hover{
        color: blue;
    }
}

// 属性嵌套
.div{  
//注：嵌套属性后面必须写冒号 如：border：
  border: {    
    style: solid;
    left: {
       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 */ ，会保留到编译后的文件。 单行注释 //
comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

7、插入文件

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

8、编译风格

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

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

定义列表

$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、在Scss中括号不是用来创建列表（除非是空的列表），而是用来做为分隔符
2、和CSS一样，只要没有特殊字符，列表项的引号是可以省略的

列表嵌套

$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';

列表索引是从1开始

列表长度length($list)

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

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

map: (
    (theme: dark, size: 40px),
    (theme: light, size: 32px)
);

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

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

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