less_.boximg{width: 100%;height: auto;} .img{display: b-CSDN博客

less

less 基础语法
LESS 的基础语法基本上分为以下几个方面:变量、混合(Mixins)、嵌套规则、运算、函数、

作用域等。这些基础语法需要我们先牢牢的掌握住,然后才可以灵活的在项目中进行实战。

变量
和 JS 中的变量一样,只是 LESS 的变量定义不是使用 VAR 而是使用@。

//->LESS 代码
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);a{

color: @link-color;&:hover {

           color: @link-color-hover;
       }

}
.box {

       color: @link-color;
    }

//->编译为 CSS 的结果a{

       color: #428bca;
    }

a:hover {
    color: #3071a9;

}
.box {

    color: #428bca;
}

除了上述用变量存储公用的属性值,我们还可以用变量存储公用的 URL、选择器等等

//->LESS 代码.@{selector} {

width: 100px;
height: 100px;
@{property}: #000;
background: url("@{bgImg}/test.png");&:after {

           display: block;

           content: @@var;
       }

}
@selector: box;@bgImg: "../img";@property: color;@name: "珠峰培训";@var: "name";//->编译为 CSS 的结果.box {

    width: 100px;
    height: 100px;
    color: #000;
    background: url("../img/test.png");

}
.box:after {

    display: block;

content: "珠峰培训";}

在上述的代码中我们发现,变量存储的值可以作为选择器,样式属性名,同样也可以像类似于 JS 中字符串拼接的方式把变量值的和另外一个字符串进行拼接,而且@@var 是把 var变量存储的值作为另外一个变量的名从而获取对应的值。还有一点值的我们注意的是,变量可以定在使用代码的下面,这个有点类似于 JS 中的预解释,不管写在上面还是下面,都是

相当于全局的变量,并且都可以把存储值获取到(但是建议大家把变量都统一在最上面定义)。

嵌套
LESS 可以让我们以嵌套的方式编写层叠样式。

代码层次性很强,避免了.index_switchPart span{.....},亲子选择器,后代选择器这些冗长的写法,不仅方便调试,而且很大程度上节省了时间。

//->less.class {
font-family: "microsoft yahei";.btn {

       display: inline-block;
       text-align: center;

//如果你想写串联选择器,而不是写后代选择器,就可以用到"&"了&:hover {

color: #fff;

           background: #666;
       }

}}

//->输出的 css.class {

    font-family: "microsoft yahei";
}

.class .btn {
    display: inline-block;
    text-align: center;

}
.class .btn:hover {

color: #fff;

    background: #666;
}

Mixin 混合1. 基本使用

从字面意思上理解,所谓的混合其实应该是把很多的样式混合在一起,这样理解不准确,个人的理解,所谓的混合其实是把某个选择器中的样式拿过来使用,我们看下面的代码。

//->LESS 代码

.public {
    width: 100px;

    height: 100px;
}

nav ul {
    .public;

    list-style: none;
}

//->编译为 CSS 的结果.public {

    width: 100px;

    height: 100px;
}

nav ul {
    width: 100px;

    height: 100px;

    list-style: none;
}

观察上述的代码,我们发现其实 nav ul 是把 public 中设定的样式属性值 copy 了一份到自

己的样式中。如果你想在编译完成的结果中不输出 public 这个样式的结果,只需要按照下述的代码编写即可:

//->LESS 代码
.public() {//->在选择器后面加上()就可以不编译这个样式了

       width: 100px;
       height: 100px;

}
nav ul {

.public;

    list-style: none;
}

//->编译为 CSS 的结果nav ul {

    width: 100px;
    height: 100px;
    list-style: none;

}

1. Extend

虽然在上述的案例中,nav ul把public中的样式继承了过来,但是原理却是把代码copy一份过来,这样编译后的 CSS 中依然会存留大量的冗余 CSS 代码,为了避免这一点,我们可以使用 extend 伪类来实现样式的继承使用。

//->LESS 代码.public {

       width: 100px;

       height: 100px;
    }

nav ul {&:extend(.public);list-style: none;

}

//->编译为 CSS 的结果.public, nav ul {width: 100px;

    height: 100px;
}

nav ul {
    list-style: none;

}

或者:

//->LESS 代码.public {

       width: 100px;

       height: 100px;
    }

nav ul:extend(.public) {list-style: none;

}

//->编译为 CSS 的结果和第一种写法一样

1. 命名空间和作用域
在 LESS 的语法中,我们可以指定命名空间,实现在一个盒子中层级嵌套式的编写。下面

