使用变量 、运算、声明变量

$变量
最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样

$width: 5em;
// 直接使用即调用变量：
#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}
 
#sidebar {
  width: $width;
}

编译为:

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

2.数据类型 
支持 6 种主要的数据类型：

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

3.运算
支持数字的加减乘除、取整等运算 (+, -, *, /, %)

以下三种情况 / 将被视为除法运算符号：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

圆括号可以用来影响运算的顺序：

p {
  width: 1em + (2em * 3);
}
编译为

p {
  width: 7em; 
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
编译为

p {
  font: 12px/30px; 
}

颜色值运算 (Color Operations)

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}
计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {
  color: #050709; 
}

数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如

p {
  color: #010203 * 2;
}
计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为

p {
  color: #020406; 
}

需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为

p {
  color: rgba(255, 255, 0, 0.75); 
}
+ 可用于连接字符串

p {
  cursor: e + -resize;
  // 这种是无符号字符
}
编译为

p {
  cursor: e-resize; 
}

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
编译为

p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}
运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}
编译为

p {
  margin: 7px auto; 
}
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值（类似于vue的双花括号）： 

p:before {
  content: "I ate #{5 + 10} pies!";
}
编译为

p:before {
  content: "I ate 15 pies!"; }
空的值被视作插入了空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
编译为

p:before {
  content: "I ate pies!"; 

}

scss中定义变量

$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
 
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//编译后是
    background-color:#ed795a;
}

scss中的变量也存在作用域，类似于js中的局部变量

$bg-color: #ed795a;
 
.app{
    $bg-color: #8ab945;//类似于js的局部变量
}
 
.btn-default{
   background-color:$bg-color;//这里是 #ed795a 而不是.app里的 #8ab945
}

关于scss中参数传递

//@mixin 进行声明 多个参数 , 分割
@mixin wd($width){
    width:$width;
}
 
@mixin h($height:18px){
    height:@$height
}
 
.btn{// @include进行调用
    background-color:$bg-color;
    @include wd(32px);
    @include h;//不传 则默认18px
}
 
编译后是
.btn{
    background-color:#ed795a;
    width:32px;
    height:18px; 
}

less样式 定义变量以@符号开头即可

@bg-color:#8ab945;定义变量bg-color的颜色为#8ab945
 
.btn-default{
   background-color:@bg-color;//获取之前定义的颜色
}
 
.btn-default{//编译后
   background-color:#8ab945;
}

less样式中进行参数传递

//less中定义可传参的样式相比较scss中要简单  多个参数;分割
.wd(@width) {//无默认值
    width:@width;
}
 
.height(@h:18px) {//有默认值 18px; 
    height:@h;
}
 
.btn {
     background-color:@bg-color;
    .wd(32px);
    .height(22px);
}
 
//编译后是
.btn{
    background-color:#ed795a;
    width:32px;
    height:22px; 
}

css样式 中定义变量以--开头即可，在需要用到的地方以var()函数调用定义的变量名即可获
取对应值。

body{ //这里限定了变量的作用域是 body
   --bg-color:#8ab945;
}
 
.btn-default{
   background-color:var(--bg-color);
}

目前css中定义的变量在ie(具体哪些版本不兼容本人并未测试)中并不兼容，请大家谨慎使用!