CSS——LESS

去年就初次接触了LESS,并用他制作了一个Less.org的首页页面，但由于CSS的固有模式，没有让自己喜欢上他。由于前段时间学习bootstrap from twitter再次让我接触了这个Less（我在《CSS——Bootstrap From Twitter》有简单的提到过Less），又发现了他的强大与方便，于是横下心来又重新开始学习Less。这次的学习中让我发现了他的更强大，从而也让自己更喜欢上了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语法基础上增加许多额外的功能。如果你具有一定的CSS语法基础，学习Less将是一件轻而易举的事情，那么我们现在就开始吧，首先一起看一段用Less语法的CSS代码：

				.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
				  @val: @x @y @blur rgba(0, 0, 0, @alpha);
				  box-shadow:         @val;
				  -webkit-box-shadow: @val;
				  -moz-box-shadow:    @val;
				}
				.box { @base: #f938ab;
				  color:        saturate(@base, 5%);
				  border-color: lighten(@base, 30%);
				  div { .box-shadow(0, 0, 5px, 0.4) }
				}

看到这里或许你现在并不知道这些代码表示的是什么意思？不过不要紧张，我们会一步一步一介绍这些语法表示的是什么意思。别的先不说，我们一起动起来吧。

如何使用Less

要成功的使用Less，需要一个脚本的支持，这个脚本我们把他叫做less.js。大家可以在点击这里下载这个less脚本,并放到你的项目中。下载好以后我们需要把less.js引用到文件中，引用方式很简单：

				<link rel="stylesheet/less" type="text/css" href="less/styles.less">
				<script src="js/less.js" type="text/javascript"></script>

Less包含些什么？

Less具体有哪些东东呢？其实这个问题我在前面早就有说过，Less要CSS语法的基础上进行了扩展，主要包含：Variables，Mixins、Nested Rules、Functions & Operations、Client-side usage、Server-side usage等等，下面我们就针对这几个部分，更好帮助我们了解和深入的学习Less。

1、变量——Variables

Less中的变量充许你在样式中的某个地方对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果，我们先来看一段代码：

Less Code

				/*======== 定义变量===========*/
				@color: #4d926f;
				/*======== 应用到元素中 ========*/
				#header {
					color: @color;
				}
				h2 {
					color: @color;
				}

Compiled Css code:

				/*======= Less 编译成 css ======*/
				#header {
					color: #4d926f;
				}
				h2 {
					color: #4d926f;
				}

Less中的变量还具有计算功能，如：

Less Code:

				@nice-blue: #5b83ad;
				@light-blue: @nice-blue + #111;
				#header {
					color: @light-blue;
				}

Compiled Css Code:

				#header {color: #6c94be;}

我们还可以定义一个变量名为变量，如

Less Code:

				@color: #253636;
				@highlight: "color";
				#header {color: @@highlight;}

Compiled Css Code:

				#header {color: #253636;}

注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。

Less Code:

				@color: #253636;
				@highlight: "color";
				@color: #ff3636;
				#header {color: @@highlight;}

Compiled Css Code:

				#header {color: #ff3636;}

上面代码很明显说明了后的@color覆盖了前面的@color。

2、混入——Mixins

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

Less Code:

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

Compiled Css Code:

				#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具有一个特殊类型的规则集，那就是一个类可以当作另一个元素的属生值，并且还可以接受其自己的参数，我们来看一个典型的实例：

Less Code:

				/*========== 定义一个规则，并且不设置默认参数值 ============*/
				.borderRadius(@radius){
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					border-radius: @radius;
				}
				/*============ 应用到元素中 ============*/
				#header {
					.borderRadius(10px); /*把10px传给变量@radius*/
				}
				.btn {
					.borderRadius(3px);/*把3px传给变量@radius*/
				}

Compiled Css Code:

				#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的参数定义一人默认值，如

Less Code:

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

				.btn {
					.borderRadius;
				}

