第一次接触CSS预编译，然后对比后发现其实less的上手容易度确实比sass高不少，再加上公司项目也是使用的less。所以想想还是根据网上的各种教程，整理出来了一些比较基础的、而且比较能让我们这种初学者快速上手的例子。

菜鸡一只，代码要是有错或者表达不清的地方，请各位批评指正！

那么，现在我们就开始正文部分了。

1.什么是less
LESS是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作
（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文
件“style.css”直接改成“style.less”，他也能正常工作。如：

< link rel="stylesheet/less" href="less/style.less" />
Less现在可以在客户端（如：IE+,Webkit,Firefox）和服务器（如node.js）上运行。前面也说过Less是CSS的一种扩展，他不但
向后兼容，而且在现有的CSS语法基础上增加许多额外的功能。
1.1 如何使用less
要成功的使用Less，需要一个脚本的支持，这个脚本我们把他叫做less.js。然后在页面中引用即可
1
2
< link rel="stylesheet/less" type="text/css" href="less/styles.less">
　　< script src="js/less.js" type="text/javascript"></ script >

2.LESS包含了什么？
Less具体有哪些东东呢？Less要CSS语法的基础上进行了扩展，主要包含： Variables(变量)，
Mixins(混入)、Nested Rules(嵌套规则)、Functions & Operations(函数与动作)等等
然后，需要解释下一些在LESS中常用的内容：
2.1、变量——Variables
Less中的变量充许你在样式中的某个地方对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以了
1
2
3
4
5
6
7
8
<br> /*======== 定义变量===========*/ <br>@ color : #4d926f ;
/*======== 应用到元素中 ========*/
#header {
     color : @color;
}
h 2 {
     color : @color;
}

编译为CSS后：

1
2
3
4
5
6
7
<br> /*======= Less 编译成 css ======*/
#header {
     color : #4d926f ;
}
h 2 {
     color : #4d926f ;
}

Less中的变量还具有计算功能，如：
1
2
3
4
5
<br>@nice-blue: #5b83ad ;
@light-blue: @nice- blue + #111 ;
#header {
     color : @light- blue ;
}

编译为CSS后：

1
#header { color : #6c94be ;}
需要注意的是，less的变量实际上应该为 常量，不存在二次赋值的情况，如下所示　　

1
2
3
4
@ color : #253636 ;
@highlight: "color" ;
@ color : #ff3636 ;
#header { color : @highlight;}

但是编译后发现：　　

1
#header{ color : #ff3636 }

　　代码中可以看出，最后一次定义的@color覆盖了前面的内容

2.2 混入——Mixins
混入其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个
类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一人类中当作他的属性；另外混入也像一个带有参数的functions，如
下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
<br> /*========= 定义一个类 ===========*/
.roundedCorners(@radius: 5px ) {
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
     border-radius: @radius;
}
/*＝＝＝＝＝＝＝＝＝＝ 定义的类应用到另个一个类中 ＝＝＝＝＝＝＝＝＝＝＝*/
＃header {
     .roundedCorners;
}
#footer {
     .roundedCorners( 10px );
}

编译后的CSS如下：

1
2
3
4
5
6
7
8
9
10
#header {
     -moz-border-radius: 5px ;
     -webkit-border-radius: 5px ;
     border-radius: 5px ;
}
#footer {
     -moz-border-radius: 10px ;
     -webkit-border-radius: 10px ;
     border-radius: 10px ;
}

需要注意一点：这样任何CSS的类或ID下的样式都可以当作 变量，使用混入模式用来当作另一个元素的属性值。
混入(Mixin)有一个名词叫“混入参数（Parametric Mixins）”，上面也说过。Less具有一个特殊类型的规则集，那就是 一个类
可以当作另一个元素的属生值，并且还可以接受其自己的参数，我们来看一个典型的实例：
1
2
3
4
5
6
7
8
9
10
11
12
13
/*========== 定义一个规则，并且不设置默认参数值 ============*/
.borderRadius(@radius){
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
     border-radius: @radius;
}
/*============ 应用到元素中 ============*/
#header {
     .borderRadius( 10px ); /*把10px传给变量@radius*/
}
.btn {
     .borderRadius( 3px ); /*把3px传给变量@radius*/
}

