Sass混合器和Sass运算

混合器格式

语法

@mixin 混合器名{代码块}

调用

@include 混合器名;

//混合器定义
@mixin fStyle{
    text-decoration:none;
    font-family:"宋体";
    font-size:20px;
}
//混合器引用
a{
    //固定用法
  @include fStyle;  
}
​
//编译为css后
a {
  text-decoration: none;
  font-family: "宋体";
  font-size: 20px;
}

函数混合器

语法

@mixin 混合器名(变量1,变量2){代码块} //形参

调用

@include fStyle(变量1,变量2) //实参

//混合器函数定义 使用方法类似于js函数中形参实参
@mixin fStyle($bcColor,$fSize){
    text-decoration:none;
    font-family:"宋体";
    background-color:$bcColor;
    font-size:$fSize;
}
//函数调用
a{
    @include fStyle(#ccc,20px)
}
//函数调用 指定变量赋值   可打乱顺序传值
a{
    @include fStyle($fSize:20px,$bcColor:#ccc)
}
​
//编译后
//第一次调用 按顺序传值
a {
  text-decoration: none;
  font-family: "宋体";
  background-color: #ccc;
  font-size: 20px;
}
//第二次调用 打乱顺序传值
a {
  text-decoration: none;
  font-family: "宋体";
  background-color: #ccc;
  font-size: 20px;
}

如果变量多时，参数顺序可能会有小差错，可以在调用的时候给指定变量赋值

默认值

@mixin 混合器名(变量1,变量2:默认值){代码块}

当调用时即使不写实参变量值他也有默认的值

//混合器函数定义 使用方法类似于js函数中形参实参
@mixin fStyle($bcColor,$fSize:20px){
    background-color:$bcColor;
    font-size:$fSize;
}
//函数调用
a{
    @include fStyle(#ccc)
}
​
//编译后
a {
  background-color: #ccc;
  font-size: 20px;
}

继承

如果定义一个类名专门用来存放样式，他这个类在html中没有任何意义，并没有class声明，所以这里用占位符会更好，但是如果在html中有用处也是可以去使用类名，继承元素最好不要是包含元素样式

占位符选择器%

@extend 类名 相当把继承的元素以群组选择器的方式在选择器前进行添加

%btn {
//.btn {
  width: 100px;
  border-radius: 10px;
}
%btn1 {
//.btn1 {
  height: 40px;
}
@mixin color($bgColor, $bColor: blue) {
    @extend %btn;
    @extend %btn1;
    //@extend .btn;
    //@extend .btn1;
    //@extend %btn, %btn1;
    //@extend .btn, .btn1;
    background-color: $bgColor;
    border: 2px solid $bColor;
}
.btn-default {
    @include color(#ccc, #aaa);
}
.btn-success {
    @include color(green, red);
}
.btn-danger {
    @include color(red);
}
​
//编译后
.btn-danger, .btn-success, .btn-default {
  width: 100px;
  border-radius: 10px;
}
​
.btn-danger, .btn-success, .btn-default {
  height: 40px;
}
​
.btn-default {
  background-color: #ccc;
  border: 2px solid #aaa;
}
​
.btn-success {
  background-color: green;
  border: 2px solid red;
}
​
.btn-danger {
  background-color: red;
  border: 2px solid blue;
}

sass运算

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

关系运算符：> < >= <=；

逻辑运算符：or and not 或与非

数据类型

数字型、字符型、布尔型、颜色型、空值、数组型、maps型

数学运算符

运算符 加+

width:1+2; == width:3;

width:10+20px == width:30px;

width:10+20% == width:30%;

content:"aa"+bb; "aabb"

content:bb + "aa"; bbaa

运算符 减-

width:20-10 == width:10;

width:20-10px == width:10px;

width:20-10% == width:10%;

先将单位统一再进行运算，两个单位不同不能进行运算

运算符 除/

border-radius:10px/20px //当两个由单位或两个数字或一个单位一个数字用 / 拼接时 / 代表分隔符不做运算

当变量与数字或变量与变量用 / 进行连接时 会进行除法运算

当用括号包起来式子并中间用 / 拼接时（单位需要在前100px/10） 会进行除法运算

当式子中还带有其他运算符时 也会进行运算

//scss语句
p {
  /*做分割 不做运算*/
  width: 100/10;
  width: 100px/10;
  width: 100/10px;
  /*做运算*/
  $num: 100;
  /*  width: $num/10;*/
  width: $num/10;
  /*  width: 10 / $num;*/
  width: 10 / $num;
  /*  width: (100/10);*/
  width: (100/10);
  /*  width: (100px/20);*/
  width: (100px/20);
  /*  width: (100%/20);*/
  width: (100%/20);
  /*  width: 1 * 100/20;*/
  width: 1 * 100/20;
  /*   单位不同不做运算*/
  /*   width: (100%/10px);*/
}

//编译后
@charset "UTF-8";
p {
  /*做分割 不做运算*/
  width: 100/10;
  width: 100px/10;
  width: 100/10px;
  /*做运算*/
  /*  width: $num/10;*/
  width: 10;
  /*  width: 10 / $num;*/
  width: 0.1;
  /*  width: (100/10);*/
  width: 10;
  /*  width: (100px/20);*/
  width: 5px;
  /*  width: (100%/20);*/
  width: 5%;
  /*  width: 1 * 100/20;*/
  width: 5;
  /*   单位不同不做运算*/
  /*   width: (100%/10px);*/
}

插值语句

border-radius:#{变量1}/#{变量2} 两个变量不进行除法运算时 放入插值运算里

也可以当类名或属性来使用

$name:foo;
$attr:border;
p.#{$name}{
    #{attr}-radius:20px;
    #{attr}-color:blue;
    #{attr}-width:3px;
    #{attr}-style:solid ;
}

颜色运算做了解

p{
    //两两计算 01+04 02+05 03+06
    color:#010203 + #040506;
    //当两个rgba进行运算时 透明度必须一致
}

判断运算符

$num: 199;
$c: red;
p {
  //   与运算
  @if $num>200 and $c == red {
    background-color: blue;
  } @else {
    background-color: red;
  }
  //   或运算
  @if $num>200 or $c == red {
    background-color: blue;
  } @else {
    background-color: red;
  }
  //   非运算
  //   @if not($num<199) {
  @if not($num>199) {
    background-color: blue;
  } @else {
    background-color: red;
  }
}
​
//编译为css后
p {
  //与运算结果
  background-color: red;
  //或运算结果
  background-color: blue;
  //非运算结果
  background-color: blue;
}