CSS样式——Less 与 Sass

• 了解 Less 与 Sass

  • Less 与 Sass 都是css的拓展语言
  • less 和 sass 最主要的区别是less是通过Javascript编译，而sass是通过ruby编译的
  • 如果没有引入前端工程化，less会消耗客户端性能，sass会消耗服务端性能
  • 引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别，只是sass是基于ruby，所以每次npm的时候相对慢一点点

• Less 与 Sass 之间的区别

  	Less	Sass
  变量定义	@变量名：值	$变量名：值
  变量使用	属性：@变量名	属性：$变量名
  插值使用	@变量名：属性名 @{变量名}：属性值 选择器@{变量名}{}	$变量名：属性名 #变量名：属性值 选择器#{变量名}{}
  作用域	就近原则使用 可先使用，后定义	就近原则 必须先定义后使用
  嵌套使用	后代选择器(两个都支持)： 选择器1{     选择器2{         选择器3{}     } }	伪类选择器(两个都支持)： 选择器1{     选择器2{         选择器3&:hover{}     } } 样式嵌套（Sass支持）： font:{size:16px;          weight：500 }
  运算符	+ - * /	Sass ‘/’ 默认为分隔符
  转义	转为分隔符：~”20px/1.5“	转为除号：(20px/1.5)
  函数	四舍五入：round	百分比：percentage 随机数（Less不支持）：randm
  自定义函数(两个都支持)	@function 函数名(参数){     @return 返回值 }
  混入	定义： .hide(@参数) 使用： .hide(参数)	定义： mixin show(参数){} 使用： 选择器(@inculude show;)
  命名空间	定义： #name(参数){} 使用: #nm.show;	Sass不支持
  继承	被继承： 选择器{} 使用继承： &extend(选择器)	被继承： %选择器{} 使用继承： @extend(%选择器)
  合并	逗号合并：样式名+：值 空格合并：样式名+_：值	需要合并内容 $样式名{a:\_\_,b:__} 逗号合并： map-value($样式名) 空格合并： zip(map-value($样式名)...)
  媒体查询	与CSS文件写法相同
  条件	when关键字	@if @else @else if
  循环	递归思想	@for()
  引入文件(两个都支持)	@import: '文件路径'