Less 和 Sass - 爱码网

LESS
SASS

sass 与 less 的区别与学习： https://www.cnblogs.com/roashley/p/7731865.html 或

　　　　https://www.cnblogs.com/feng-wu/p/6040387.html（less教程，变量,混合,匹配,运算,嵌套...）

使用css预处理器的好处：

1、css有很多的兼容性问题，使用预处理器可以把某个兼容的属性写在一个函数里面。其它的地方需要用到这个属性，直接调用这个方法就可以了。

　　就不需要对应浏览器做兼容处理了（比如对应不同浏览器加不同的前缀）。

.box-shadow (@string) {
    -webkit-box-shadow: @string;
    -moz-box-shadow:    @string;
    box-shadow:         @string;
}

2、less中变量和函数都是不编译的，只有在使用它们的地方才会编译它们。这样的一组会用到属性，放在less文件上，编译后，没有一点的存储占用。

1、注释（css中注释只有 /* */ 这一种):

　　less中注释有两中，/* */注释编译后保留；// 注释编译后消失。

2、@import " "; 可以导入其它的less文件。

3、避免编译： ~“ ” 或 ~‘ ’ 可以避免less把不需要编译的属性值给编译了。如 width:~"calc(300px - 30px)" ;这个不能让less计算，CSS3中是有这个运算功能的。这个表达式是给浏览器解析的，不是less。https://www.imooc.com/video/4839

4、伪类写法: ： https://www.cnblogs.com/ranzige/p/3654296.html

5、less语法详解： https://blog.csdn.net/iamcgt/article/details/73028435

其它参考：https://blog.csdn.net/lidysun/article/details/52537770

6、混合

　　　　　参考：https://blog.csdn.net/iamcgt/article/details/73028435?utm_source=itdadao&utm_medium=referral

　　—— 继承其它的选择器属性。（只是继承哪个选择器的属性，选择器名没有影响）

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

　　—— 函数（带参数）

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius(4px);
}

　　 —— 函数 （参数设置默认值）

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius;  
}

　　—— 函数 （不带参数），用于隐藏这个属性集合，不让它暴露到CSS中去。

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

　　—— 函数 （@arguments包含了所有传递进来的参数.。不必单独处理每一个参数）

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

sass

1、less有两种注释，/* */是会被编译到css文件中的。//不会

2、scss中的变量（Variables）在SASS中你也可以声明变量，并在整个样式表中使用。

3、scss中选择器嵌套特性，我们可以在父元素的大括号{}里写这些元素。同时可以使用&符号来引用元素的父选择器（这个主要是伪类的和组合选择器有用）。

4、scss中属性嵌套，

5、scss中Mixins 简单的说Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。

6、scss中选择器继承，这个的一个明显的优点是，就是在有相同类名或标签名的选择器中，出现耦合的可能性比较少，因为前面已经有选择器给它限制了。可以很方便。

7、.css.map文件的作用是让浏览器显示的css在地几行代码会对应到scss文件的第几行。这样我们要通过修改sass文件来修改css代码就会很方便，如果直接在css中改就不用这个东西了。

总结：scss是sass新的语法，scss（sass）中的四个基本特性：变量、嵌套、Mixins和继承的基本使用规则。还有@function函数方法

sass的其他的特性，碰到需要的时候在学吧。