lessc_less的基本用法

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

使用方式

两种使用方式：第一种全局安装less，利用命令编译less;第二种直接引入less.js.

npm安装

npm install -g less

npm install -g less-plugin-clean-css

命令行

lessc styles.less styles.css // 编译成css

lessc --clean-css styles.less styles.min.css // 编译压缩css

引入less.js

这里注意要在less.js引入前引入.less样式文件

使用

变量

1. 值变量

less 的变量声明是以@开头

/* less */

@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111;

#header {

color: @light-blue;

}

2. 选择器变量

选择器也可使用变量,变量需要用@{}包括

@mySelector: .wrap;

@{mySelector}{ //变量名 必须使用大括号包裹

color: #999;

width: 50%;

}

3. 属性变量

属性名称使用变量

@borderStyle: border-style;

@Soild:solid;

#wrap{

@{borderStyle}: @Soild;//变量名 必须使用大括号包裹

}

4. url变量

@images: "../img";//需要加引号

body {

background: url("@{images}/dog.png");//变量名 必须使用大括号包裹

}

5. 声明变量

类似于mixins,用于引入公共代码块

结构: @name: { 属性: 值 ;};

使用：@name();

// less

@background: {background:red;};

#main{

@background();

}

// css

#main{

background:red;

}

6. 变量作用域

less 中变量的作用域是采用就近原则

/* Less */

@var: @a;

@a: 100%;

#wrap {

width: @var;

@a: 9%;

}

@a: 8%;

/* 生成的 CSS */

#wrap {

width: 9%;

}

Mixins

可以直接引入定义好的类的样式直接混入到当前

1. 无参混入

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

#menu a {

color: #111;

.bordered; // 等价于.bordered()

}

2. 默认参数方法

Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。

@arguments 犹如 JS 中的 arguments 指代的是 全部参数。

传的参数中 必须带着单位。

.border(@a:10px,@b:50px,@c:30px,@color:#000){

border:solid 1px @color;

box-shadow: @arguments;//指代的是 全部参数

}

#main{

.border(0px,5px,30px,red);//必须带着单位

}

条件语句when

Less 没有 if else，它有 when用于做条件判断

/* Less */

#card{

// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行

.border(@width,@color,@style) when (@width>100px) and(@color=#999){

border:@style @color @width;

}

// not 运算符，相当于 非运算 !，条件为 不符合才会执行

.background(@color) when not (@color>=#222){

background:@color;

}

// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行

.font(@size:20px) when (@size>50px) , (@size<100px){

font-size: @size;

}

}

#main{

#card>.border(200px,#999,solid);

#card .background(#111);

#card > .font(40px);

}

/* 生成后的 CSS */

#main{

border:solid #999 200px;

background:#111;

font-size:40px;

}

嵌套

less 支持嵌套写法

1. 基本层级嵌套

#header {

color: black;

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

}

}

2. 父选择&符

a {

color: blue;

&:hover {

color: green;

}

}

3. 嵌套指令冒泡

// less

.screen-color {

@media screen {

color: green;

@media (min-width: 768px) {

color: red;

}

}

}

/* css */

@media screen {

.screen-color {

color: green;

}

}

@media screen and (min-width: 768px) {

.screen-color {

color: red;

}

}

运算符

@base: 5%;

@filler: @base * 2; // result is 10%

@other: @base + @filler; // result is 15%

继承

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式

1. extend 关键字的使用

/* Less */

.animation{

transition: all .3s ease-out;

.hide{

transform:scale(0);

}

}

#main{

&:extend(.animation);

}

#con{

&:extend(.animation .hide);

}

/* CSS */

.animation,#main{

transition: all .3s ease-out;

}

.animation .hide , #con{

transform:scale(0);

}

2. all 全局搜索替换

使用选择器匹配到的 全部声明

/* Less */

#main{

width: 200px;

}

#main {

&:after {

content:"Less is good!";

}

}

#wrap:extend(#main all) {}

/* CSS */

#main,#wrap{

width: 200px;

}

#main:after, #wrap:after {

content: "Less is good!";

}

导入

1. 导入 less 文件 可省略后缀

import "main";

//等价于

import "main.less";

2. @import 的位置可随意放置

#main{

font-size:15px;

}

@import "style";

3. reference

使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。

/* Less */

@import (reference) "bootstrap.less";

#wrap:extend(.navbar all){}

函数

less 提供多种函数可以使用

1. 判断类型

isnumber(#ff0); // 判断给定的值 是否 是一个数字

iscolor(#ccc) //判断给定的值 是否 是一个颜色

isurl("") // 判断给定的值 是否 是一个 url

2. 颜色操作

rgb(90, 129, 32) // #5a8120

mix(#ff0000, #0000ff, 50%) // #800080

hsl(90, 100%, 50%) // #80ff00

argb(rgba(90, 23, 148, 0.5)) // #805a1794

darken(hsl(90, 80%, 50%), 20%) // #4d8a0f

3. 数学函数

ceil(2.4) // 3

floor(2.6) // 2

percentage(0.5) // 50%

round(1.67, 1) // 1.7

sqrt(25cm) // 5cm

abs(-18.6%) // 18.6%

其他

注释

/* */ CSS原生注释，会被编译在 CSS 文件中。

/ / Less提供的一种注释，不会被编译在 CSS 文件中

避免编译

使用 ~' 值 ' 结构可以避免被编译

结构： ~' 值 '

/* Less */

#main{

width:~'calc(300px-30px)';

}

/* CSS */

#main{

width:calc(300px-30px);

}

变量拼串

在平时工作中，这种需求 太常见了。 在下面例子中， 实现了不同的 transtion-delay、animation、@keyframes

结构： ~"字符@{变量}字符";

.judge(@i) when(@i=1){

@size:15px;

}

.judge(@i) when(@i>1){

@size:16px;

}

.loopAnimation(@i) when (@i<16) {

.circle:nth-child(@{i}){

.judeg(@i);

border-radius:@size @size 0 0;

animation: ~"circle-@{i}" @duration infinite @ease;

transition-delay:~"@{i}ms";

}

@keyframes ~"circle-@{i}" {

// do something...

}

.loopAnimation(@i + 1);

}

使用 JS

因为 Less 是由 JS 编写，所以 Less 有一得天独厚的特性：代码中使用 Javascript

/* Less */

@content:`"aaa".toUpperCase()`;

#randomColor{

@randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";

}

#wrap{

width: ~"`Math.round(Math.random() * 100)`px";

&:after{

content:@content;

}

height: ~"`window.innerHeight`px";

alert:~"`alert(1)`";

#randomColor();

background-color: @randomColor;

}

/* 生成后的 CSS */

// 弹出 1

#wrap{

width: 随机值(0~100)px;

height: 743px;//由电脑而异

background: 随机颜色;

}

#wrap::after{

content:"AAA";

}