神刀安全网

less用法总结

什么是less

less是一门预处理语言,扩展了css语言,增加了变量、Mixin、函数等特性,使css更易维护和扩展。less完全兼容css语法,可以完全使用css语法。

变量

在less中可以使用@符号来定义变量。比较常见的是一些颜色值、宽高之类的属性,他们往往会在一个项目中重复出现,若直接定义,会使后期项目的维护与升级变得十分困难。我们可以通过定义变量将这些属性的值集中到一个地方进行维护。

例如:

@top-height: 50px; @letf-width: 100px; @bg-color-primary: #2d2d2d;   .left-container {     position: absolute;     z-index: 1;     top: @top-height;     left: @left-width;     background-color: @bg-color-primary; } 

将被编译成

.left-container {     position: absolute;     z-index: 1;     top: 50px     left: 100px;     background-color: #2d2d2d; } 

变量不仅仅可以用来定义属性,还可以用来定义其他一系列的元素

选择器变量

使用 @{…}的语法来表示选择器

@mySelector: banner;  .@{mySelector} {     height: 40px;     line-height: 40px;     margin: 0 auto; } 

将被编译成

.banner {     height: 40px;     line-height: 40px;     margin: 0 auto; } 

URLs变量

使用 @{…}的语法来表示选择器

当一个网页需要通过css引入较多的图片,而图片与css文件处于两个深度很大的子文件中,采用css的写法,就需要写一大堆 “../../” 之类的路径,这时候就可以采用url变量

@imagesPath: "../images"  .arrow-select {     cursor: pointer;     height: 24px;     line-height: 24px;     background: url("@{imagesPath}/down_crrow.png") no-repeat center; } 

将被编译成

.arrow-select {     cursor: pointer;     height: 24px;     line-height: 24px;     background: url("../images/down_crrow.png") no-repeat center; } 

属性名变量

甚至可以使用属性名变量,用较短的变量来表示较长的属性名

同样使用 @{…}的语法来表示选择器

@bb: border-bottom; @radius: 4px @borderColor: #dadada;  .search-icon {     cursor: pointer;     text-align: center;     @{bb}: 1px solid @borderColor;     @{bb}-right-radius: @radius; } 

将被编译为

.search-icon {     cursor: pointer;     text-align: center;     border-bottom: 1px solid #dadada;     border-bottom-right-radius: 4px; } 

嵌套变量

还可以对变量进行嵌套,即在一个变量中使用另一个变量

@louzhedong: "My name is louzhedong"; @var: "louzhedong"; content: @@var; 

将被编译为

content: "My name is louzhedong"; 

惰性加载(Lazy Loading)

less 与 es5一样,存在变量提升,对于变量的引用不需要考虑顺序,考虑如下示例

.lazy-eval {     width: @var; }  @var: @a; @a: 9%; 
.lazy-eval {     width: @var;     @a: 9%; } @var: @a; @a: 100%; 

上述两段代码都将被编译成

.lazy-eval {     width: 9%; } 

Extend

extend(扩展)是一个less伪类,可以将当前元素的属性扩展为选择元素的属性,类似如下例子

nav ul {     &:extend(.inline);     background: blue; } .inline {     color: red; } 

将被编译为

nav ul {     background: blue; } .inline, nav ul {     color: red; } 

可以看到,nav ul 元素原先是没有color属性的,但在内部使用了extend伪元素,扩展了.inline元素的color属性。

extend语法—— all

关键字 all 可以进行全匹配

.c:extend(.d all){     // extends all instances of ".d" 例如 ".x.d" 或者 ".d.x" }  .c:extend(.d) {     //仅仅扩展 ".d"的css属性 } 

看一个较复杂的例子

.a.b.test, .test.c {     color: orange; } .test {     &:hover {         color: green;     } }  .replacement:extend(.test all){} 

将被编译为

.a.b.test, .test.c, .a.b.replacement, .replacement.c {     color: orange; } .test:hover, .replacement:hover {     color: green; } 

extend语法—— &

extend可以使用&符号在元素内部使用

pre:hover,      .some-class {     &:extend(div pre); } 

将被编译为

pre:hover:extend(div pre),     .some-class:extend(div pre) {} 

注意:extend语法无法匹配变量,即括号里的扩展的目标类不能包括变量

extend语法—— extend与作用域

@media print {   .screenClass:extend(.selector) {} // extend inside media   .selector { // this will be matched - it is in the same media     color: black;   } } .selector { // ruleset on top of style sheet - extend ignores it   color: red; } @media screen {   .selector {  // ruleset inside another media - extend ignores it     color: blue;   } } 

将会编译成

@media print {   .selector,   .screenClass { /*  ruleset inside the same media was extended */     color: black;   } } .selector { /* ruleset on top of style sheet was ignored */   color: red; } @media screen {   .selector { /* ruleset inside another media was ignored */     color: blue;   } }  

考虑一个情景,

<div class="apple">apple</div> <div class="banana">banana</div> <div class="pear">bear</div> 

其中有apple, banana, pear 类,所有的这些类有一些共同的属性,比如color,border,width 等。一种做法是从html切入,比如为这些类都添加另一个类fruit,然后在css的fruit中定义这些公共属性,但这样一来,html就会变得复杂。此时,就可以使用extend属性来对进行扩展。

@color: #ffffff; @appleColor: red; @bananaColor: yellow; @pearColor: green; .fruit {     color: @color;     width: 100px;     border: 1px solid @dadada; }  .apple {     &:extend(.fruit);     background-color: @appleColor; }  .banana {     &:extend(.fruit);     background-color: @bananaColor; }  .pear {     &:extend(.fruit);     background-color: @pearColor; } 

这样一来,html代码将会变得更加纯净,我们无需为了迎合某些样式而去定义一些表达意义不强的类名。

Mixin(混合)

mixin有些类似于extend,两者都是使一个类能够更方便地拥有其他类的属性。

mixin的用法

.a, #b {     color: red; } .mixin-class {     .a; //或者 .a() } .mixin-id {     #b;  //或者#b() } 

将被编译为

.a, #b {     color: red; } .mixin-class {     color: red; } .mixin-id {     color: red; } 

minix用法——带参数

mixins可以传递参数

.border-radius(@radius: 5px) {     border-radius: @radius }  .button {     .border-radius(6px); } 

括号里的5px为默认值,如果不传递参数,变量就将以默认值来赋值。传递多个参数的情况一样。注意,在同一一个类中可以使用多个mixin,并且他们的样式会共同继承

mixin用法——@arguments

@arguments在mixin中有特殊的意思,它可以代表所有传入的参数

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {     -webkit-box-shadow: @arguments;      -moz-box-shadow: @arguments;           box-shadow: @arguments; } .big-block {     .box-shadow(2px; 5px); } 

将被编译为

.big-block {   -webkit-box-shadow: 2px 5px 1px #000;      -moz-box-shadow: 2px 5px 1px #000;           box-shadow: 2px 5px 1px #000; } 

mixin用法——@rest

可以使用 … 来表示一定数量的参数,也可以使用@rest来表示剩下的变量

.mixin(...) {        // matches 0-N arguments .mixin() {           // matches exactly 0 arguments .mixin(@a; @rest...) {    // @rest is bound to arguments after @a    // @arguments is bound to all arguments }  

mixin用法——匹配

mixin还可以对参数进行匹配,来决定该以什么形式来表示样式。

.mixin(dart; @color) {     color: darken(@color, 10%); } .mixin(light; @color) {     color: lighten(@color, 10%); } .mixin(@_; @color) {     display: block }  @switch: light;  .class {     .mixin(@switch; #888); } 

将会被编译成

.class {     color: #a2a2a2;     display: block; } 

mixin用法——作为函数

mixins可以像函数那样返回变量,在Mixin中定义的所有变量都可以在调用它的类的作用域中使用

.average(@x, @y) {     @average: ((@x + @y) / 2); }  div {     .average(16px, 50px); // "call" the mixin     padding: @average;    // use its "return" value } 

mixin用法——when

less中没有if/else语句(scss中有),只有when。通过when,可以使一个mixin匹配多种情况

.mixin (@a) when (lightness(@a) >= 50%) {     background-color: black; } .mixin (@a) when (lightness(@a) < 50%) {     background-color: white; } .mixin (@a) {     color: @a; }  .class1 { .mixin(#ddd) } .class2 { .mixin(#555) } 

将被编译为

.class1 {     background-color: black;     color: #ddd; } .class2 {     background-color: white;     color: #555; }  

从上述的一些例子中,mixin可以像函数那样使用,利用这个特性,可以来简化浏览器兼容的代码。某些比较新的属性,比如flex,border-radius等,在不同浏览器中需要使用不同的前缀来进行兼容。因此可以将这些细节影藏在mixin中,在某些类中调用这些mixin,并将需要的参数传递进行,可以得到带有不同前缀的css代码,可以极大地简化代码量。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » less用法总结

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址