今日完成：

less优点：

1.结构清晰 便于拓展 

2.屏蔽浏览器私有语法差异

3.多重继承

缺点：需要编译

sass less 主要区别：

实现方式：

less基于js 在客户端处理

sass基于ruby 在服务器处理

变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持

输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

作用域 ：sass 没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss 文件中。注意变量名重复； less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

less语法：

1.变量(1)赋值给变量，作为常亮（只能定义一次）

     （2）可以用变量名定义为变量

 2.混合  定义通用的属性，然后调用

 3.带参数混合  （1） 可以像函数一样定义一个带参数的属性集合

               （2） 还可以给参数设置默认值

               （3） 也可以定义不带参数属性集合 隐藏，不让它暴露到css中

                (4)  @arguments包含了所有传递进来的参数.。不必单独处理每一个参数

 4.模式匹配    （1） switch 类似选择函数

               （2） 可匹配多个参数

 5.导引表达式  （1）根据表达式进行匹配，而非根据值和参数匹配   when

               （2）导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，除去关键字true以外的值都被视示布尔假

                (3)导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功   ,相当于and

               （4）导引可以无参数，也可以对参数进行比较运算 

               （5）如果想基于值的类型进行匹配，可以使用is*函式

               （6）常见的检测函式：iscolor   isnumber  isstring  iskeyword  isurl

                    判断一个值是纯数字，还是某个单位量，可以使用下列函式：ispixel  ispercentage   isem

               （7）使用and关键字实现与条件

               （8）使用not关键字实现或条件

 6.嵌套规则    （1）以嵌套的方式编写层叠样式

               （2）&符号用于写串联选择器，而不是写后代选择器。这点对伪类尤其有用，如:hover和:focus

 7.运算 （1）任何数字、颜色或者变量都可以参与运算

        （2）less运算能够分辨出颜色和单位

 8.颜色函数 （1）less提供了一系列的颜色运算函数. 颜色会先被转化成 HSL色彩空间, 然后在通道级别操作

lighten(@color, 10%);     // 返回一个比@color低10％更轻的颜色

darken(@color, 10%);      // 返回一个比@color高10％较暗的颜色

saturate(@color, 10%);    // 返回比@color多饱和度10％的颜色

desaturate(@color, 10%);  // 返回一个比@color少饱和度10％的颜色

fadein(@color, 10%);      // 返回一个比@color少10％透明度的颜色

fadeout(@color, 10%);     // 返回一个比@color多10％透明度的颜色

fade(@color, 50%);        // 返回一个颜色透明度为50％的颜色

spin(@color, 10);         // 返回色调比@color大10度的颜色

spin(@color, -10);        // 返回一个比@color小10度色调的颜色

mix(@color1, @color2);    // 返回一个混合@ color1和@ color2的颜色

hue(@color)          //获取色相

saturation(@color)     //获取饱和度

lightness(@color)      //获取明度

9.Math 函数 less提供了一组方便的数学函数，可以使用它们处理一些数字类型的值

round(1.67); // returns `2`

ceil(2.4);   // returns `3`

floor(2.6);  // returns `2`

percentage(0.5); // returns `50%`

10.命名空间 为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包

11.作用域 less中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止

12.注释 CSS形式的注释在less中是依然保留，less同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉

13.Importing （1）可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带

             （2）如果想导入一个CSS文件而且不想less对它进行处理，只需要使用.css后缀就可以，这样less就会跳过它不去处理它

14.字符串插值 变量可以用类似ruby和php的方式嵌入到字符串中

15.避免编译 有时候我们需要输出一些不正确的CSS语法或者使用一些 less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个 ~，并将要避免编译的值用 “”包含起来

16.JavaScript 表达式 （1）JavaScript 表达式也可以在.less 文件中使用.，可以通过反引号的方式使用

                     （2）也可以同时使用字符串插值和避免编译

                     （3）也可以访问JavaScript环境

                     （4）将一个JavaScript字符串解析成16进制的颜色值，可以使用 color 函数

遇到问题：

1.下拉菜单的z-index=1000还是被挡住了

原因：

之前为清除浮动使用了overfloat:hidden(overflow:auto 也有影响)

2.为了表单元素统一和用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。

3.选择器中+ 表示紧邻的兄弟元素

4.图片的自适应（fluid image）  img { max-width: 100%;}

对于大多数嵌入网页的视频也有效，所以可以写成：img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：img { -ms-interpolation-mode: bicubic; }

子元素margin-top影响父元素

解决办法：

1. 父级或子元素使用浮动或者绝对定位absolute

浮动或绝对定位不参与margin的折叠

2. 父级overflow:hidden;

3. 父级设置padding（破坏非空白的折叠条件）

4. 父级设置border