编译后CSS代码如下：
1
2
3
4
5
6
7
8
9
10
#header {
     -moz-border-radius: 10px ;
     -webkit-border-radius: 10px ;
     border-radius: 10px ;
}
.btn {
     -moz-border-radius: 3px ;
     -webkit-border-radius: 3px ;
     border-radius: 3px ;
}

我们还可以给Mixins的参数定义一人默认值，如
1
2
3
4
5
6
7
8
.borderRadius(@radius: 5px ){
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
     border-radius: @radius;
}
.btn {
     .borderRadius;
}

编译后的CSS如下：
1
2
3
4
5
.btn {
     -moz-border-radius: 5px ;
     -webkit-border-radius: 5px ;
     border-radius: 5px ;
}

还有一种方法就是给Mixins不定我任何参数，特别是在你想隐藏输出的CSS规则，但又想在别的规则中包含他的属性，使用这种
不带参数的Mixins将非常有用的，我们来看一段代码：
1
2
3
4
5
6
7
8
9
.wrap(){
     text-wrap: wrap;
     white-space : pre-wrap;
     white-space : -moz-pre-wrap;
     word-wrap: break-word;
}
pre {
     .wrap;
}

编译后的CSS如下：

1
2
3
4
5
6
pre {
     text-wrap: wrap;
     white-space : pre-wrap;
     white-space : -moz-pre-wrap;
     word-wrap: break-word;
}

Mixins还有一个重要的变量：@arguments。@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他

将表示所有的变量，当你不想处理个别的参数时，这个将很有用，我们来看一个阴影的实例：
1
2
3
4
5
6
7
8
.boxShadow(@x: 0 ,@y: 0 ,@blur: 1px ,@ color : #000 ){
     -moz-box-shadow: @arguments;
     -webkit-box-shadow: @arguments;
     box-shadow: @arguments;
}
#header {
     .boxShadow( 2px , 2px , 3px , #f36 );
}

再看下编译后的CSS：
1
2
3
4
5
#header {
     -moz-box-shadow: 2px 2px 3px #FF36 ;
     -webkit-box-shadow: 2px 2px 3px #FF36 ;
     box-shadow: 2px 2px 3px #FF36 ;
}

3、嵌套规则——Nested Rules
嵌套规则主要是针对一多层元素的样式规则写法，以前我们在多层元素中写样式，要么从头选下来，要么另外给这个元素加上类
名或id名，但在Less中我们不需要这样操作了，我们只要使用他的嵌套规则就可以完成，我们来看一个简单的实例：
简单的页面结构如下：
1
2
3
4
< div id="header">
< h1 >< a href="">W3cplus</ a ></ h1 >
< p >记述前端那些事——引领Web前沿</ p >
</ div >

然后接下来看看less部分：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#header {
     display : inline ;
     float : left ;
     h 1 {
         font-size : 26px ;
         font-weight : bold ;
     a {
         text-decoration : none ;
         color : #f36 ;
         &:hover {
             text-decoration : underline ;
             color : #63f ;
            }
         }
     }
     p {
         font-size : 12px ;
     }
}                   

来看看编译之后的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#header {
     display : inline ;
     float : left ;
}
#header h 1 {
     font-size : 26px ;
     font-weight : bold ;
}
#header h 1 a {
     color : #FF3366 ;
     text-decoration : none ;
}
#header h 1 a:hover {
     color : #6633FF ;
     text-decoration : underline ;
}
#header p {
     font-size : 12px ;
}

使用Less的嵌套规则让你的CSS代码更简洁，因为它的写法就是模仿HTML的DOM结构来写的。
从上在的实例代码中，都很清楚的了解到，嵌套规则可以让我们写样式时能像DOM树形那样有结构的去写代码，从而减了选
择器的层级关系，更主要的是这样使用我们的代码更简洁，更具有阅读性，这种嵌套规则对我们操作伪元素更为方便和重要，
如:hover，:link,:focus等，看下实例：
1
2
3
4
5
6
7
8
a {
     color : red ;
     text-decoration : none ;
     &:hover {
         color : blue ;
         text-decoration : underline ;
     }
}

