第一次接触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。然后在页面中引用即可
<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中的变量充许你在样式中的某个地方对常用的值进行定义,然后应用到样式中,这样只要改变你定义的变量参数值就可以了
/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}
编译为CSS后:

/*======= Less 编译成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
Less中的变量还具有计算功能,如:
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
编译为CSS后:

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

@color: #253636;
@highlight: "color";
@color: #ff3636;
#header {color: @highlight;}
但是编译后发现:  

#header{color:#ff3636}

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

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

/*========= 定义一个类 ===========*/
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*========== 定义的类应用到另个一个类中 ===========*/
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
编译后的CSS如下:

#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具有一个特殊类型的规则集,那就是一个类
可以当作另一个元素的属生值,并且还可以接受其自己的参数,我们来看一个典型的实例:
/*========== 定义一个规则,并且不设置默认参数值 ============*/
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*============ 应用到元素中 ============*/
#header {
.borderRadius(10px); /*把10px传给变量@radius*/
}
.btn {
.borderRadius(3px);/*把3px传给变量@radius*/
}
编译后CSS代码如下:
#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的参数定义一人默认值,如
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
编译后的CSS如下:
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
还有一种方法就是给Mixins不定我任何参数,特别是在你想隐藏输出的CSS规则,但又想在别的规则中包含他的属性,使用这种
不带参数的Mixins将非常有用的,我们来看一段代码:
.wrap(){
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap;
}

编译后的CSS如下:

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

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

将表示所有的变量,当你不想处理个别的参数时,这个将很有用,我们来看一个阴影的实例:
.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:
#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中我们不需要这样操作了,我们只要使用他的嵌套规则就可以完成,我们来看一个简单的实例:
简单的页面结构如下:
<div id="header">
<h1><a href="">W3cplus</a></h1>
<p>记述前端那些事——引领Web前沿</p>
</div>
然后接下来看看less部分:
#header {
display: inline;
float: left;
h1 {
font-size: 26px;
font-weight: bold;
a {
text-decoration: none;
color: #f36;
&:hover {
text-decoration: underline;
color: #63f;
}
}
}
p {
font-size: 12px;
}
}
来看看编译之后的代码:
#header {
display: inline;
float: left;
}
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header h1 a {
color: #FF3366;
text-decoration: none;
}
#header h1 a:hover {
color: #6633FF;
text-decoration: underline;
}
#header p {
font-size: 12px;
}
使用Less的嵌套规则让你的CSS代码更简洁,因为它的写法就是模仿HTML的DOM结构来写的。
从上在的实例代码中,都很清楚的了解到,嵌套规则可以让我们写样式时能像DOM树形那样有结构的去写代码,从而减了选
择器的层级关系,更主要的是这样使用我们的代码更简洁,更具有阅读性,这种嵌套规则对我们操作伪元素更为方便和重要,
如:hover,:link,:focus等,看下实例:
a {
color: red;
text-decoration: none;
&:hover {
color: blue;
text-decoration: underline;
}
}
编译后的CSS如下:
a {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
注意了,这里的&很重要,在Less中嵌套书写中有没有&区别是完全不一样的效果,有&时解析的是同一个元素或此元素的
伪类,没有&解析是后代元素:
#header {
&.fl{
float: left;
}
.mln {
margin-left: 0;
}
}
然后看下编译后的CSS:
#header.fl{float: left;}
#header .mln {margin-left: 0;}
4、Functions & Operations
其实这个部分的内容我还没有完全理解透,但是在项目有很多地方都在使用并且很多博文中也有提及到,所以我觉得虽然暂时无法理解,但是还是要作好记录。书读百遍,其义自见,代码和理论这种东西也不例外。做好记录并且时常复习下,再结合工作中的使用,这种问题就会慢慢的由自己的答案
 
这两个功能很有意思的。在我们平时的样式中,有很多元素的属性都具有一定的比例或倍数。那么这两个刚好可以帮我们实现这
方面的功能,首先来看Operations(直译“动作”)他可以让你对元素的属性值,颜色进行四则运算:加、减、乘、除。而
Function就像javascript中的function一样可以让你进行你想要的值的操作。下面我们先来看一个简单的实例:
@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:
#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的使用
@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
color: #888 / 4;
height: 100% / 2 + @filler;
}
编译后的CSS:
#header {
color: #222222;
height: 60%;
}
上面是一些简单的四则运算,它们都是在同一单位下进行操作,现在我们一起来看一个不同单位的操作
@var: 1px + 5;
#header {
border: @var solid red;
}
编译后的CSS如下:
#header {border: 6px solid red;}
上面的代码直接反应出了,“@var: 1px + 5”,Less最终解析的值是“6px”。在Less中我们同样可以像做小学算术一样,使用
括号“()”来改变其运算的先后顺序,如:
@var: 20px;
#header {
width: @var + 5 * 2;
height: (@var + 5 ) * 2;
}
看一下编译后的结果:
#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方法很简单:
@base: #f04615;
#header {
color: @base;
h1 {
color: lighten(@base,20%);
a {
color: darken(@base,50%);
&:hover {
color: saturate(@base,30%);
}
}
}
p {
color: desaturate(@base,60%);
}
}
来看下编译后的CSS:
#header {
color: #F04615;
}
#header h1 {
color: #F69275;
}
#header h1 a {
color: #060200;
}
#header h1 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
 
