项目中less常用的一些东西

一、less简介

LESSCSS是一种动态样式语言,简称LESS,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护
LESS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

使用文档:

Less中文网 http://lesscss.cn/
Less快速入门 http://www.bootcss.com/p/lesscss/

二、使用less

直接使用:

官网下载less.js:http://lesscss.cn/#download-options
编写Less(类似于CSS),但style标记的type属性必须写为text/less(内部),link标记的rel属性必须写为stylesheet/less(外部,此时必须通过web形式访问)
在Less后链接less.js文件

编译为CSS后使用:
安装npm:https://nodejs.org
安装lessc(less compile)
安装sublime插件less2css

三、语法

1、变量

LESS中使用@定义变量,然后在需要的时候调用变量,如:@name:值;
变量不仅可用于值,还可以用于选择器、URL、样式属性、变量嵌套等
变量的加载使用的是Lazy Loading模式,无需先定义再使用
LESS中对于变量名称没有JS那样严格的规范,如:@a-z、@22都是合法的变量名称,建议按照规范起名

  • 简单变量定义
    @color: #f00;
    h1{color:@color;}
    #red{color:@color;}

    生成

    h1{color:#f00;}
    #red{color:#f00;}

    注意也有可能生成
    color:red;

  • 选择器变量定义
    @selector1: myabc;
    .@{selector1}{
     color:#f00;
    }

    生成

    .myabc{
     color:#f00;
    }

    注意,除了简单变量外,其他变量在调用时都需要加{}

  • URL变量定义
    @path: “../imgs”;
    .btn{
     background:url("@{path}/1.jpg”);
    }

    生成

    .btn{
     background:url(../imgs/1.jpg)
    }
  • 属性变量定义
    @prop: color;
    .box{
     @{prop}:red;
     background-@{prop}:blue;
    }

    生成

    .box{
     color:red;
     background-color:blue
    }
  • 变量嵌套定义
    @foo: #f00;
    @too: foo;
    .box{
     color:@@too;
    }

    生成
    .box{ color:red; }

  • 延迟加载Lazy Loading
.box{
 color:@too;
 @other:red;
}
@too:@other;
@other:green;

生成

.box{
 color:red;
}

2、混合mixin

在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性
.bordered {
 border-top: dotted 1px black; 
 border-bottom: solid 2px black; 
}
在其他class中引入那些通用的属性集,方式如下
#menu a { color: #111; .bordered; }
混合可以将一个定义好的class轻松的引入到另一个class中,从而实现样式的复用
  • 带参数的混合
    
    在Less中可以定义带一个或多个带参数的属性集合,并指定缺省值,在调用可以传递参数或使用缺省值,就像使用函数一样。如:
    .ww(@w){width:@w}
    div{.ww(200px)}
    得到:div{width:200px}

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
box-shadow: @shadow;
}
div{.box-shadow;}
得到:div{
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.25);
box-shadow:0 1px 3px rgba(0,0,0,.25)
}

- 使用导引表达式的混合

LESS通过导引混合来实现条件判断,如:
.mixin (@a) when (@a >= 50) {
background-color: black;
}
.mixin (@a) when (a < 50) {
background-color: white;
}
.mixin (@a) {
color: @a;
}

### 3、运算

任何数字、颜色或者变量都可以参与运算,如:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
LESS 可以分辨出颜色和单位
@var: 1px + 5;
得到6px.

### 4、嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式,先看下面这段CSS代码

header { color: black; }

header .navigation { font-size: 12px; }

header .logo { width: 300px; }

header .logo:hover { text-decoration: none; }

在 LESS 中可以这样写,代码更简洁更清晰

header { color: black;

 .navigation { font-size: 12px } 
.logo { width: 300px; 
 &:hover { text-decoration: none }
 }

}

### 5、继承

继承:extend
继承被附在选择器后面或放置在规则集(即具体定于样式处),它看起来就像是一个在关键字extend后具有可选参数的伪类
.parentClass{  
    color:red;  
}  
.subClassOne{  
    &:extend(.parentClass);  
}  
.subClassTwo:extend(.parentClass){  
      
}  
得到:.parentClass, .subClassOne, .subClassTwo {  
  color: red;  
}  

### 6、注释

注释类型
// 单行注释
/ 多行注释 /

### 7、导入@import

可以使用@import导入其他文件(.less或.css)
如果导入的是.less文件,则可以省略扩展名
@import “library”; //library.less
@import “style.css”;

作者:xiaoxiaok

%s 个评论

要回复文章请先登录注册