案例中,.box 就是命名空间,里面的 img、.gray 都是这个空间下的样式,调取的话需要:

 .box>.gray; .box>.gray();
 .box .gray; .box .gray();

 .box.gray; .box.gray()

//->LESS 代码.box {

       width: 100px;
       height: 100px;
       img {

width: 100%;

           height: 100%;
       }

       .gray {
           color: #eee;

}
&:hover {

           background: green;
       }

}
#nav {

.box;}

#header {
.box > .gray;

}

//->编译为 CSS 的结果.box {

       width: 100px;

    height: 100px;
}

.box img {
    width: 100%;

    height: 100%;
}

.box .gray {
    color: #eee;

}
.box:hover {

    background: green;
}

#nav {
width: 100px;

    height: 100px;
}

#nav img {width: 100%;

    height: 100%;
}

#nav .gray {color: #eee;

}
#nav:hover {

    background: green;

}
#header {

    color: #eee;
}

在 LESS 中定义了命名空间就创建了一个私有的作用域,在这个私有作用域中使用的变量都是先看一下自己作用域中有没有,没有的话,在向上一级查找(类似于 JS 的作用域链)。

//->LESS 代码@color: #ccc;

    .box {
       @color: #eee;

       .gray {
           color: @color;

}}

    .box2 {
       .gray {

           color: @color;
       }

}

//->编译为 CSS 的结果.box .gray {

       color: #eee;
    }

    .box2 .gray {
       color: #ccc;

}

1. !important

在调用的混合集后面追加 !important 关键字,可以使混合集里面的所有属性都继承 !important:

//->LESS 代码@color: #ccc;.box {

    @color: #eee;
    .gray {

       color: @color;

       width: 100px;
    }

}
nav ul {

    .box !important;
}

//->编译 CSS 的结果.box .gray {

    color: #eeeeee;

    width: 100px;
}

nav ul .gray {
    color: #eeeeee !important;
    width: 100px !important;

}

1. 带参混合 Parametric Mixins

如同 JS 一样,LESS 也可以向函数一样设定形参数,这个技巧在我们的项目中会被经常的使用到,例如:处理 CSS3 的兼容问题。

//->LESS 代码.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {

-webkit-transition: @property @duration @function @delay;-moz-transition: @property @duration @function @delay;-ms-transition: @property @duration @function @delay;-o-transition: @property @duration @function @delay;transition: @property @duration @function @delay;

}
.box1 {

     .transition;
    }

    .box2 {
     .transition(@duration: 2s);

}
.box3 {

     .transition(@duration: 2s; @property: width;);
    }

//->编译为 CSS 的结果.box1 {

-webkit-transition: all 1s linear 0s;-moz-transition: all 1s linear 0s;

    -ms-transition: all 1s linear 0s;
    -o-transition: all 1s linear 0s;
    transition: all 1s linear 0s;

}
.box2 {

-webkit-transition: all 2s linear 0s;-moz-transition: all 2s linear 0s;-ms-transition: all 2s linear 0s;-o-transition: all 2s linear 0s;transition: all 2s linear 0s;

}
.box3 {

-webkit-transition: width 2s linear 0s;-moz-transition: width 2s linear 0s;-ms-transition: width 2s linear 0s;-o-transition: width 2s linear 0s;transition: width 2s linear 0s;

}

此时我们需要注意的是:

 LESS 中也有 arguments。 参数统一用逗号','或';'间隔。

//->LESS 代码.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {

     -webkit-transition: @arguments;

  transition: @arguments;
}

.box1 {
  .transition;

}

//->编译为 CSS 的结果.box1 {

    -webkit-transition: all 1s linear 0s;

    transition: all 1s linear 0s;
}

我们还可以把我们的变量像 JS 的函数一样操作,不仅仅有参数,还有返回值。

//->LESS 代码.average(@x, @y) {

@result: ((@x + @y) / 2);}

div {
.average(16px, 50px); //"call" the mixinpadding: @result; //use its "return" value

}

//->编译为 CSS 的结果div {

       padding: 33px;
    }

1. Mixin Guards

我们可以在 mixin 中设置条件;常用的条件运算符:>、>=、<、<=、=;我们设定的条件还可以使用 IS 函数:iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

//->LESS 代码
.mixin (@a) when (lightness(@a) >= 50%) {

     background-color: black;
    }

