scss用法整理

    刚刚开始学习前端，以为学会了css就掌握了前端的半壁江山，直到朋友说我他们现在基本上都用SCSS啦，今天学习了下也做个总结方便以后回顾（毕竟年纪大了哈哈哈）

首先要了解下SCSS的由来，因为有个叫Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升CSS. 它有很多很好的特性，但是它有类似Ruby的语法，没有花括号，没有分号，遵循严格的缩进，所以为了融合他们的优点SCSS就出现了，SCSS使得css性能更好定义更加简洁和灵活，下面我们了解下吧

• 第一个特性：嵌套，可以在父节点的样式定定义中嵌套子节点的样式定义，这样将父节点和子节点就可以放到一起，算是一个整合吧，感觉找起来也比较方便，另一方面感觉查找的更便捷了，因为分开定义会查找好几次父节点，现在是只查询一次父节点就可以找到父节点的其他子节点了

       代码案例（自己体会下哦）

        

• 第二个特性：自定义变量，将多次复用的值存储在一个变量中，这样我们在定义样式的之后直接调用变量就可以啦这样一个变量就可以用在相同样式的节点中，之定义一遍样式，这样显然减少了样式的大小肯定会加快下载速度的，让代码更性变了

     语法：$变量名：属性值（样式代码块中直接引用"$变量名"字就可以啦）

     

• 第三个特性：引入，将网页切分成片段后，给每个片段单独定义样式，让页面的布局更有独立性，打个比方一个系统中我们的导航栏侧栏都是一样的所以我们单独定义这两个部分的样式，

     语法：@import "css文件名（不需要带后缀）"

     @import引入外部的css样式，可以在CSS文档和HTML标签<style>中进行引用

      还可以通过@import将所有的css文件集合到一个文档中完后用gulp命令来生成最后的style.css文件完后通过

      

• 第四个特性：混合（Mixin），将样式参数值一样的样式进行封装，一般用的比较多的就是浏览器的兼容属性，

     语法：使用@mixin 样式属性名称（$变量名）来声明，完后用@include 样式属性名称（实际参数）看下面的例子

       

• 第五个属性：继承，如果A元素继承B标签的边框属性，那么A和B的边框样式就是一样的

    语法：@extend 选择器的名称（比如.test类选择器反正是已设置过的属性）