感觉自己都out了,跟不上web时代的潮流了,前不久才刚接触这玩意,发觉lesscss在某些方面还挺有用的,说白了这东西就是一种动态的样式语言,语法类似于css,可以像java那样进行编译,生成你想要的对应css,并且less css扩展了css的动态行为。如,它可以设置变量(variables)、支持混合书写模式(mixins)、支持嵌套规则(nested rules)、也可像js那样进行属性值的操作(operations)、像js函数那样传递参数(functions)、 也具有变量的作用域(scope)等。
运行环境
lesscss可以在客户端,也可称浏览器端(IE+、Webkit、Firefox)、服务器端(node.js )上运行。
客户端只需引入相关文件即可:如下所示
<link rel="stylesheet/less" type="text/css" href="less/demo.less"><script src="js/less.js" type="text/javascript"></script>
其中less文件是你自己编写的less文件,强烈推荐使用sublime text3编辑器进行编辑,高亮的语法以及强大的插件支持不得不让人爱不释手,下载地址:sublimetext3官网
less可到官网上下载,当前吧版本是1.4.2:less官网,还要注意这两个文件的引入顺序。
服务器端是通过nodejs的npm管理包来对less进行安装和编译的,具体nodejs这东西怎么用,最近也在探索中,没linux环境,只好在win7环境下装个unix模拟器cygwin来安装nodejs了。又有得搞了,开始node吧。
特性以及使用
一、变量
less中的变量主要用于定义一些通用的样式,变量还具有计算的功能,还可以定义一个变量名为变量,变量只能定义一次,并且会发生覆盖的现象,如下所示:
@color: #ccc; // 定义变量 .demo { // 应用到元素中 color: @color; }// 变量计算功能 @color: #ccc; @light-color: @color + #111; .demo { color: @light-color; }// 定义一个变量名为变量 @color: #ccc; @highlight: "color"; .demo { color: @@highlight; }// 在less中的变量实际上就是一个“常量”,因为它们只能被定义一次 @color: #ccc; @highlight: "color"; @color: #333; // 后面的@color覆盖前面的@color,所以color输出为#333 .demo { color: @@highlight; }
具体经编译后生成的css是咋样的,在这就不列出了,不然的话会搞得一大沓东西,有兴趣的童鞋可以自己动手测试下。
二、混合模式
说白了,less的混合模式就是把一个class类作为变量引入到另一个class类中,还可以带参数调用,如下所示:
// 定义一个类 .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }// 定义的类应用到另一个类中 #header { .rounded-corners; //使用默认参数5px}#footer { .rounded-corners(10px);//把10px传递给变量@radius}// 混合还有一个重要的变量:@arguments,该参数表示引用所以的参数变量 .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);}
注:上面的这些less例子是来自官网的,只是自己把它整理了一下。
三、嵌套规则
less中的嵌套就是在一个选择器中嵌套另一个选择器来实现继承,类似于DOM树的层次结构,使代码更简洁,如下所示:
{:;:;:;:;:;:;:; }{:; }{:; }{:; }
四、操作
less也具有操作功能,可针对任何数字、颜色、变量的操作,可以对其进行加、减、、乘、除或者更复杂的综合运算。如下所示:
@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; }*/@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; //Less最终解析的值是“6px” @size: 20px; #header { border: @var solid red; width: @var + 50 * 2; height: (@var + 5) * 4; }/*编译生成的css #header { border: 6px solid red; height: 120px; width: 100px; }*/
五、函数
less的function功能主要是针对Color funtions,Less提供了多种变换颜色的功能,如下所示:
@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%); }}/*编译后生成的css #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; }*/
六、命名空间
less的命名空间类似于js的命名空间,把一些变量或mixins组织起来,并将其封装,用的时候再提取出来,如下所示:
// bundle库 #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;}
七、变量作用域(范围)
less中的变量也具有作用域,类似于js中的变量作用域环境,如下所示:
@var: red; #page { @var: white; #header { color: @var; // white }} #footer { color: @var; // red}
另外关于less的注释方式:
1、单行注释类似于js的注释,使用”//”分隔符
2、多行注释类似于css的注释,使用”/*…*/”
转载于:https://blog.51cto.com/jhomephper/1644006
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109460.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...