web前端学习笔记（3）

6.运算

加减乘除余
如果必要，会在不同单位间转换（前提是scss能转）

加法

+除了做加法，还做字符串拼接
字符串拼接的时候
如果用有引号的字符串拼接无引号的，结果是带引号的
如果用无引号的字符串拼接有引号的，结果不带引号。

div:before{
  content:"Microsoft"+yahei;
  font-family:C+"hiller";
}

减法

由于变量声明的时候可以使用减号-
系统分不清楚 - 是不是属于变量名称，所以我们写减法的时候要在减号前后添加空格。

$my-w:100px;
$my-h:10px;
div{
  width:$my-w - $my-h;
}

除法

在scss中，/的作用是分隔符
font-size: 10px/5px;
只有下面几种情况，我们判定为除法
①运算式的两边，有变量，或者函数返回值的时候，是除法
width:$w/2;
②运算式被小括号()包裹的时候，是除法
height:(500px/2);
③运算式是其他算数运算式的一部分的时候，是除法
margin-left:5px+8px/2px;

字符串的插值操作

使用#{}在字符串中做插值
content:“liangliang ate #{50+32} baozis”;

颜色的运算

#112233+#445566=#557799
#rrggbb rgb(r,g,b)都是分段计算 红+红 绿+绿 蓝+蓝

div{
  background:rgba(11,22,33,0.7)+rgba(22,33,44,0.7);
}
↓↓
div {
  background: rgba(33, 55, 77, 0.7); 
}

函数

1.scss预定义很多函数，有些函数直接可以再css中使用

rgba(r,g,b,alpha)
hsl()色调，饱和度，亮度-------------------------不用
hue:色调 取值0~360 3个色段 0~120 120~240 240~360
saturation:饱和度 0.0%~100%
lightness:亮度 0.0%~100%

数学函数

round($v)四舍五入ceil($v)向上取整
floor($v)向下取整min($v1,$v2...)max($v1,$v2…)
random 随机数

字符串

unquote($v)去掉双引号div:beforecontent:unquote("abc");\downarrow \downarrow div:beforecontent:abc;quote($v) 加双引号
to_upper_case($str)把$str转成大写
to_lower_case($str)把$str转成小写

自定义函数

@function get_msg($a,$b){
  @return $a*$b+($a/$b);
}
div{
  width:get_msg(3,2)+px;
}
↓转成css
div {
  width: 7.5px; }

指令

$type:moon;
div{
  @if($type==sun){
    color:#f00;
  }@else if($type==moon){
    color:#00f;
  }@else{
    color:#000;
  }
}