Less简单使用

最近在移动开发中用到了less,在页面繁多样式杂乱的情况下，less可以帮助我们减少很多开发量。使之代码简洁，样式清晰，便于维护。

介绍

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

一、要使用 less 需要一个 less 编译的工具

1.koala 的下载与安装:

下载建议到官网去下载 http://koala-app.com/index-zh.html ，下载后一个压缩包，解压后双击可执行文件即可使用了。不需要安装。

2.koala 的介绍：

image

打开 koala 软件，如上图，点击"+"可以选择文件夹，选择的文件夹里需要预先准备一个 less 文件，且仅仅只需要准备 less 文件，当添加了这个文件夹后，koala 会根据 less 文件的名称在同一目录下自动添加一个 css 文件,或者自己手动选择导出目录。

二、less 的使用准备

在 html 中引入的依然是 css 文件，只不过我们一旦选用 less 编写样式了，以后维护就是维护 less 文件

indexcss.png

indexless.png

本人项目基于create-react-app 脚手架自行修改webpack 使之加载less 这里不做介绍。

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。申明方式如下:

@变量名:xxx

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

不带参数

@w:100px;
.box{
    width: @w;
    height: @w;
    background: red;
}

.box1{
    .box;
    background: yellow;
    margin-top: 20px;
}

box.png

匹配模式下我们画一个三角形

.direction (bottom,@w:10px,@color:red){
    border-width: @w;
    border-color:@color transparent transparent transparent ;
}

.direction (top,@w:10px,@color:red){
    border-width: @w;
    border-color:transparent transparent  @color transparent ;
}

.direction(right,@w:10px,@color:red){
    border-width: @w;
    border-color: transparent transparent transparent @color;
}

.direction(left,@w:10px,@color:red){
    border-width: @w;
    border-color: transparent @color transparent transparent ;
}
.sanjiao{
    width: 0;
    height: 0;
    border-style:solid;
    .direction(right);
}

编译后的css为

.sanjiao {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: transparent transparent transparent #ff0000;
}

我们带了三个参数分别为类型 @w 宽带 @color颜色并且宽度和颜色我们分别给了默认颜色。在使用过程中我们完成可以根据的需求改变值，做到所以样式公用。

top.png

right.png

bottom.png

left.png

嵌套

你还在为多级嵌套写样式为烦恼吗,less帮你轻松搞定。

ul{
    list-style: none;
    background: #FFFFFF;
}
ul li{
    height: 50px;
}

ul li span{
    color: red;
    font-size:20px ;
}

用less嵌套

ul{
    list-style: none;
    background: #FFFFFF;
    ul{
      height: 50px;
      span{
        color: red;
        font-size:20px;
        &:hover{
            color: #FFBAA2;
        }
      }
    }   
}

&符号在less中可以代替父级元素

函数 & 运算

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以:

@import "lib.css";

这样LESS就会跳过它不去处理它.

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.
要输出这样的值我们可以在字符串前加上一个 ~, 例如:

 @height: 234*@baseFontSize;
 height: calc(~"100vh - "@height);

还有更多较为复杂的使用方法这里不做介绍，掌握上面基本能满足项目开发了！

Less总结