这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【sass和less是什么？ 】
1.背景介绍。
sass和less是什么？
1.1.SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
1.2.LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
2.知识剖析
ps详细操作见ppt，这是一个大纲。
sass有哪些基本用法？
2.1.变量——SASS允许使用变量，所有变量以$开头。
2.2.计算功能——SASS允许在代码中使用算式
2.3. 嵌套———SASS允许选择器嵌套。
2.4 颜色函数
3.代码的重用
3.1.继承————SASS允许一个选择器，继承另一个选择器。
3.2。Mixin——Mixin有点像C语言的宏（macro），是可以重用的代码块。
3.34 插入文件
4.高级用法
1.1 条件语句
1.2 循环语句
1.3 自定义函数
3.常见问题。
sass和less有哪些相同点？
4.解决方案：
混合（Mixins）：class中的class;
参数混合（Parametric）：可以像函数一样传递参数的class
嵌套规则（Nested Rules）：class中嵌套class，从而减少重复的代码；
运算（Operations）：css中的数学计算；
颜色功能（Color function）：可以编辑你的颜色；
命名空间（Namespaces）：样式分组，从而方便被调用；
作用域（Scope）：局部修改样式；
JavaScript表达式(Javascript evaluation)：在CSS样式中使用Javascript表达式赋值。
5.编码实战，见ppt
6.扩展思考。
sass和less有哪些区别？
1、Mixins，此处我译成了混合，也有很多同行朋友将其译成混入，不管是混合也好，还是混入也罢。其主要意思是将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性。
2、Parametric，带参数混合，像函数一样在class A中定义一个参数的默认值、或者参数属性集合，还可以是@arguments蛮量，然后将定义好的class A引入class B中
5、Color function颜色功能，颜色的函数运算，颜色会先被转化成HSL色彩空间，然后在通道级别操作。
6、Namespaces命名空间，将一些变量或者混合模块打包封装，更好的组织CSS和属性集的重复使用；
7、Scope作用域，先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作域非常的相似；
8、Javascript evaluation，javascript的表达式,在Less或sass文件中可以使用js的表达式,用来赋值。
7.参考文献：
8.结语
之前对sass和less没有太多了解的小伙伴们，通过这一次小课堂分享后肯定无法做到让你直接上手会用，但希望能让你对sass和less的使用方法建立起一个初步的印象，并对其产生兴趣。此后多多使用，就会了解的更加深入，用起来也是得心应手。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231614.html原文链接：https://javaforall.net
