sass-常见函数

1.color函数

.p1{
    background-color: #5c7a29;
}

.p2{

    /*
        让颜色变亮
        lighten($color,$amount)
        $amount 的取值在0% ~ 100%之间
    */
    background-color: lighten($color: #5c7a29, $amount: 30%);
}

.p3{
    //让颜色变暗 通常使用color.scale()代替该方案
    background-color: darken($color: #5c7a29, $amount: 15%);
}
.p4{
    //降低颜色透明度 通常使用color.scale()代替该方案
    //background-color:opacify(#5c7a29,0.5)

    background-color: opacify($color: rgba(#5c7a29,0.3), $amount: 0.1);
}

生成css代码

.p1 {
  background-color: #5c7a29;
}

.p2 {
  /*
      让颜色变亮
      lighten($color,$amount)
      $amount 的取值在0% ~ 100%之间
  */
  background-color: #aace6e;
}

.p3 {
  background-color: #314116;
}

.p4 {
  background-color: rgba(92, 122, 41, 0.4);
}

2.list函数 length()、index()、append()、nth()

    p{
        z-index: length($list: 12px 1px);         //length($list);获得list数组的元素个数      
        z-index: length($list: 12px 3px 5px);     
        z-index: index($list: a b c d, $value: c); //index($list,$value);获得value在list里的下标
        padding: append(10px 20px 30px, 30px);    //给list添加值30px
        color: nth($list: red blue green, $n:3 );  //根据$n下标得到$list的对应值
    }
   
   生成css代码
    p {
      z-index: 2;
      z-index: 3;
      z-index: 3;
      padding: 10px 20px 30px 30px;
      color: green;
    }

3.map函数 map-has-key() map-get() map-keys()

$font-size:("small":12px,"normal":18px,"large":24px);
$padding:(top:10px,right:20px,bottom:5px,left:15px);

p{
  font-size: map-get($map: $font-size, $key: "normal");//获取$font-size中键为"normal"的值
  
  @if map-has-key($map: $padding, $key: "right"){      //判断$padding中键为"right"是否存在
    padding-right:map-get($map: $padding, $key: "right");
  }

  &::after{
    content: map-keys($map: $font-size)+" " +map-values($map: $padding);
  }
  //map-keys() 输出所有key map-values() 输出所有值
}

/* 生成的css代码 */

p {
  font-size: 18px;
  padding-right: 20px;
}
p::after {
  content: '"small", "normal", "large" 10px, 20px, 5px, 15px';
}

4.math函数 ceil() floor() abs() max() random()

p{
    z-index: ceil($number: 2.7);   //向上取整
    z-index: floor($number: 2.3);  //向下取整
    z-index: abs($number: -20);    //绝对值
    z-index: max(10,50,4);         //取最大值
    opacity: random();             //取随机数 0~1
}

5.string函数 quote() unqote() str-length() str-index()

    quote('ssss');  //返回带引号的字符串 "sss"
    quote(sss);     //"sss"
    
    unqote("sss");  //返回去掉引号的字符串 sss
    
    str-length("sss"); //返回字符串长度3
    
   
    str-index("这就是爱","爱");  //返回子字符串"爱"在父字符串的下标 4