CSS--LESS入门_html/css_WEB-ITnose

Less是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“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引用到文件中，引用方式很简单：

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:

W3cplus

记述前端那些事??引领Web前沿

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did107075

更新时间：2022-11-17 阅读：29次