less 的配置:
1.浏览器端的使用
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
需要注意的是 stylesheet/less
这种方法不推荐使用、影响性能
2.第三方工具 koala
http://koala-app.com/index-zh.html
使用less的时候打开koala
3.npm 安装 下载node
$ npm install -g less
HBuilder 工具>选项>预编辑器>less编辑
路径: C:\Users\目前用户\AppData\Roaming\npm\lessc.cmd
命令参数: %FileName% %FileBaseName%.css
less 的用法:
api : http://lesscss.cn/usage/

嵌套 &符号代表父元素 &:hover

变量  @width: 100px;

混合模式:

//1,最简单的混合
/*.classa{
border:1px solid #b7b7b7;
}
.clearFix{
*zoom:1;
&:after{
content: '';
display: block;
clear: both;
}
}
.classb{
.classa;
.clearFix;
}*/
//带参数混合
/*
.border(@color){
border:1px solid @color;
}
.box1{
.border(#b7b7b7);
}
.box2{
.border(#ff0000);
}
.box3{
.border(#b7b7b7);
}
//多个参数的混合
.border(@width,@style,@color){
border:@width @style @color;
}
.box1{
.border(1px,solid,#b7b7b7);
}
.box2{
.border(1px,solid,#ff0000);
}
.box3{
.border(2px,solid,#b7b7b7);
}
.box4{
.border(1px,dotted,#b7b7b7);
}*
//带默认值的参数混合
.border(@width:1px,@style:solid){
border:@width @style #033333;
}
.box1{
.border(1px,dotted);
}
.box2{
.border();
}
.box3{
.border(2px);
}
.box4{
.border();
}
//arguments变量 , 代表了所有的参数(在不在乎参数顺序的时候可以使用);
.border(@style:solid,@width:1px){
border:@arguments #033333;
}
.box1{
.border(1px,dotted);
}
.box2{
.border();
}
.box3{
.border(2px);
}
.box4{
.border();
}*
//模式匹配
.border(top,@width:1px){
border-top:@width solid #033333;
}
.border(right,@width:1px){
border-right:@width solid #033333;
}
.border(bottom,@width:1px){
border-bottom:@width solid #033333;
}
.border(left,@width:1px){
border-left:@width solid #033333;
}
.border(@_,@width:1px){
width:round(5.5)*1px;
}
.box1{
.border(top,5px);
}
.box2{
.border(right);
}
.box3{
.border(bottom);
}
.box4{
.border(left);
}
//Math函数
/*
round(5.5) 四舍五入
ceil(2.4); 向上取整// returns `3`;
floor(2.6); 向下取整// returns `2`;
*/

less 的注释:
//这种注释方法不会被编译到css文件里面去(通常用于生产环节)
/*
这种注释会被解析到css文件里面去
*/
less 避免编译:
~"..." font:(12/@rem)~'/'(20/@rem) '微软雅黑';

less的配置和使用的更多相关文章

  1. 配置android sdk 环境

    1:下载adnroid sdk安装包 官方下载地址无法打开,没有vpn,使用下面这个地址下载,地址:http://www.android-studio.org/

  2. Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记

    以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...

  3. react-router 组件式配置与对象式配置小区别

    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...

  4. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Android Studio 多个编译环境配置 多渠道打包 APK输出配置

    看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...

  6. Virtual Box配置CentOS7网络(图文教程)

    之前很多次安装CentOS7虚拟机,每次配置网络在网上找教程,今天总结一下,全图文配置,方便以后查看. Virtual Box可选的网络接入方式包括: NAT 网络地址转换模式(NAT,Network ...

  7. [linux]阿里云主机的免登陆安全SSH配置与思考

    公司服务器使用的第三方云端服务,即阿里云,而本地需要经常去登录到服务器做相应的配置工作,鉴于此,每次登录都要使用密码是比较烦躁的,本着极速思想,我们需要配置我们的免登陆. 一 理论概述 SSH介绍 S ...

  8. nginx配置反向代理或跳转出现400问题处理记录

    午休完上班后,同事说测试站点访问接口出现400 Bad Request  Request Header Or Cookie Too Large提示,心想还好是测试服务器出现问题,影响不大,不过也赶紧上 ...

  9. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  10. 在 ML2 中配置 OVS flat network - 每天5分钟玩转 OpenStack(133)

    前面讨论了 OVS local network,今天开始学习 flat network. flat network 是不带 tag 的网络,宿主机的物理网卡通过网桥与 flat network 连接, ...

随机推荐

  1. grunt配置详情

    这个grunt配置 是我的一个程序员朋友从网上无意间看到的,然后他亲测了下,恩,是可以的.不过我到目前还未测试过是否可以. 一.安装node, 首先确保电脑已有node的环境.然后 运行  npm i ...

  2. 关于获取计算机唯一ID问题

    1:CPU序列号,并不是每颗CPU都有一个唯一的序列号,CPU试每种型号一个序列号,其实可以认为是CPU型号号码.PIII以前的计算机没有ID,而且AMD的CPU也没有ID. 创建一个虚拟机,他会重新 ...

  3. Android从图库选择照片

    从机里取照片,开头用网上找的代码测试,导致类似下面这样的Crash:java.lang.RuntimeException: Failure delivering result java.lang.Se ...

  4. FPGA-信号边缘检测

    在FPGA逻辑电路中,输入信号的边缘检测是一个常用的操作,这算是FPGA的基本功之一. 信号边缘检测应用十分广泛,例如:通信协议的时序操作,按键的检测等,都应用到按键的检测.按键的检测分为上升沿和下降 ...

  5. MySQL-02 数据表管理

    学习要点 数据类型 数据字段属性 数据表的类型及存储位置 索引 数据表对象管理 数据类型 数据库中的数据类型分为字段类型和值类型,定义如下: 在设计数据表字段的时候,字段类型定义为三大类:数值类.字符 ...

  6. JavaSE-25 AWT

    学习要点 关于AWT AWT容器 布局管理器 AWT组件 事件处理 关于AWT java.awt包与子包 AWT软件包 说明 import  java.awt.*; 基本组件使用工具 import  ...

  7. EBS ORACLE使用API批量取消销售订单

    需要切换组织,还有用户的id.下面红色字体代表要修改的地方. /*BEGIN MO_GLOBAL.INIT('M'); MO_GLOBAL.set_policy_context ('S',); FND ...

  8. Sphinx排序模式

    目前SPHINX支持6种排序模式.分别是: 1. SPH_SORT_RELEVANCE2. SPH_SORT_ATTR_DESC3. SPH_SORT_ATTR_ASC4. SPH_SORT_TIME ...

  9. 洛谷p1049 01背包

    dp水之旅背包 题目描述 有一个箱子容量为V(正整数,0<=V<=20000),同时有n个物品(0<n<=30,每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱 ...

  10. 7. ENGINES

    7. ENGINES ENGINES表提供有关存储引擎的信息. 这对于检查是否支持存储引擎或查看默认引擎是什么特别有用. INFORMATION_SCHEMA Name SHOW Name ENGIN ...