.mixin (@a) when (lightness(@a) < 50%) {background-color: white;

}.box1{

     .mixin(#ddd);
    }

    .box2{
     .mixin(#555);

}

//->编译为 CSS 的结果.box1 {

       background-color: black;
    }

    .box2 {
       background-color: white;

}

when 是在设置条件,除了像上面的写法外,我们还可以通过 when 设置多个条件,而且条件中可以使用 is 函数。

//->LESS 代码:使用 IS 函数
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }.mixin (@a; @b: black) when (iscolor(@b)) { ... }//->LESS 代码:多条件,可以使用 and 或者逗号间隔
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }.mixin (@a) when (isnumber(@a)) , (@a > 0) { ... }

我们还可以通过与&特性结合实现'if'类型的语句。

//->LESS 代码:这里的意思是如果为 true,.box 的文字颜色才是白色,反之为黑色。@my-option: false;
& when (@my-option =true) {

    .box {
       color: white;

}}

& when (@my-option =false) {.box {

       color: black;
    }

}

Loops 循环

在 Less 中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合 Guard 条件表达式,就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的 CSS:

//->LESS 代码
.generate-columns(4);.generate-columns(@n, @i: 1) when (@i <= @n) {

  .column-@{i} {
    width: (@i * 100% / @n);

}

  .generate-columns(@n, (@i + 1));
}

//->输出的 CSS.column-1 {

width: 25%;}

.column-2 {
    width: 50%;

}
.column-3 {

width: 75%;}

.column-4 {
    width: 100%;

}

Merge 合并

Merge 特性可以从多个属性中将值,集合到某一个样式属性的列表中(也就是多样式效果)。在编写的时候,+代表以逗号分隔,+_代表多个之前以空格分隔。

//->LESS 代码.mixin{

box-shadow+: inset 0 0 10px #555;transform+_: scale(2);
border+_: 1px solid;

}
.myclass {

    .mixin;
    box-shadow+: 0 0 20px black;
    transform+_: rotate(45deg);
    border+_: yellow;

}

//->输出的 CSS.mixin {

  box-shadow: inset 0 0 10px #555;
  transform: scale(2);
  border: 1px solid;

}
.myclass {

box-shadow: inset 0 0 10px #555, 0 0 20px black;transform: scale(2) rotate(45deg);
border: 1px solid yellow;

}

Parent Selectors

&运算符其实就是让当前的选择器和父级选择器按照特定的规则进行连接,看下面的案例:

//->LESS 代码.box {

color: blue;&:hover {

    color: green;
  }

&-top {height: 30px;

}
&-center {

    height: 500px;
  }

//->多个&&& + &-top {

color: red;}

& &-top {color: grey;

}
&&-top {

    color: black;

}
&, &-top {

    color: orange;
  }

}

//->输出的 CSS.box {

    color: blue;
}

.box:hover {
    color: green;

}
.box-top {

    height: 30px;
}

.box-center {
    height: 500px;

}
.box + .box-top {

color: red;}

.box .box-top {
    color: grey;

}
.box.box-top {

    color: black;
}

.box, .box-top {
    color: orange;

}

改变选择器顺序,下面的案例中,选择器.no-border-radius &会前置插入它的父选择器.header .menu,最后变成.no-border-radius .header .menu形式输出:

//->LESS 代码.header {

.menu {
border-radius: 5px;.no-border-radius & {

     background-image: url('images/button-background.png');
    }

}}

//->输出的 CSS.header .menu {

    border-radius: 5px;
}

.no-border-radius .header .menu {
    background-image: url('images/button-background.png');

}

&使用的概括:&用所有的父级替换,作用域提到最外层。

Import Directives

从其他样式表中导入样式。

//->LESS 代码
@import "public.less";.box {

&:after {.clear;

}}

//->输出的 CSS:会把 public 中的样式也输出.clear {

    display: block;
    height: 0;
    content: "";
    clear: both;
    zoom: 1;

}
.box:after {

    display: block;
    height: 0;
    content: "";
    clear: both;
    zoom: 1;

}

我们发现上述的操作虽然实现了调取使用,但是会把 public 中的 less 也编译到了自己的这个 css 中,如果不想编译的话,我们需要配置一些参数:

//->LESS 代码
@import (reference) "public.less";.box {

&:after {.clear;

}}

//->输出的 CSS:.box:after {

    display: block;
    height: 0;
    content: "";
    clear: both;

}

除了 reference 以外我们还可以配置一些其他的参数值: inline:在输出中包含源文件但

不加工它 less:将文件作为 Less 文件对象,无论是什么文件扩展名 css:将文件作为 CSS

文件对象,无论是什么文件扩展名 once:只包含文件一次(默认行为) multiple:包含文件多次