LESS是动态样式语言,赋予CSS动态语言的特性,如变量、继承、运算、函数,使得CSS更方便编写与维护。>>官网

less

@color:#ff0000;
body{color:@color;}

编译后

bosy{color:ff0000;}

一:命令行用法:

安装:

npm install -g less

解析styles.less

lessc styles.less

解析styles.less到styles.css

lessc styles.less styles.css

注意: 如果文件路径带有中文会编译不成功

二:浏览器端使用:

1、引入rel属性的值是stylesheet/less的.less样式表:

<link rel="stylesheet" href="test.less">

2、下载less脚本,放在自己项目中:

<script src="js/less.js" type="text/javascript"></script>    

或引用:

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

在线LESS编译器>>

语法:

变量

@color:#ff0000;
body{color:@color;}

输出:

body{color:#ff0000;}

混合

.bd{border:1px solid #000;}
.a{.bd}

输出:

.a{border:1px solid #000;}

带参数混合

.box(@height){
height:@height;
line-height:@height;
}
.a{.box(25px);}

输出:

.a {
height: 25px;
line-height: 25px;
}

嵌套:

.box{
.a{color:blue;}
.c{&:hover{color:yellow}}
}

输出:

.box .a{color:blue;}
.box .c:hover{color:yellow;}

命名空间

.box{
.a{color:red;}
} body{
.box > .a;
}

输出:

body {
color: red;
}

作用域

@color:red;
body{
@color:#ffff00;
color:@color;
}

输出:

body {
color: #ffff00;
}

在不同软件中的使用:

FIS3中使用less

Webstorm实时编译LESS

less在sublime中使用

让Less在Dreamweaver中高亮显示

随机推荐

  1. 【hihocoder】sam-3

    把Parent Tree拓扑排序下,然后从下往上合并. 具体的看官方题解啦~ #include<bits/stdc++.h> #define N 1000010 using namespa ...

  2. MariaDB 复合语句和优化套路

    测试环境准备 本文主要围绕的对象是mariadb 高级语法,  索引优化,  基础sql语句调优. 下面那就开始搭建本次测试的大环境. 首先下载mariadb开发环境, 并F5 run起来. 具体参照 ...

  3. SQL利用Case When Then多条件判断SQL 语句

    http://www.cnblogs.com/kevin2013/archive/2010/07/02/1769682.html SQL利用Case When Then多条件判断SQL ,用于sele ...

  4. FineReport——自定义登录页

    统一的接口: http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso&fr_username=XX&fr ...

  5. 【Android开发日记】之入门篇(十五)——ViewPager+自定义无限ViewPager

    ViewPager 在 Android 控件中,ViewPager 一直算是使用率比较高的控件,包括首页的banner,tab页的切换都能见到ViewPager的身影. viewpager 来源自 v ...

  6. C++变量类型转换

    1:int转换为CString CString str; str.Format("As string: %d", int); 2:double转换为CString CString ...

  7. 23:django 信号(signal)

    django包含了一个“信号分配器”使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者,这是特别有用的设计因为有些 ...

  8. HDU-1934

    Car Plates Competition Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  9. 使用JAX-RS创建RESTful Web Service

    guice resteasy http://www.cnblogs.com/ydxblog/p/7891224.html http://blog.csdn.net/withiter/article/d ...

  10. hdu 1114(完全背包)

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...