CSS--LESS入门_html/css_WEB-ITnose

Less は動的なスタイリング言語です。 Less は、変数 (Variables)、混合書き込みモード (mixins)、操作 (operations)、関数 (function) の設定など、CSS の動的な動作を拡張します。最も優れている点は、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 コードを見てみましょう。コードの意味は？ただし、緊張する必要はありません。これらの構文が何を意味するのかを順を追って説明します。何も言われなければ、一緒に動きましょう。

Less の使用方法

Less を正常に使用するには、このスクリプトをless.js と呼びます。ここをクリックしてこのlessスクリプトをダウンロードし、プロジェクトに組み込むことができます。ダウンロード後、less.js をファイル内で参照する必要があります。参照方法は非常に簡単です。

				.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 は主に変数、ミックスイン、ネストされたルール、関数と操作、クライアント側の使用法、サーバー側の使用法などを含む CSS 構文に基づいて拡張されています。これらの部分に焦点を当てて、理解を深め、学ぶのに役立ちます。

1. 変数

Less の変数を使用すると、スタイル内のどこかでよく使用される値を定義し、それらをスタイルに適用できます。このように、定義した変数パラメーターの値を変更するだけで変更を実現できます。グローバルな効果については、まずコードの一部を見てみましょう:

Less Code:

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

Compiled Css code:

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

Less の変数には、次のような計算関数もあります。

Less Code:

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

Compiled Css Code :

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

Less Code:

				#header {color: #6c94be;}			

Compiled Css Code:

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

のような、variable という名前の変数を定義することもできます。 注: Less の変数は一度しか定義できないため、実際には「定数」です。

レスコード:

				#header {color: #253636;}			

コンパイルされた CSS コード:

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

上記のコードは、最後の @color が先頭の @color をカバーしていることを明確に示しています。

2. ミキシング??ミックスイン

ミキシングは実際には一種のネストであり、あるクラスを別のクラスに埋め込むことができ、埋め込まれたクラスは変数とも呼ばれます。言い換えれば、クラスで CSS を定義し、クラス全体を変数として使用し、その属性として別のクラスに埋め込むことができます。さらに、次の例のように、ミックスインはパラメーターを持つ関数のようなものでもあります。

レスコード:

				#header {color: #ff3636;}			

コンパイルされた CSS コード:

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

注: この方法では、ID の下にある CSS クラスまたはスタイルを変数として使用し、ミックスイン モードを使用して別の要素の属性値として使用できます。

上で述べたように、Mixin には「パラメトリック Mixin」と呼ばれる用語があります。 Less には特別なタイプのルール セットがあります。つまり、クラスは別の要素の属性値として使用でき、独自のパラメーターも受け入れることができます。 典型的な例を見てみましょう:

Less コード:

				#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コード:

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

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

コンパイルされた CSS コード:

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

など、Mixins のパラメータのデフォルト値を定義することもできます。 別の方法は、特に次の場合に、Mixins のパラメータを設定することです。出力 CSS ルールを非表示にしたいが、その属性を他のルールに含めたい場合は、パラメーターなしで Mixin を使用すると非常に便利です。コードの一部を見てみましょう:

より少ないコード:

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

コンパイル済み。 CSS コード:

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

ミックスインには重要な変数もあります: @arguments。 @arguments は Mixins の非常に特殊なパラメーターです。Mixins がこのパラメーターを参照する場合、これは個別のパラメーターを処理したくない場合に便利です。コード:

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

コンパイルされた CSS コード:

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

3. ネストされたルール??ネストされたルール

ネストされたルールは、主に多層要素のスタイル ルールを記述するために使用されていました。最初から選択するか、この要素にクラス名または ID 名を追加しますが、Less ではこれを行う必要はなく、単純な例を見てみましょう:

Html マークアップ。 :

				#header {					-moz-box-shadow: 2px 2px 3px #FF36;					-webkit-box-shadow: 2px 2px 3px #FF36;					box-shadow: 2px 2px 3px #FF36;				}			

Less コード:

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

コンパイルされた CSS コード:

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

Less のネスト ルールを使用して CSS コードをより簡潔にします。これは、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脚本文件之前”。

正确的引入方式：

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

错误的引入方式：

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

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