编译后的CSS如下：
1
2
3
4
5
6
7
8
a {
     color : red ;
     text-decoration : none ;
}
a:hover {
     color : blue ;
     text-decoration : underline ;
}

注意了，这里的&很重要，在Less中嵌套书写中有没有&区别是完全不一样的效果，有&时解析的是同一个元素或此元素的
伪类，没有&解析是后代元素：
1
2
3
4
5
6
7
8
#header {
     &.fl{
         float : left ;
     }
     .mln {
         margin-left : 0 ;
     }
}

然后看下编译后的CSS：
1
2
#header.fl{ float : left ;}
#header .mln { margin-left : 0 ;}

4、Functions & Operations
其实这个部分的内容我还没有完全理解透，但是在项目有很多地方都在使用并且很多博文中也有提及到，所以我觉得虽然暂时无法理解，但是还是要作好记录。书读百遍，其义自见，代码和理论这种东西也不例外。做好记录并且时常复习下，再结合工作中的使用，这种问题就会慢慢的由自己的答案
这两个功能很有意思的。在我们平时的样式中，有很多元素的属性都具有一定的比例或倍数。那么这两个刚好可以帮我们实现这
方面的功能，首先来看Operations（直译“动作”）他可以让你对元素的属性值，颜色进行四则运算：加、减、乘、除。而
Function就像javascript中的function一样可以让你进行你想要的值的操作。下面我们先来看一个简单的实例：
1
2
3
4
5
6
7
8
9
@the- border : 1px ;
@base- color : #111 ;
@red: #842210 ;
#header {
     color : @base-color * 3 ;
     border : 1px solid desaturate(@ red , 100% );
     border-width : @the-border @the-border* 2 @the-border* 3 @the-border;
     border-color :desaturate(@ red , 100% ) @ red lighten(@ red , 10% ) darken(@ red , 30% );
}

来看下编译后的CSS:
1
2
3
4
5
6
#header {
     color : #333 ;
     border : 1px solid #4a4a4a ;
     border-width : 1px 2px 3px 1px ;
     border-color : #4A4A4A #842210 #B12E16 #000000 ;
}

这里提出一点，Less中的Operations主要是针对任何数字、颜色、变量的操作，可以对其是行加、减、、乘、除或者更复杂的
综合运算；而Functions主要是针对Color funtions，Less提供了多种变换颜色的功能，下面多们来俱体看一下这两个功能的
使用。
先来看Operation的使用
1
2
3
4
5
6
7
@base: 5% ;
@filler: @base* 2 ;
@other: @base + @filler;
#header {
     color : #888 / 4 ;
     height : 100% / 2 + @filler;
}

编译后的CSS：
1
2
3
4
#header {
     color : #222222 ;
     height : 60% ;
}

上面是一些简单的四则运算，它们都是在同一单位下进行操作，现在我们一起来看一个不同单位的操作
1
2
3
4
@var: 1px + 5 ;
#header {
     border : @var solid red ;
}

编译后的CSS如下：
1
#header { border : 6px solid red ;}
上面的代码直接反应出了，“@var: 1px + 5”，Less最终解析的值是“6px”。在Less中我们同样可以像做小学算术一样，使用
括号“（）”来改变其运算的先后顺序，如：
1
2
3
4
5
@var: 20px ;
#header {
     width : @var + 5 * 2 ;
     height : (@var + 5 ) * 2 ;
}

看一下编译后的结果：
1
2
3
4
#header {
     height : 50px ;
     width : 30px ;
}

从结果中我们很明显的得出他们的区别
@var: 20px;
#header {
width: @var + 5 * 2;/* 先计算了5 * 2 = 10 然后在计算了 @var + 10 = 30px,其实就是"@var+(5*2)"*/
height: (@var + 5 ) * 2;/*先计算了(@var + 5) = 25px,然后在计算了25*2=50px，因为括号更具有优先权，小学数学题*/
}
Less中还提供了一个Color Functions，他具有多种变换颜色的功能，先把颜色转换成HSL色，然后在此基础上进行操作，具体包
括以下几种：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
使用这种functions方法很简单：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@base: #f04615 ;
#header {
color : @base;
     h 1 {
         color : lighten(@base, 20% );
             a {
                 color : darken(@base, 50% );
                 &:hover {
                     color : saturate(@base, 30% );
                 }
             }
         }
     p {
         color : desaturate(@base, 60% );
     }
}       

