2022-7-25日课程总结

scss：变量、嵌套、混合、继承、运算、

使用变量：

1. sass让人们受益的一个重要特性就是它为css引入了变量
2. 可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值
3. 或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途
4. sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width
5. 为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突
6. 区分全局变量和局部变量

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
 
//编译后
 
nav {
  width: 100px;
  color: #F90;
}

嵌套css规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

header nav h1 { color: #333 }
header  nav p { margin-bottom: 1.4em }
header  .list { background-color: #EEE }

像这种情况，sass可以只写一遍，且使样式可读性更高。在Sass中，可以像俄罗斯套娃那样在规则块中嵌套规则块。

sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

header {
nav {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  .list { background-color: #EEE }
}

混合器

当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用

sass混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式

@mixin a-0 {
    text-decoration: none;
    font-family: "宋体";
    font-size: 20px;
}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方

@include调用会把混合器中的所有样式提取出来放在@include被调用的地方

.nav{
    color: red;
    display: inline-block;
    width: 10px;
    height: 50px;
    @include a-0;
}
.list{
    text-decoration: none;
    font-family: "宋体";
    font-size: 18px;
    color: green;
    @include a-0;
}

使用选择器继承来精简CSS：

使用sass的时候，最后一个减少重复的主要特性就是选择器继承

基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式

这个通过@extend语法实现，

%btn{
    width: 100px;
    height: 40px;
    border-radius: 10px;
}
.box-size,.bth-default{
    width: 100px;
    height: 40px;
}
.bth-default{
    @extend %btn;
    @extend .box-size;
    background-color: rgb(138, 138, 138);
    border: 10px solid gray;
    color: rgb(227, 224, 224);
}
.bth-danger{
    @extend %btn;
    background-color: rgb(255, 47, 147);
    border: 10px solid red;
    color: rgb(41, 34, 34);
}.bth-warning{
    @extend %btn;
    background-color: yellow;
    border: 10px solid orange;
    color: orange;
}
.bth-success{
    @extend %btn;
    background-color: greenyellow;
    border: 10px solid green;
    color: green;
}

sass运算

一般的编程语法中都支持使用运算，Sass 中同样可以做各种数学运算，包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。

下面是加减乘除得代码

// width: 1+2;
  // width: 20+20px;
  // width: 10+20%;
  // width: 20-30;
  // width: 20-10px;
  // width: 20*20px;
  // width: 50%-10px; 不能与单位进行计算，会报错

变量计算

在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算

  $num_1: 1000;
  $num_2: 50;
  // border-radius: $num_1/$num_2;
  // 单独存在是分隔符 使用除法要么再除的基础上加一个其他的运算符或者加其他变量
  //   border-radius: 50*10/5;
  border-radius: #{$num_1}/#{$num_2};