less&&sass预处理器

Less（更精简的样式表）和Sass（语法很棒的样式表）

区别概述

预处理器Less和Sass都是用于编写CSS的工具，它们的主要区别在于以下几点：

1.    语法：Less使用类似于CSS的语法，而Sass使用类似于编程语言的语法，包括变量、函数、条件语句和循环等。

2.    扩展性：Sass提供了更多的扩展功能，如@extend、@mixin和@function等，可以使样式表更加模块化和可重用。

3.    编译方式：Less需要客户端编译，即需要在浏览器中加载Less.js文件进行编译，而Sass则需要在服务器端进行编译，然后输出为纯CSS文件。

4.    生态系统：Sass拥有更广泛的生态系统和社区支持，有许多常用的工具和框架（如Compass、Bourbon等）可以配合使用。

区别	less	sass
声明变量	@声明变量	$声明变量
编译环境	通过js编译在客户端处理	通过ruby 在服务器端处理
语句支持	支持条件语句，if{}else{},for{}循环等等	支持语句（@调用）
输出设置	less没有输出设置	4种输入选项：nested,compact,compressed和expanded，(默认为neste）
库	ul组件库Bootstrap	工具库compass

nested：嵌套缩进的css代码；expanded：展开的多行css代码；compact：简洁格式的css代码；compressed：压缩后的css代码。

变量

1.Less申明变量

        变量的语法： @变量名

        

        变量发生重名时，会优先使用比较近的变量，可以在变量声明前就使用变量，如下：

        

2.Sass申明变量

        

嵌套继承

嵌套后样式会被继承(less和SaaS都支持选择器的嵌套和继承)，如下box4会继承box2的样式:

        

函数

自定义样式函数：（页有有些自带内置函数）

less

        

sass: @function 关键字来定义

        

内置函数：Sass提供了一些内置函数（如颜色运算、字符串操作等)，用于处理样式中的计算和转换操作，而Less没有这些内置函数。

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

注意，如果运算符两侧变量单位不同，在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。（没有单位则不做转换）

@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

对颜色进行算术运算： 

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

导入方式

导入方式：Less使用@import语句来导入其他Less文件，而Sass使用@import语句或@use指令来导入其他Sass文件。

        总体而言，Sass相对于Less来说更加强大和灵活，但也需要一些学习成本和额外的工具支持，（注意：less中的单行注释，注释中的内容不会被解析到css中；css中的注释，内容会被解析到css文件中）。