来看下编译后的CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#header {
     color : #F04615 ;
}
#header h 1 {
     color : #F69275 ;
}
#header h 1 a {
     color : #060200 ;
}
#header h 1 a:hover {
     color : #FF3E06 ;
}
#header p {
     color : #A56F60 ;
}

大家还可以通过这样的方式提取颜色值
hue(@color); // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color); // returns the 'lightness' channel of @color
下面我们来看一下如何取得他的颜色
1
2
3
4
@ color : #f36 ;
#header {
  　　 background-color : hsl(hue(@color), 45% , 90% );
}

编译后的代码如下：
1
#header { background-color : #F1DAE0 ;}

ps.这里其实我需要给自己写一个类似于书签之类的标注吧...毕竟这块对于颜色的控制确实不算搞的太明白，所以还是换成红色文字提醒下自己，多看几遍，多写两行代码。

5、命名空间——Namespaces
有时候你想把一些变量或mixins组织起来，并将他封装，想用的时候就把要关的一部分取出来，那么我们将在前面的mixins基础
上将其功能扩展，比如说我们有一个这样的库：
1
2
3
4
5
6
7
8
9
#bundle {
     .button () {
         display : block ;
         border : 1px solid black ;
         &:hover { background-color : white }
     }
     .tab { ... }
     .citation { ... }
}       

现在在实际操作中，我们header中的a样式和.button一样，那么我们就可以这样操作：
1
2
3
4
#header a {
     color : orange;
     #bundle > .button;
}

换过一种思维来说，如果页面上有几个部分的样是完全一样的，或者只是部分不同，我们就可以这样来写，就如上面的代码，
#bundle可是以web页面中已存在的元素，然后#header中的a元素和#bundle中的.button样式是一样的，那么我们就可以把
#bundle中 .button的所有样式引用到#header中的a元素上。
6、变量范围——Scope
Less中的变量和别的程序语言一样，他的变量也有一个范围概念，这个概念就有点像局部变量和全局变量一样，只是在Less中采
取的是就近原则，换句话说，元素先找本身有没有这个变量存在，如果本身存在，就取本身中的变量，如果本身不存在，就寻找
父元素，依此类推，直到寻找到相对应的变量，我们来看个简单的实例：
1
2
3
4
5
6
7
8
9
10
@var: red ;
#page {
     @var: white ;
     #header {
     color : @var; // white
     }
}
#footer {
     color : @var; // red
}

