Less语法学习

Less基础语法学习

1.介绍

​ 之前写CSS样式的时候感觉毫无逻辑可言，而且不像后端代码那样支持变量和函数。而Less语言作为CSS的扩展，不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。尤其是配合上rem、媒体查询可以实现移动web的适配工作，而且可维护性非常好。

2.配置

​ 用npm install less --g 安装less完成后，这里最好使用webstrom开发工具配置一下less，因为浏览器是不认识less的最终还是要将less编译成css，这里不做过多的讨论。相关的详细配置可以自行查找。如果没有less的环境需要运行的话，需要借助less.js插件，在静态页面link type=‘text/less’ href=’…less’ 下方引入less.js 。注意这里的话必须使用http的方式打开网页，因为less其实是通过ajax请求的方式将type类型为less的文件通过js给编译成了css。

3.变量

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

以@开头的方式定义一个变量，以后样式中需要可以直接引用。

4.Mixin混入

Mixin（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixin（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

.f(@direction:left){
  float: @direction;
}
.borderRadius(@width:100px){
  border-radius: @width;
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  -o-border-radius:@width;
  -ms-border-radius:@width;
}
.w50-f_left{
  .f(right);
  .borderRadius(20px);
}

5.嵌套

在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式

@charset "UTF-8";
.wjs_app{
  display: block;
  img{
    display: none;
  }
  /*需要连接的情况：&*/
  &:hover{
    img{
      display: block;
      position: absolute;
      left: 50%;
      margin-left:-60px;
      border: 1px solid #ccc;
      border-top: none;
      top:40px;
      z-index: 100000;
    }
  }
  > div{
    display: block;
  }
}

编译成CSS后的样式

@charset "UTF-8";
.wjs_app {
  display: block;
  /*需要连接的情况：&*/
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}

6.import导入

@import "base";

一个less中用import导入另一个less，编译后就会将less中所有的代码粘贴过来一样。

7.运算及函数

/*运算*/
@num:5;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.3;
    /*内置函数，亮度减少百分之20*/
    border-color: darken(red,20%);
  }
}

less还有很多内置函数，可自行上官网查阅。这里推荐一个less中文网站