个人心得：无论学习任何新的知识，或者接受新事物，从以下几个方面入手，个人感觉会更加轻松快捷哦

1.产生背景 2.是什么 3.怎么做 4.可以干什么即Who what that

那么，根据上面的这4点，跟大家一起分享一下sass吧

1.sass的产生背景

前端的三大组成神器（html、javascript、css）

首先HTML5火遍了大江南北

其次javascript由于Node.js而成为目前前后端统一开发语言的不二之选

反观只有css似乎成为前端开发中被忽视的角色了。一直以静态语言存在，其存在着很多显而易见的不足，例如：

1.复杂且没有逻辑性的嵌套关系；（逻辑性弱）

2.不同元素设置相同样式时，一遍又一遍写着重复的代码；（复用性差）

3.近乎于单独设置的元素样式，不利于后期差异化太大的更改维护，例如后期需要更改网页整体色调，或者重大节日或者纪念日，更换页面主体色调等；（维护成本高）

......

就在这样的背景下，始终坚持秉承高举“Don‘t Repeat Yourself”大旗的程序员进行了再次创新与创作，css预处理器问世，从而降低了“码农”的工作量，提高了效率！

2.什么是css预处理器？sass和css预处理器有何关系？

官方： CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。

通俗来讲： css预处理器就是将源文件进行预先指令处理，变为css文件后然后让项目进行解析渲染；CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让CSS更加简洁、提高代码复用性、逻辑分明等等；

有何关系呢？： css预处理器目前市面上有很多种。最常见的分别为：Sass ， Less ， Stylus等；Sass即为css预处理的一种；

3.那在多种css预处理器中，为何选用sass并学习呢？

各种css预处理的功能其实大同小异，但在代码书写方面有着不同的书写规范，为了加快我们的上手能力和降低学习成本，从代码书写规范方面以及其与css本身的差异性方面综合考虑而言，Sass的优势是比较显而易见的，所以优先推荐选用学习sass，到这里，再将sass的那什么B装到底，借用官方的宣告，让我们再次大喊：“ Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！”哈哈

4.说了这么多了，那sass（css预处理器）的出现与学习到底能解决哪些问题呢？

在学会了sass之后， Sass让css有了动态语言的特点，通过其可以声明变量的优点，我们可以解决上文中说到不易大型修改主体色调等问题的维护，只需修改其变量值即可；

2.在学会sass之后，我们可以让选择器不再那么的长，那样的遥无边际，没有逻辑性，让你的选择器具有嵌套逻辑性，大大提高可读性和阅读性；

3.在学会sass之后，我们可以利用函数以及混合宏的优点，进行样式的多次调用复用，大大减少我们的代码量哦，写一次，用多次

在学会sass之后，我们可以.....

说到这里，您心动了嘛？好了，话不多说，我们开始正式介绍sass吧

5.sass的安装与使用：

如果您使用的是VS Code，可以直接在插件商城下载安装 Easy Sass插件即可

或者参考官方文档下载安装配置环境；

6.sass的基本规则：

1.注释规则

SASS共有两种注释方法。类似于css；

多行的CSS注释 /* 注释 */ ，会在编译后生成的css文件中保留显示。
单行注释 // 注释，只保留在SASS源文件中，编译后生成的css文化中会被省略。

2.嵌套规则

按照html标签结构嵌套书写，和写标签的嵌套几乎类似相同；
将子元素的选择器和样式列表直接包裹在父元素的样式列表中即可；

例如：div的宽高为200，背景红色，里面的p标签，文字颜色白色，字体大小20px里面的a标签没有下划线的写法为：

div {

      width: 200px;

      height: 200px;

      background-color: red;

      p {

        color: white;

        font-size: 20px;

        a {
            text-decoration: none;
        }

      }
}

3.各个sass文件直接的互相引用规则