7、Less的注解——Comments
Less中的注解有两种方式，单行注解很像js中的，如：
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }
Less中的多行注解和使用css中的一样：
/* Hello, I'm a
CSS-style comment
*/
.class { color: black }
当然单行注解也可以使用css的方式注解，本人更强调使用css中的注解方式：
/* Hello, I'm a CSS-style comment */
.class { color: black }
8、客户端的使用——Client-side usage
客户端的使用其实好简单，我们最开始引用的就是客户端的使用方法，使用这种方法前提条件是需要一个less.js的脚本支持，大
家可以先到点击下载less.js然后把他引用到页面的head中，如下所示：
<script src="less.js" type="text/javascript"></script> }}}
其中src所指定的路径是你项目中的相对路径，当然你也可以把这个js放到你认为安全可用的服务器上，换成绝对路径也是可以的。接着我们就
需要把less文件引进到项目中，这个引入的方式和css方式是一样的，只是有一点点不同，css中的是“rel="stylesheet"”而less的却是“rel="s
tylesheet/less"”,请看下面的代码：
{{{class="prettyprint"
<link rel="stylesheet/less" type="text/css" href="styles.less">
特别强调一点，客户端使用Less,一定要注意，“Less样式文件一定要放在less脚本文件之前”。
正确的引入方式：
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
错误的引入方式：
<script src="less.js" type="text/javascript"></script>中
<link rel="stylesheet/less" type="text/css" href="styles.less">
总结一下
　　　　less的基础用法大概就有这些，理解了这些东西，也足够我们在工作中的使用与源码阅读。可以感觉出来，其实less在学习成本以及学习难易度上确实不是很难。如果在以后的工作中用到SASS的话，我会再做一次学习与总结。还有就是需要做与LESS做下　　　　对比学习
　　文章代码以及部分内容来自 http://www.w3cplus.com/css/less

CSS—LESS基础整理相关推荐

  1. CSS核心内容整理 - (中)

    2019独角兽企业重金招聘Python工程师标准>>> 本文是CSS核心内容整理的第二篇,承接上一篇的内容继续对CSS的一些重要内容进行整理,推荐先看完这个系列的上一篇. 四.  页 ...

  2. HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）

    内容概览 模拟淘宝首页(静态) 一.项目重难点 二.效果图及源码 模拟淘宝首页(静态) 一.项目重难点 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...

  3. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  4. 日常开发CSS小技巧整理

    日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...

  5. Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)

    CSS语法基础 一.单纯html控制样式的缺点 二. CSS✪✪✪ CSS概述 CSS基础语法 组成 选择器 标签选择器 类选择器 id选择器 通配选择器 后代选择器 插入样式表的三种方式 行内样式 ...

  6. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  7. HTML+CSS实现基础课程表页面制作 (锚链接到页面下方课程详细信息)~小白入门版~

    HTML+CSS实现基础课程表 (锚链接到页面下方课程详细信息) HTML代码部分 <!DOCTYPE html> <html><!-- 设计要求 --><! ...

  8. 视频教程-HTML + CSS零基础经典教程系列-HTML5/CSS

    HTML + CSS零基础经典教程系列 全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP.Ja ...

  9. HTML与CSS学习基础总结

    HTML与CSS学习基础总结 先了解学习的知识点有哪些: HTML HTML指的是超文本标记语言(Hyper Text Markip Language),它不是一种编程语言而是一种标记语言,通过使用标 ...

最新文章

  1. 计算机视觉已超越人类眼睛？腾讯优图与《科学》杂志全面解读
  2. 参加第十届的队员给智能车竞赛的建议：抄能力+钞能力使得一届不如一届
  3. python的装饰器迭代器与生成器_python3 装饰器、列表生成器、迭代器、内置方法详解等（第四周）...
  4. mysql 报错注入 读文件_SQL注入-读写文件
  5. 解决ftp的pasv模式下iptables设置问题
  6. 基于pt100温度计仿真_基于8pt网格的设计系统
  7. 大厂Java初级开发工程师！！！面试必问项之Set实现类：TreeSet
  8. 深圳不完全启示录之初来乍到----1
  9. iPhone 12快来了！苹果或本周公布发布会时间
  10. 【MySQL】MySQL中的查询语句的详解----等值连接、左连接、右连接、全连接
  11. python常用包有哪些品牌_python 常用包总结
  12. 宇宙最强下载器：IDM 俄罗斯大神版
  13. 汽车之家爬虫(autohome)
  14. snyk 项目漏洞检测
  15. Web功能测试（邮箱，手机号，验证码，身份证号测试用例）
  16. csdn博客改用户名，取名字慎重
  17. C++ HOOK PC微信实现无限制多开,理论支持所有版本,本文使用微信 3.0.0.47
  18. 因果推断what if
  19. SkeyeExPlayer(Windows)开发系列之解决ffmpeg接口调用卡住的问题
  20. 疑难杂症：系统状态正常，LInux双机Pacemaker为什么还要切换？

热门文章

  1. java类型转换异常_解决java.lang.ClassCastException的java类型转换异常的问题
  2. MVC validate数据验证
  3. PageInfo分页无效解决
  4. NPOI修改excel 的工作表名称
  5. 产生随机字符java_java生成随机字符串的两种方法
  6. jQuery模态弹窗插件(jquery-confirm)
  7. 美国物理学会Physics网站公布“年度亮点”工作，AlphaFold和潘建伟团队成果等入选
  8. 手把手地写一个机器人仿真环境---RobotZen
  9. git 回退到某个版本,并推送到远程
  10. Numpy：数组对象（Ndarray）的定义和创建