Sass运算符、函数

一、运算符

首先我们要知道Sass的数据类型

  • 数字 ：1、2、3、10px
  • 字符串：有引号的字符串："foot"、'bar'  没有引号的字符串：baz
  • 颜色：blue，#999999，rgba(255,0,0,0.8)
  • 布尔类型：true，false
  • 空值：null
  • 数组（list）：用空格或逗号作为分隔符，1.5em 2em 3em ，1.5em,2em,3em
  • maps：相当于JavaScript的object,（key1:value1，key2:value2）

基本运算符

  • 数学运算符；+ - * / %

  • 关于运算符；<  >   >=    <=

  • 逻辑运算符  and or not

数学运算符

//数学运算符；+ - * / %
//关于运算符；<  >   >=    <=
//逻辑运算符  and or not
p {
    width: 1+2;
    width: 1+2px;
    width: 10+20%;
    width: 20-10;
    width: 20-10px;
    width: 20-10%;
    // 运算符 /：1.作用数学运算符 2.分隔符
    // border-radius: 10px/20px; //当两个单位用/进行分隔，/代表的分隔符
    // border-radius: 10/20;
    // border-radius: 10/20px;
    //当变量与数字用/链接，此时代表除法运算符
    $num: 10px;
    $num_2: 20px;
    // border-radius: $num/20;
    // border-radius: $num/$num_2;
    // border-radius: (10/5);
    // border-radius: 10-10/5;
    //当不想让变量之间进行除法运算，可以用插值表达式#{}
    // border-radius: #{$num}/#{$num_2};
    &::after {
        content: bb+"aa";
    }
    
}

效果：

 补充这里面的除法要注意：

运算符 /：1.作用数学运算符 2.分隔符

  • 当两个单位用/进行分隔，/代表的分隔符
  • 当变量与数字用/链接，此时代表除法运算符

  • 当不想让变量之间进行除法运算，可以用插值表达式#{}

  • 这里面的+号表示拼接

关于运算符与逻辑运算符（用法和js很像）

//数学运算符；+ - * / %
//关于运算符；<  >   >=    <=
//逻辑运算符  and or not
p {
    $num_3: 100;
    $c: red;
    @if $num_3>200 or $c!=red {
        background-color: blue;
    }
    @else {
        background-color: red;
    }
    $name:a;
    $aitem:border;
    p.#{$name} {
        #{$aitem}-bottom: 1px solid bisque;
        #{$aitem}-top: 1px solid #000;
        color: rgba(255, 0, 0, 0.7)+rgba(0, 255, 0, 0.7);
    }
}

效果：

 二、函数

Saas中的函数（一部分）

  • Color(颜色函数)

    Sass包含很多操作颜色的函数。

    lighten() 与 darken()函数可用于调亮或调暗颜色

    opacify()函数使颜色透明度减少

    transparent()函数使颜色透明度增加

    mix()函数可用来混合两种颜色。

  • String（字符串函数）

    Sass有许多处理字符串的函数。

    向字符串添加引号的quote()

    获取字符串长度的str-length()

    将内容插入字符串给定位置的str-insert()

  • Math(数值函数)

    数值函数处理数值计算。

    percentage()将无单元的数值转换为百分比

    round()将数字四舍五入为最接近的整数

    min()和max()获取几个数字中的最小值或最大值

    random()返回一个随机数。 

  • List函数

    List函数操作List。

    length()返回列表长度

    nth()返回列表中的特定项

    join()将两个列表连接在一起

    append()在列表末尾添加一个值。

  • Map函数

    Map函数操作Map。

    map-get()根据键值获取map中的对应值

    map-merge()来将两个map合并成一个新的map

    map-values()映射中的所有值。

  • selector选择器函数

    选择符相关函数可对CSS选择进行一些相应的操作。

    selector-append()可以把一个选择符附加到另一个选择符

    selector-unify()将两组选择器合成一个复合选择器。

实例：（scss）

.div {
    width: 100%;
    height: 80px;
}

.div_1 {
    @extend .div;
    background-color: red;
}

.div_2 {
    @extend .div;
    background-color: lighten($color: rgb(255, 0, 0), $amount: 30%);
    &::after {
        content: str-length($string: "DWEB20220701")
    }
    $arr:(10 30 40 50 60); //定义一个数组
    width: round($number: 4.5); //四舍五入
    height: length($list: $arr);
    $map_name:("name":"柳青", "sex":"女");
    &::before {
        content: map-get($map: $map_name, $key: "sex")
    }
}

.div_3 {
    @extend .div;
    background-color: darken($color: rgb(255, 0, 0), $amount: 20%);
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/函数.min.css">
</head>

<body>
    <div class="div_1"></div>
    <div class="div_3"></div>
    <div class="div_2"></div>
</body>

</html>

效果（颜色变亮、变暗）：

 效果（其他效果只写了一部分）：