less语法全解及sass简介

1.less简介及less环境搭建，首先写less语法前不得不提下sass，之前不了解less和sass之前，这两个东西困扰了我好久，这两个到底是有什么区别呢，其实less和sass都是一种动态样式语言，但是sass运行在服务器端，sass需要ruby环境(ruby和Python一样是服务器脚本语言)，less是客户端和服务器端都可以用，less可以运行在Node、浏览器和Rhino平台上，less的运行需要node环境，其他的就是语法有点不太一样，less是@，而sass是$。

2.用javascript的思维看less会更好理解，下面贴上less语法的代码截图，下面的截图代码均是lees代码，想要看编译后的css代码需要自己编辑器查看下，截图代码每个less语法都有示例代码，认真看都能看懂：

1.首先新建less文件，例如：demo.less，然后在编辑器中打开，首先当我们想要导入其它less文件的时候，我们可以直接@import  'base';其中base为base.less文件，默认的导入less文件可以省去less格式，我们也可以导入css文件，PHP文件，见下图代码示例：

thy

2.less变量的声明：我们可以直接使用@background:#fff;  @color:#e53fac;来声明两个项目经常要用到的背景颜色和字体颜色，这样我们就可以在项目任何地方使用这两个颜色，当要更改项目风格的时候我们可以直接更改这两个变量就可以全部更改项目的背景色和字体颜色，示例见下图。

thy

注意：上面的变量引用时还可以进行加减乘除，例如color:@color+28，一样是正确的

3.less变量的灵活性，感觉当成js会更好理解，你可以把它当做变量在传递，见下图示例，上代码：

thy

4.less变量的妙用：当我们的项目图片都在一个文件夹时，我们定义一个图片路径变量，调用时只写一个图片名，以后图片换地址了，直接换基础路径，所有的图片路径都会被更换完成，但是注意这里的路径是less文件为起点，而不是引用less文件的html文件为起点。话不多说，上代码容易理解：

thy

5.less变量连续使用，感觉像是连续传值，不知道用处大不大，，上代码：

thy

注意上面：less内部代码使用&来表示自己，上面的&:after就是box:after。

6.less变量的作用域，less和js一样有全局变量和局部变量，上代码演示：

就近原则的less变量

7.less函数的使用，当我们写圆角，阴影，透明度的时候不可避免的会写成下面的样子，如果每个用到的地方都这样写也太麻烦了，下面先看css的写法，以圆角为例：

css的圆角兼容写法

下面看看less的写法及调用，less可以直接编译成三种兼容的css写法，省去了自己写不少兼容的代码：

less编写兼容性代码

下面是box-shadow和text-shadow的示例：

box-shadow和text-shadow

8.less的选择器：

less样式内部用&表示自己

9.less样式嵌套书写，例如，当我们有一个div.box里面嵌套了一个div.box1里面div.box2,                                                                          如：

那么我们在书写less时候写box2的样式就不用.box .box1 .box2{}这样来写，less可以让我们直接以层级结构的形式来嵌套着书写我们的样式，更能直观的表达界面的结构，如下图：

层层嵌套的less样式写法

10.less样式的引用，假如你上面写了一样的样式的，下面又要用到怎么办，less提供了一种简写的方式，只需要.class上面那个样式的类名，就把他的样式直接都拿过来了，非常方便。例如：

less样式的引用

11.less的判断句：什么？你没看错，less也可以做判断是否让某个样式显示出来，写js呢？不管有多大用，感觉很强大有没有，如果我们定义了一个开关来控制样式，那么只有我们的开关为true时，样式才会起效，例如，下面我们声明了一个全局变量@toggle:true;然后我们在样式表里面做判断，只有当@toggle:true时代码才会生效，见代码：

less的判断句

12.less的extend，就是less的继承，可以通过extend来继承其他class的样式，例如：下面的两个class里面有两个color，需要注意的是这两个样式的顺序会对结果产生影响，见下图：

less的继承

less的继承

注意上面继承样式的顺序，不同的顺序会产生不同的结果。

3.差不多上面的less语法代码示例已经足够满足我们日常的项目的需要了，但是上面写的也不过是less经常要用的功能，更多的less用法参见less中文官网。

******下面是和上面一样的内容，只不过是文字叙述，可以不看，文字毕竟没有代码来的直接，下面仅用作记录而已。

1.less变量篇：

less变量-背景色：在less文件中声明变量@background:red;下面使用时：                 .box{background:@background;}，这样非常适合一个网站的背景，当改动网站背景时只需改动上面的变量，网站的背景就会被更改完成

