BOOTSTRAP DAY06

一、scss运算
  1.数字：加减乘除，取整等运算(+,-,*,/,%),如果必要会在不同单位间转换值(前提是scss能转)
    ex:
      $my_width:5%;
      $my_max_width:$my_width*4;
      $other_size:$my_width+$my_max_width;
   (1)注意加法
     +也可以用于连接字符串
     p:before{
    content:"Microsoft"+yahei;
     }
     如果用有引号的字符串去连接无引号的字符串，运算结果是有引号的，相反，无引号的字符串去连接有引号的字符串，
     运算结果则没有引号。
   (2)除法运算

     ex:
       div{
    font-size:10px/80px;
    $width:1000px;
    width:$width/2;
    height:
       }
     /在css中通常起到分隔数字的用途，同时也赋予除法的功能。
      以下情况/被视为除法运算：
        1、如果值，或值的一部分，是变量或者是函数的返回值
    2、如果值被圆括号包裹时
    3、如果值是算术运算的一部分

    (3)运算表达式与其他连用是，用空格做连接符
      ex:
      p{
    margin:5px+10px auto;
      }
    (4)在有引号的文本字符串中使用#{}插值语句可以添加动态的值。
      p:before{
    content:"I am #{5+15}years old";
      }

  2.颜色：颜色值的运算是分段计算的，也就是分别计算红色，绿色，以及蓝色的值
      p{color:#010203+#040506};
    计算：01+04=05
          02+05=07
          03+06=09
    结果：color:#050709;
    值包含alpha(透明度),必须有相等的alpha值才能进行运算，因为算术运算不会作用于alpha.
    rgba(125,25,10,.5)+rgba(245,65,90,.6)
    
    练习：定义两个变量分别为10px和20px,两个变量相加后乘以2，将结果赋值给p选择启动width属性。
      $my_width1:10px;
      $my_width2:20px;
      p{
        width:($my_width1+$my_width2)*2;
      }

二、函数
  1.scss定义了多种函数，有些甚至可以通过普通的css语句调用。
    ex:rgba(10,30,40,.7); 在普通的css中也可以使用
    1.颜色
      rgba();
      hsl(hue,saturation,lightness);
         hue:色调，取值0-360,0-120红色，120-240绿色，240-360蓝色
     saturation:饱和度，取值为0%-100%
     lightness:亮度，取值0%-100%
    2.数字函数
      round(value) 将数值进行四舍五入，转换成最接近的整数。
      ceil(value) 向上取整
      floor(value) 向下取整
      min(num1,num2...) 找出数值间的最小值
      max(num1,num2...) 找最大值
      random(); 获取随机数
    3.字符串函数
      unquote(string) 删除字符串的引号
      quote(string) 添加字符串的引号
      To-upper-case(string) 将字符串

    4.自定义函数
      scss支持自定义函数使用关键词 @function定义，并能在任何属性或scss中使用，需要调用 @return 输出结果
      语法：
        @function 函数名($n){
      @return 运算表达式；
    }
      练习：
        定义一个带参函数getSize($n),函数体内定义两个变量，值分别为60px和10px，函数最终返回$n乘以最大宽度
    加上$n-1乘以最小值的结果，并将结果赋值给header元素的高宽属性
    @function getSize($n){
        $max_width=60px;
        $min_width=10px;
        @return $n*$max_width+($n - 1)*$min_width
    }
     header{
        height:getSize(2);
        width:getSize(4);
     }
    5.控制指令
      1.当 @if 的表达式返回值不是false或null时，表示条件成立，执行{}内的代码
        ex:
    p{
      @if 1+1=2{border-radius:5px;}
      @if 5<3 {border-radius:10px;}
      @if null {border-radius:20px;}
    }
      2. @if 声明后面可以跟多个 @else if 声明，或者一个 @else声明
        ex:
      $type:moon;
      nav{
        @if $type==sun{
            color:yellow;
        } @else if $type==mars{
            color:red;
        } @else if $type==moon{
            color:blue;
        } @else{
            color:black;
        }
      }
    练习：声明一个函数，在函数中判断如果参数大于1返回值为200px;如果参数等于1返回值为100px,否则返回0，
    并在div元素上调用函数，查看运行结果
    $