下面我们来看一下如何取得他的颜色
@color: #f36;
#header {
  background-color: hsl(hue(@color),45%,90%);
}
编译后的代码如下:
#header {background-color: #F1DAE0;}

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

5、命名空间——Namespaces
有时候你想把一些变量或mixins组织起来,并将他封装,想用的时候就把要关的一部分取出来,那么我们将在前面的mixins基础
上将其功能扩展,比如说我们有一个这样的库:
#bundle {
.button () {
display: block;
border: 1px solid black;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
现在在实际操作中,我们header中的a样式和.button一样,那么我们就可以这样操作:
#header a {
color: orange;
#bundle > .button;
}
换过一种思维来说,如果页面上有几个部分的样是完全一样的,或者只是部分不同,我们就可以这样来写,就如上面的代码,
#bundle可是以web页面中已存在的元素,然后#header中的a元素和#bundle中的.button样式是一样的,那么我们就可以把
#bundle中 .button的所有样式引用到#header中的a元素上。
 
6、变量范围——Scope
Less中的变量和别的程序语言一样,他的变量也有一个范围概念,这个概念就有点像局部变量和全局变量一样,只是在Less中采
取的是就近原则,换句话说,元素先找本身有没有这个变量存在,如果本身存在,就取本身中的变量,如果本身不存在,就寻找
父元素,依此类推,直到寻找到相对应的变量,我们来看个简单的实例:
@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
  感谢原文博主的总结!

大前端学习笔记整理【四】LESS基础的更多相关文章

  1. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  2. 大前端学习笔记整理【七】HTTP协议以及http与https的区别

    前言 还是老样子,新博客开始前总是想先啰嗦几句...HTTP协议其实在当初学习java时老师就有提过...但是...反正就那么过去了... 这段时间公司的项目正好要求做https的转换和迁移,然后自己 ...

  3. 大前端学习笔记整理【五】关于JavaScript中的关键字——this

    写在前面 工作有那么一段时间了,但是在工作中,发现自己的理论知识还是有所欠缺.特别是在javascript上,很多东西其实自己属于知道要用这个,但是不知道为什么要这么用...这种情况很是尴尬了,所以写 ...

  4. 大前端学习笔记整理【五】rem与px换算的计算方式

    前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要 ...

  5. 大前端学习笔记整理【二】CSS视觉格式化模型

    1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 ...

  6. 大前端学习笔记整理【六】this关键字详解

    前言 在上一篇博客里我总结了下辨认this指向的四种方式,但是有师兄抛出一个问题来,我发现那些this的指向并不能说明更复杂的情况,先看下这段代码 var a = { name: 'a', getNa ...

  7. 大前端学习笔记【七】关于CSS再次整理

    如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”.如何实现这一点经常是远不如最终结果那么重要.这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理. ...

  8. 大数据学习笔记——Java篇之基础知识

    Java / 计算机基础知识整理 在进行知识梳理同时也是个人的第一篇技术博客之前,首先祝贺一下,经历了一年左右的学习,从完完全全的计算机小白,现在终于可以做一些产出了!可以说也是颇为感慨,个人认为,学 ...

  9. Python学习笔记整理(四)Python中的字符串..

    字符串是一个有序的字符集合,用于存储和表现基于文本的信息. 常见的字符串常量和表达式 T1=‘’ 空字符串 T2="diege's" 双引号 T3=""&quo ...

随机推荐

  1. 微信官方demo(php)

    <?php /** * wechat php test */ //define your token define("TOKEN", "weixin"); ...

  2. Replace Pioneer 注册

    批量文本替换工具,Replace Pioneer 注册:http://www.mind-pioneer.com

  3. @MappedSuperclass注解的使用说明

    转载自:http://blog.sina.com.cn/s/blog_7085382f0100uk4p.html 基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclas ...

  4. Hibernate—— 一对多 和 多对多关联关系映射(xml和注解)总结(转载)

    One to Many 映射关系 多对一单向外键关联(XML/Annotation) 一对多单向外键关联(XML/Annotation) 懒加载和积极加载 一对多双向外键关联(XML/Annotati ...

  5. Hibernate和Struts2整合的增、删、改、查

    1. 新建一个Web项目,准备好jar包和配置文件. 2. web.xml文件中添加过滤器 <?xml version="1.0" encoding="UTF-8& ...

  6. Unity3D 物体移动方式

    1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在 ...

  7. Java中的值传递和引用传递

    这几天一直再纠结这个问题,今天看了这篇文章有点思路了,这跟C++里函数参数为引用.指针还是有很大区别. 当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里 ...

  8. cookie小记

    清除cookie可用下面2种的方法.注意如果要清除的cookie的域是指定的,则这里也应该指定,否则无效                1:                Response.Cooki ...

  9. SASS学习笔记(1)

    序 之前稍微看过SASS的文档,但是由于工作中没有涉及,渐渐的搁置了.最近公司新招来一个热情似火的前端,不管什么技术,不管自己能不能hold住,都提出来用一用再说.这样对我也好,跟着这个哥们混妥妥的长 ...

  10. java_method_数据去重

    /** * 判断list本身是否有重复数据和标题 * * @param list * @return newList 返回没有重复数据的list */ public List<String[]& ...