Compiled Css Code:

				.btn {
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					border-radius: 5px;
				}

还有一种方法就是给Mixins不定我任何参数，特别是在你想隐藏输出的CSS规则，但又想在别的规则中包含他的属性，使用这种不带参数的Mixins将非常有用的，我们来看一段代码：

Less Code:

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

Compiled Css Code:

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

Mixins还有一个重要的变量：@arguments。@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量，当你不想处理个别的参数时，这个将很有用，我们来看一个阴影的实例：

Less Code:

				.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);
				}

Compiled Css Code:

				#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中我们不需要这样操作了，我们只要使用他的嵌套规则就可以完成，我们来看一个简单的实例：

Html Markup:

				<div id="header">
					<h1><a href="">W3cplus</a></h1>
					<p>记述前端那些事——引领Web前沿</p>
				</div>

Less Code:

				#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;
					}
				}

Compiled Css Code:

				#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等，他的写法是：

Less Code:

				a {
					color: red;
					text-decoration: none;
					&:hover {
						color: blue;
						text-decoration: underline;
					}
				}

Compiled Css Code:

				a {
					color: red;
					text-decoration: none;
				}
				a:hover {
					color: blue;
					text-decoration: underline;
				}

大家注意了，这里的&很重要，在Less中嵌套书写中有没有&区别是完全不一样的效果，有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素，我们一起来看一段代码：

Less Code:

				#header {
					&.fl{
						float: left;
					}
					.mln {
						margin-left: 0;
					}
				}

Compiled Css Code:

				#header.fl{float: left;}
				#header .mln {margin-left: 0;}

4、Functions & Operations

这两个功能很有意思的。在我们平时的样式中，有很多元素的属性都具有一定的比例或倍数。那么这两个刚好可以帮我们实现这方面的功能，首先来看Operations（直译“动作”）他可以让你对元素的属性值，颜色进行四则运算：加、减、乘、除。而Function就像javascript中的function一样可以让你进行你想要的值的操作。下面我们先来看一个简单的实例：

Less Code:

				@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%);
				}

Compiled Css Code:

				#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的使用

Less Code:

				@base: 5%;
				@filler: @base*2;
				@other: @base + @filler;
				#header {
					color: #888 / 4;
					height: 100% / 2 + @filler;
				}

Compiled Css Code:

				#header {
				    color: #222222;
				    height: 60%;
				}

上面是一些简单的四则运算，他们都是在同一单位下进行操作，现在我们一起来看一个不同单位的操作

Less Code:

				@var: 1px + 5;
				#header {
					border: @var solid red;
				}

Compiled Css Code:

				#header {
				    border: 6px solid red;
				}

上面的代码直接反应出了，“@var: 1px + 5”，Less最终解析的值是“6px”。在Less中我们同样可以像做小学算术一样，使用括号“（）”来改变其运算的先后顺序，如：

Less Code:

				@var: 20px;
				#header {
					width: @var + 5 * 2;
					height: (@var + 5 ) * 2;
				}

Compiled Css Code:

				#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方法很简单：

Less Code:

					@base: #f04615;
					#header {
						color: @base;
						background-color: fadein(@base, 10%);
						h1 {
							color: lighten(@base,20%);
							background-color: lighten(fadeout(@base,20%),5%);
							a {
								color: darken(@base,50%);
								background-color: spin(@base,10);
								&:hover {
									color: saturate(@base,30%);
									background-color: fadein(spin(@base,-5),20%);
								}
							}
						}
						p {
							color: desaturate(@base,60%);
						}
					}

Compiled Css Code:

					#header {
					    background-color: #F04615;
					    color: #F04615;
					}
					#header h1 {
					    background-color: rgba(242, 89, 45, 0.8);
					    color: #F69275;
					}
					#header h1 a {
					    background-color: #F06B15;
					    color: #060200;
					}
					#header h1 a:hover {
					    background-color: #F03415;
					    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

下面我们来看一下如何取得他的颜色

