scss学习总结

scss学习总结

1、变量

• 使用$进行声明，如$myWidth，在属性中使用直接书写。在选择器、属性名和url中使用，需要使用插值语法，如：#{$myWidth}
• 使用示例：

  // 在属性中使用变量
  $publicFontSize: 18px;
  .test {
    font-size: $publicFontSize;
  }
  
  // 在选择器中或在url中使用变量
  $image: image;
  $assets: assets;
  .test {
    background-#{$image}: url('~@/#{assets}/1.png')
  }
  

• 注意：

  • 支持块级作用域，要将局部变量转换为全局变量可以添加!global声明。

  • 可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

    content: "First content";
    content: "Second content?" !default;
    new_content: "First time reference" !default;
    
    #main {
      content: $content;
      new-content: $new_content;
    }
    
    // 编译为：
    #main {
      content: "First content";
      new-content: "First time reference";
    }
    

2、嵌套

• 选择器嵌套

  .test {
    .test-child {
    }
    &::after {
    }
  }
  

• 属性嵌套

  .test {
    border: {
      style: solid;
      width: 1px;
      color: red;
    }
  }
  等价于
  .test {
    border-style: solid;
    border-width: 1px;
    border-color: red;
  }
  

3、继承与混入

• 继承

  .test {
    background: pink;
  }
  .test1 {
    border: 1px solid red;
    @extent .test;
  }
  .test2 {
    @extend .test1; // 复用test1的样式(test样式也会继承)，但是不能覆盖test2中的原有样式，就算是写在原有样式之后也不能。
  }
  

  注意：如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的.
• 混入(定义和使用)

  // 定义
  // 可以不指定任何参数（不需要写小括号），一个或多个参数
  @mixin box($width, $height, $color) {
    width: $width;
    height: $height;
    border: 1px solid $color;
  }
  
  // 使用
  // (带上变量名（要么全部带上要么全部不带）可以不按顺序传，否则需要按顺序传)
  .my-box {
    @include box(200px, 200px, black);
  }
  

• 注意：

    // 可以指定参数的默认值，指定默认参数的时候必须所有的值都指定默认值。要想使用默 认值时，所有值都不能传。如：
    @mixin test($width: 200px, $height: 100px) {
      width: $width;
      height: $height;
    }
    // 使用
    .test1 {
      @include test;
    }
  

4、if三元运算符、@if、@else-if和@else

• 三元运算符：if(expression, value1, value2)

  // 使用
  p {
    color: if(1 + 1 == 2, green, yellow);
  }
  
  // 解析成
  p {
    color: green;
  }
  

• 条件语句：@if

  p {
    @if 1 + 1 == 2 {
      color: green;
    }
  }
  

• @if - @else if - @else

  // 示例
  $age: 19;
  p {
    @if $age == 18 {
        color: red;
    } @else if $age == 19 {
        color: blue;
    } @else {
        color: green;
    }
  }
  
  // 解析成
  p {
    color: blue;
  }
  

5、循环@for，@while，@each

• @for

  • 表达式：
    @for $var from <start> through <end> 或 @for $var from <start> to <end>
    注意：through为[start, end]，to为[start, end)
  • 示例

    // 使用
    @for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
    }
    
    // 解析成
    .item-1 {
      width: 2em;
    }
    .item-2 {
      width: 4em;
    }
    .item-3 {
      width: 6em;
    }
    

• @while

  • 表达式：@while expression
  • 示例：

    $i: 6;
    @while $i > 0 {
      .item-#{$i} { width: 100px * $i; }
      $i: $i - 2;
    }
    
    // 解析成
    .item-6 {
      width: 600px;
    }
    .item-4 {
      width: 400px;
    }
    .item-2 {
      width: 200px;
    }
    