less变量-字体颜色：@color:#000;使用：.box{color:@color;}，也可以在使用时执行加减乘除运算，例：.box{color:@color + 111;}，css输出：.box{color:#111;}

less变量-灵活性：@a:color；当我们定义了一个变量@a时，还可以这样用：.box{@a:red;background-@a:#000}

less变量-妙用less变量：1.当做class使用：@bg:box；下面使用的时候我们就可以直接.@{bg}{ }；输出：.box{ };  2.当做路径使用，如：@picturePath:"../img/"，那么当我们把项目图片都放到img文件夹的时候就不用每次填写长长的路径，示例：.@{bg}{background:url("@{picturePath}baby.jpg")}，输出：.box{background:url("../img/baby.jpg")}；只需要写一个图片名就可以了，有没有方便了一点，但是注意：此处的变量@picturePath是less文件所在的文件夹为起点，不是html文件的起点位置

less-变量-连续用：@str:"123",@number:"str";使用示例：content:@@number;输出：content："123"

less变量作用域：less的变量也有作用域的区别：当在一个样式里面定义了@color变量的时候，他会使用就近的@color变量，而不是全局的@color变量。

2.less函数篇：

*圆角：当我们写一些圆角，阴影，透明度这些的时候，免不了写一些兼容性的代码，如：.box{border-redius:100%;-webkit-border-redius:100%;-moz-border-redius:100%;}，这样写起来不仅麻烦，也繁琐，我们就可以利用less函数来写成下面这样：.borderRadius(@borderRadius:100%){border-redius:@borderRadius;-webkit-border-redius:@borderRadius;-moz-border-redius:@borderRadius;}；@borderRadius也可以写成：@arguments，这样我们下面就可以这样调用                                                                                                                            .box{ .borderRadius;}  /  .box{ .borderRadius();}  .box{ .borderRadius(50%);}    .box{ .borderRadius(10px 20px 30px 40px);}，如果传递了参数，按照传入的参数来，如果没有传递参数，默认是我们写好的100%；这样只需一个函数名，我们就完成了同个样式加前缀写三遍的问题。

*阴影：.boxShadow(@boxShadow:0  2px  3px  rgba(0,0,0,0.9)){box-shadow:@boxShadow;-webkit-box-shadow:@boxShadow;-moz-box-shadow:@boxShadow;}，当我们的网站主题风格文本和div都有阴影的时候，这个非常有用，调用时和上面的圆角一样，参数我们已经设好了默认，也可以自己传，传的参数就和box-shadow的官方参数一样，相似的还有文本阴影textShadow。

3.less选择器篇：当我们写代码 a{  &:hover{ background:red } };这样选择到的是a元素，输出a:hover{ background:red }，当我们写.div{ &_a{color:red}  &_b{color:blue} }，编译后：.div_a{color:red};.div_b{color:blue},

4.less扩展篇：                                                                                                                        ①less的嵌套规则：.box{   .box1{  .box2{}  }  }，加入我们最外层一个div类名是box，里面套一个div类名是div1，div1里面套了一个div，类名是div2，那么我们再写样式的时候就可以直接嵌套着这样一直写下去。

②less样式引用，如果我们定义了两个样式：.box{background:red}，.box1{color:red; .box}，示例了在box1中引用box的样式背景颜色。注意如果需要.box里面元素的样式的话需要写成.box1{color:red;  .box > .boxChild;}

③less的判断句：如果我们声明了一个变量@toggle:true;那么我们也可以写：.box when(@toggle  = true){color:red}，那么只有当toggle为true时字体颜色才是红色的，这非常适合某些样式只有偶尔用的时候，我们可以就这样加个开关，这个我们好像再写js啊

④：less的extend。当我们写了样式.content1{color:red}，.content2{ &:extend(.content1);color:blue};这样，content2的字体颜色也会变成red，自己的color:blue会被覆盖 但是如果我们把content1的样式放在content2样式下面的话，content2的字体颜色就是是自己的颜色blue，不会被覆盖。

⑤：less的导入:我们可以在一个less文件中导入另一个less文件，例如：@import  "less文件名",可以这样：@import  "less"  /  @import  "less.less"  /  @import  "less.css"  /  @import  "less.php"，导入的less带不带扩展名都可以，对，你没有看错，还可以将PHP文件导入进来，导入也有好多参数可选，有兴趣可以查看less官网或者less中文官网，或者bootstrap官网，因为bootstrap也对less进行了翻译。

注意：导入文件的时候不可避免的会产生问题，如：我们在文件中定义了变量@color，导入进来的文件里面也有变量@color，那么起作用的是当前文件的变量@color，而不是导入文件的@color。