Less Code:

					@color: #f36;
					#header {
						background-color: hsl(hue(@color),45%,90%);
					}

Compiled Css Code:

					#header {
					    background-color: #F1DAE0;
					}

5、命名空间——Namespaces

有时候你想把一些变量或mixins组织起来，并将他封装，想用的时候就把要关的一部分取出来，那么我们将在前面的mixins基础上将其功能扩展，比如说我们有一个这样的库：

					#bundle {
					  .button () {
					    display: block;
					    border: 1px solid black;
					    background-color: grey;
					    &: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="stylesheet/less"”,请看下面的代码：

					<link rel="stylesheet/less" type="text/css" href="styles.less">

特别强调一点，客户端使用Less,一定要注意，“Less样式文件一定要放在less脚本文件之前”。

上在我分了八个部分介绍了Less，其实Less不只包含这些东西，他还包括了“服务器端的使用”，“导入文件和变量”，“字符串插值”等，由于这几个部分相对而言较少使用，加上我自己没有完全理解，特意截下这几个部分不做陈述，如果大家相完全了解或者更清楚的学习他，大家可以可击到他的官网。（不过要翻墙才能正常阅读。）

CSS——LESS

时间： 2024-08-04 16:36:29

CSS——LESS的相关文章

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

CSS 之怀疑自己的审美 2 （Day50）

阅读目录 伪类 选择器的优先级 css 属性操作 一.伪类 anchor伪类:专用于控制链接的显示效果 ''' a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover(鼠标放在链接上的状态),用于产生视觉效果. a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接. a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态. 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

CSS颜色代码大全

CSS颜色代码大全 颜色代码表(一): EEEEEE FFCCFF FF66FF FF00FF DDDDDD FFCCCC FF66CC FF00CC CCCCCC FFCC99 FF6699 FF0099 BBBBBB FFCC66 FF6666 FF0066 AAAAAA FFCC33 FF6633 FF0033 999999 FFCC00 FF6600 FF0000 888888 CCCCFF CC66FF CC00FF 777777 CCCCCC CC66CC CC00CC 666666

如何使用Flexbox和CSS Grid，实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来. 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了. 同时,CSS Grid 布局也为网页设计行业带来了很大的便利.虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持. 虽然 Flexbox 和 CSS Grid 可

css基础

css绝对是一个能够写到爆炸的东西,so,机智的小北方才不会写各种css样式具体的效果,相比之下更推荐大家记一些常用的key,至于效果,每次用的时候百度下就可以了, css的作用是对符合条件的标签进行渲染,那么首先就要匹配到对应标签啦,我萌有三种基础的模式来匹配希望改变样式的标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

前端 css 垂直居中及自适应问题

此css作用为将下面div结构中的Container-fluid背景自适应屏幕,content自适应居中 1.Div结构 all Head Container-fluid Content Under <div id="all">   <div  class="head" style="height: 81px;width: 100%;min-width: 1000px;position: relative;">      

css遮罩层

父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style> .loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;} .loading .pic {width:50px;height:50px;background:url(images/l

CSS作用域问题

今天去长虹面试,面试官问了一个问题,就是给一个div在三个地方设置不同的background,最后div显示的颜色是哪一个?当时我第一次回答的是最后一个,但是后来又改口说是第一个,回来一验证,证明自己错了,今天就总结一下CSS样式的作用域问题吧. 首先对HTML引入样式的优先级排序,数字越大优先级越高#### 样式优先级1. 浏览器缺省设置2. 外部样式表3. 内部样式表(位于 <head> 标签内部)4. 内联样式(在 HTML 元素内部) ---#### 外部样式表>浏览器缺省设置H

CSS学习

CSS css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = 'key1:value1;key2:value2;' 在标签中使用 style='xx:xxx;' 在页面中嵌入 < style type="text/css"> </style > 块 引入外部css文件 css写在head里面,style标签中写样式 ID用