Sass 的 @import ，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中。相当于将一个sass导入到另一个sass中使用
@import "需要被引入的文件.scss";`

4.sass和scss一样嘛，有何种联系？

sass和scss其实是一样的css预处理语言，其后缀名是分别为 .sass和.scss两种。

SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

总而言之，sass的书写规范要求更为严格，是升级前的版本名称，scss是升级后的版本名称，相对而言，其书写规范更为舒适一些；

7.Scss语法：

1.变量

变量的创建:值; $创建变量；书写格式为$ 变量名：变量值；
变量值可以是长度单位、颜色，以及其他变量等；
在命名变量名时，尽量让其有一定的识别性意义，方便他人阅读查找或者日后修改！

例如：

$myColor:#25aab2; //颜色

$backgroundColor:$myColor; //变量

$myHeight:50px;  //长度单位

**2. 父选择器 & **

父选择器 & 的使用是代表当前作用域所有的结构集合，说的再简单点，其实&就代表着它自己；
如果需要使用伪类，必须使用&进行占位

3. 计算功能

SASS允许在代码中使用算式，注意运算的单位前后尽量保持一致。

例如：

div {

margin: (14px/2); //因为在css中/会被识别，所以要特别注意除法计算时一定要加（）；

top: 50px + 100px;

}

4.插值语句

- 上文中说到创建变量是可用于样式中的值，那么问题来了，变量是否可以在选择器上使用呢？答案是当然可以，但是需要一些特殊处理，那就是插值语句；

如果选择器想要使用变量，可以使用插值#{}包裹变量后使用。
而且使用插值语句，可以避免 Sass 运行运算表达式时，比如除法，有时候不是要除号而是需要斜杠。例如 border-radius: #{$a}/#{$b}; 使用插值语句，"/" 可以不看作除号

5.混合器指令

1.定义混合指令关键字 @mixin

声明混合指令和创建js函数很相似，需要一个名字，和一个定义样式的域{ }

语法：@mixin后添加名称与样式@mixin name {样式列表}

混合也需要包含选择器和属性，同样也可以用 & 引用父选择器（自己）
可以设置可以变化的参数，可以使用判断语句以及循环语句哦；
混合指令的名称可以自定义，命名规范和js变量命名规格几乎相同，不可以使用数字开头等；

引用混合样式关键字 @include

使用 @include 指令引用混合样式，格式是在其后添加混合名称 @include name;
将@include 指令和调用混合名称直接放在需要的样式列表中
定义了混合指令就要用，需要在哪个地方用就使用 @include来引用@mixin的指令名即可；
可以传递参数@include name(30px);也可以配合变量使用@include name($变量);

3.常用的@mixin方法展示：

//边框
@mixin yjbk ($num) {
    -moz-border-radius: $num;
    -webkit-border-radius: $num;
    border-radius: $num;
}

//转块元素
@mixin block ($width, $height) {
    width: $width;
    height: $height;
    display: block;
}

//转行内块元素
@mixin inline-block ($width, $height) {
    width: $width;
    height: $height;
    display: inline-block;
}


//屏幕中居中
@mixin pm-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


//文本省略
@mixin ellipsis($rowCount: 1) {
    @if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} @else {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $rowCount;
        -webkit-box-orient: vertical;
    }
}

//三角形（）
@mixin sanjiaoxing($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {
    width: 0;
    height: 0;
    border-style: solid;
    @if (bottom==$dir) {
        border-width: $size $size 0 $size;
        border-color: $color transparent transparent transparent;
    } @else if (top==$dir) {
        border-width: 0 $size $size $size;
        border-color: transparent transparent $color transparent;
    } @else if (right==$dir) {
        border-width: $size 0 $size $size;
        border-color: transparent transparent transparent $color;
    } @else if (left==$dir) {
        border-width: $size $size $size 0;
        border-color: transparent $color transparent transparent;
    }
}

//元素定位
@mixin postion ($type, $top, $right, $bottom, $left) {
    position: $type;
    top: $top;
    bottom: $bottom;
    left: $left;
    right: $right;
    & > #{$type} {
        color: #f00;
    }
}

// 隔行换色
@mixin ghhs($evenColor, $evenBgColor, $oddColor, $oddBgColor) {
    &:nth-child(2n) {
        color: $evenColor;
        background-color: $evenBgColor;
    }
    &:nth-child(2n + 1) {
        color: $oddColor;
        background-color: $oddBgColor;
    }
}

// 禁止文本被选择
@mixin user-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

//修改input placeholder颜色
@mixin placeholderColor($color: #fff) {
    &::-webkit-input-placeholder {
      color: $color;
    }
  
    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: $color;
    }
  
    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: $color;
    }
  
    &:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: $color;
    }
  }

  //元素初始化
  @mixin elinit ($w: auto,$h: auto,$c: #fff) {
      width: $w;
      height: $h;
      background: $c;
  }
  
  //元素居中
  @mixin content ($w,$h) {
      position: absolute;
      width: $w;
      height: $h;
      top: 50%;
      left: 50%;
      margin-top: -$h / 2;
      margin-left:  -$w / 2;
  }

  //阴影
  @mixin boxshadow ($x) {
      box-shadow: $x;
  }

sass 新手入门篇！！！附带常用@mixin方法！！！