基础配置：先配置Ruby,后安装Sass和Compass

Sass的中文官网：Sass中文网

Sass环境-Ruby2.6.5.zip：Ruby2.6.5.zip

安装Sass和Compass：vs code 使用scss/sass

如何VScode多个文件夹共存：如何在vscode中同时打开两个文件夹

VScode如何代码同步页面：在 vscode 中使用 Live Server 进行调试

关于VScode中Easy Sass设置项

翻译版：

 1.sass基础语法

文件夹以scss结尾

变量定义：

$变量名：变量值

使用方法：

1. $变量名
2. #{$class}
3. 拼接：('./img/'+$str)或('./img/#{$str}')

引入：

引入其他scss文件

引入的scss文件要以下划线_开头来命名。假设引入文件命名为_base.scss

主文件写@import "_base";

引入其他scss代码块

使用@mixin{}来书写代码模板，使用@include做引入。相同变量不会进行合并，按照代码与引入位置进行共存！！！

*一般minin*/
@mixin helloMixin {
  display: inline-block;
  
  font: {
    size: 20px;
    weight: bold;
  }

  color: red;
}
/*嵌套minin*/
@mixin helloMixin2 {
  padding: 10px;

  background-color: red;

  @include helloMixin;
}


/*参数minin*/

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}


.div {
  margin: 10px;
  @include helloMixin2;
}

.p { 
  @include sexy-border(blue, 1in);
}

注意点：

• 在大括号里面定义的变量只能在该括号作用域内使用，不能用于其他的选择器。使用变量应该在定义变量之后.

.div1 {
    $widthInner: 1200px;
    width: $widthInner;
    .div-inner {
        width: $widthInner;
    }
}
// .div2 {
//     width: $widthInner;//无法使用
// }

• 引入文件在主Scss文件中的位置也会影响主Scss，比如引入Scss文件中有和主Scss文件重名的变量，则会根据引入文件位置和主文件变量位置来决定采用哪个变量值。可以通过往引入文件中的变量加默认的方式来处理

$width: 300px ！default;

2.sass基础数据类型

数组：数组下标从1开始，nth方法用于获取数组值，index方法用于获取数组下标，join方法用于获取全部的数值

$list:(100px,200px,300px,400px);

.div {
    width: nth($list,1);
    height: nth($list,2);

    zoom:index($list,100px);

    margin:join($list);
}

map: map-get方法用于获取键值，使用@each进行遍历全部值

3.sass继承

使用     @extend 继承的选择器    实现继承，链式继承不会处理相同样式的合并。

/*简单继承*/
.div {
  border: 1px #f00;
  background-color: #fdd;
}
.divext {
  @extend .div;
  border-width: 3px;
}

CSS为
@charset "UTF-8";
/*简单继承*/
.div, .divext {
  border: 1px #f00;
  background-color: #fdd;
}

.divext {
  border-width: 3px;
}


/*关联属性继承*/
.div1 {
  border: 1px #f00;
  background-color: #fdd;
}
/*表示一个元素存在两个类，一个是div1，另一个是other*/
.div1.other {
  background-image: url("/image/hacked.png");
}
.divext {
  @extend .div1;
  border-width: 3px;
}

/*链式继承*/
.div1  {
   border: 1px solid #000;
}
.div2  {
   @extend .div1;
   color: red;
}
.div3  {
   @extend .div2;
   background-color: #fff;
}

// /*伪类继承*/
a:hover {
  text-decoration: underline;
}
.hoverlink {
  color: red;
  @extend a,:hover;
}

4.Sass嵌套（元素嵌套和属性值嵌套）

$width: 300px;
$color: #ffe932;


.div1 {
    width: $width;
    height: $width;
    background-color: $color;

    .div-inner {
        width: 400px;
        height: 500px;
        background-color: $color;
        a {
            color: red;
        }
    }
}

5.Sass条件控制语句

1.@if @else

/*@if*/
$type: 'tony';
p {
  @if $type == 'bufy' {
    color: blue;
  } @else if $type == 'tim' {
    color: red;
  } @else if $type == 'tony' {
    color: green;
  } @else {
    color: black;
  }
}

@if $type == 'bufy' {
    .div {
        color: black;
    }
}@else {
    .div {
        color: red;
    }
}

2.@for（through是增加到最终值，to是增加到最终值减1）

用through：@for  循环变量  from  起始值  through  最终值

/*@for*/
@for $i from 1 through 3 {
  .item-#{$i} { width: 1px * $i; }
}

用to：@for  循环变量  from  起始值  to  最终值

/*@for -to*/
@for $i from 1 to 3 {
  .item-#{$i} { width: 1px * $i; }
}

用list：@for 循环变量  form  初始值  through  length（$数组变量名）

/*@for list*/
$list:(1,2,3,4,5);

@for $i from 1 through length($list) {
  .item-#{$i} { width: 1px * $i; }
}

3.@while

@while  循环条件{ 执行代码块 }

/*while*/
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 1px * $i; }
  $i: $i - 2;
}

4.@each

针对键值对使用，@each $key, $value in $map   {  #{$key}: $value;   }

/*each*/
$map: (top: 1px, left: 2px, bottom: 3px, right: 4px);
.div {
    @each $key, $value in $map {
        
            #{$key}: $value;
        
    }
}

6.Sass函数

针对数字

针对字符串

针对map

自定义函数

/*自定义函数*/
$rem1 : 100px;
@function px2rem($px) {
    $rem : 37.5px;
    @debug $rem1;
    @return ($px / $rem) + rem;
}
//@debug $rem;
.div {
    width: px2rem(20px);
}