Less——less基本使用

基本概况

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

编译

1、在npm中输入以下语句，但是注意要更改文件位置

lessc style.less style.css

注释

1、// 双斜杠的注释 less是支持的而且这样的注释不会再编译之后出现在css中

2、/**/使用css的注释 less是支持的，编译的时候该注释会被保留

变量

1、@变亮名：具体值

2、经过nmp进行编译才能得到对于的css文件

@w: 100px;
@h: 50px;
@c: rgba(255, 255, 255, 0.3);
body {
  width: @w;
  height: @h;
  background-color: @c;
}

===》编译：

C:\Users\Administrator>lessc E:\less\first\.less E:\less\first\.css

===》编译之后：

body {
  width: 100px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.3);
}

混合

1、样式中可以混入类选择器和id选择器

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

===》编译后

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

请注意，当您调用mixin时，括号是可选的

.a();   //these lines do the same thing
.a;

2、可以不输出混合。你想用一个混合，这个混合只是在被引用的时候输出，自己不能作为类输出，你可以在它后面加括号。

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

===》编译后

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

3、混合中带有参数

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

===》编译后

#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

混合中含有参数也有是默认值

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

嵌套

#father {
  width: 100px;
  div {
    width: 100px;
    height: 50px;
    ul {
      width: 50px;
      height: 50px;
      li {
        width: 50px;
        height: 50px;
      }
    }
  }
}

===》编译后

#father {
  width: 100px;
}
#father div {
  width: 100px;
  height: 50px;
}
#father div ul {
  width: 50px;
  height: 50px;
}
#father div ul li {
  width: 50px;
  height: 50px;
}

选择器

1、嵌套中如果父元素与子元素有默认的空格，&可以取消空格，这为伪元素与交集选择器提供了可能

.content() {
  width: 100px;
  height: 100px;
}

div {
  .content;
  &:hover {
    background-color: black;
  }
  &::after {
    content: '';
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
  }
}

===》编译后

div {
  width: 100px;
  height: 100px;
}
div:hover {
  background-color: black;
}
div::after {
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}