• @each

  • 表达式：$var in $vars。$var可以是任何变量名 $vars 只能是Lists或者Maps
  • 一维列表遍历示例。

  // 使用
  @each $animal in puma, sea-slug {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
    }
  }
  
  // 解析成
  .puma-icon {
    background-image: url('/images/puma.png');
  }
  .sea-slug-icon {
    background-image: url('/images/sea-slug.png');
  }
  

  • 二维列表遍历示例。

  @each $animal, $color, $cursor in 
    (puma, black, default),
    (sea-slug, blue, pointer) {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
      border: 2px solid $color;
      cursor: $cursor;
    }
  }
  
  // 解析成
  .puma-icon {
    background-image: url('/images/puma.png');
    border: 2px solid black;
    cursor: default;
  }
  .sea-slug-icon {
    background-image: url('/images/sea-slug.png');
    border: 2px solid blue;
    cursor: pointer;
  }
  

  • maps遍历示例。

  @each $header, $size in (h1: 2em, h2: 1.5em) {
    #{$header} {
      font-size: $size;
    }
  }
  
  // 解析成
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.5em;
  }
  

6、函数语法

• 基本格式

  @function fn-name($params) {
      @return $params;
  }
  

• 使用示例

  // 定义函数
  @function double($number) {
    @return $number * 2px;
  }
  
  // 使用函数
  p {
    height: double(12);
  }
  
  // 解析成
  p {
    height: 24px;
  }
  

7、@important

• 用来引入外部scss文件。如：@important ‘./test.scss’

8、函数指令

• 字符串函数
  • 索引第一个为1，最后一个为-1；切片两边均为闭区间
  • 相关函数

    函数名和参数类型	函数作用
    quote($string)	添加引号
    unquote($string)	除去引号
    to-lower-case($string)	变为小写
    to-upper-case($string)	变为大写
    str-length($string)	返回$string的长度(汉字算一个)
    str-index($string，$substring)	返回$substring在$string的位置
    str-insert($string, $insert, $index)	在$string的$index处插入$insert
    str-slice($string, $start-at, $end-at）	截取$string的$start-at和$end-at之间的字符串

• 数字函数

  函数名和参数类型	函数作用
  percentage($number)	转换为百分比形式
  round($number)	四舍五入为整数
  ceil($number)	数值向上取整
  floor($number)	数值向下取整
  abs($number)	获取绝对值
  min($number…)	获取最小值
  max($number…)	获取最大值
  random($number?:number)	不传入值：获得0-1的随机数；传入正整数n：获得0-n的随机整数（左开右闭）

• 数组函数

  函数名和参数类型	函数作用
  length($list)	获取数组长度
  nth($list, n)	获取指定下标的元素
  set-nth($list, $n, $value)	向$list的$n处插入$value
  join($list1, $list2, $separator)	拼接$list1和list2；$separator为新list的分隔符，默认为auto，可选择comma、space
  append($list, $val, $separator)	向$list的末尾添加$val；$separator为新list的分隔符，默认为auto，可选择comma、space
  index($list, $value)	返回$value值在$list中的索引值
  zip($lists…)	将几个列表结合成一个多维的列表；要求每个的列表个数值必须是相同的

• 映射函数

  函数名和参数类型	函数作用
  map-get($map, $key)	获取$map中$key对应的$value
  map-merge($map1, $map2)	合并$map1和$map2，返回一个新$map
  map-remove($map, $key)	从$map中删除$key，返回一个新$map
  map-keys($map)	返回$map所有的$key
  map-values($map)	返回$map所有的$value
  map-has-key($map, $key)	判断$map中是否存在$key，返回对应的布尔值
  keywords($args)	返回一个函数的参数，并可以动态修改其值

• Introspection函数

  函数名和参数类型	函数作用
  type-of($value)	返回$value的类型
  unit($number)	返回$number的单位
  unitless($number)	判断$number是否带单位，返回对应的布尔值
  comparable($number1, $number2)	判断$number1和$number2是否可以做加、减和合并，返回对应的布尔值