守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 382|回复: 0

[LESS] CSS——LESS

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51790
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-18 16:17:48 | 显示全部楼层 |阅读模式
    来源:http://www.w3cplus.com/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脚本文件之前”

    正确的引入方式:

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

    最后要感谢Alexis Sellier(又名:cloudhead)给我们带来这么好的LESS

    如需转载烦请注明出处:W3CPLUS

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-11-19 04:14 , Processed in 0.046753 second(s), 33 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表