如何使用Less?
2015-11-18 16:10
375 查看
LESS是动态样式语言,赋予CSS动态语言的特性,如变量、继承、运算、函数,使得CSS更方便编写与维护。>>官网
less
编译后:
一:命令行用法:
安装:
解析styles.less
解析styles.less到styles.css
二:浏览器端使用:
1、引入rel属性的值是stylesheet/less的.less样式表:
2、下载less脚本,放在自己项目中:
或引用:
在线LESS编译器>>
语法:
变量
输出:
混合
输出:
带参数混合
输出:
嵌套:
输出:
命名空间
输出:
作用域
输出:
相关文章:
FIS3中使用less
Webstorm实时编译LESS
sublime自动编译less
Less在sublime高亮显示
让Less在Dreamweaver中高亮显示
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
sublime自动编译less
Less在sublime高亮显示
让Less在Dreamweaver中高亮显示
相关文章推荐
- [LeetCode][Java]The Skyline Problem
- Linux 编译安装Boost
- 用@ExceptionHandler 来进行异常处理
- Android 开发者笔记(OP)
- 自动化运维-自动化扩容介绍加etcd部署
- Android Studio 第三方jar包报错(Error: duplicate files during packaging of APK)
- SVN – 搭建 SVN 服务器 && 多项目分别建立版本库 && 同步至生产环境
- Android 开机自启动应用
- 是不是所有的文法都可以化为LL(1)文法?
- .Net中的反应式编程(Reactive Programming)
- hbase启动后出错
- Hash
- Git学习(二)(2015年11月18日)(2016年1月29日)
- linux+nginx+php-fpm搭建学习笔记
- dynamic programming
- BroadCastReceiver 简介
- 登陆界面的搭建
- EL表达式
- Android Intent Action 大全
- Android TextView的走马灯效果