5分钟快速入门 - Less
下面给大家讲解下Less,纯手工,入门级别,相信没学过的人阅读完后就懂了,以下是我要讲的四点:
- 简单介绍
Less CSS 是一个使用广泛的 CSS 预处理器。
对 CSS 进行扩展,减少很多 CSS 的代码量。
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数.
LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js).
- 快速入门
在服务器端最容易的安装方式就是通过 npm (node.js 的包管理器),方法如下:
$ npm install -g less
安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:
$ lessc gloal.less
你可以将输出重定向到一个文件:
$ lessc gloal.less > gloal.css
- 常用语法
1.变量
@color: #4d926f;
#header { color: @color; } #header { color: #4d926f; } @color: #253636;
@color: #ff3636; //覆盖第一次的定义
#header {color: @color;} //多次反复解析 #header {color: #ff3636;}
2.Mixins——混入, 类似函数或宏
.borderRadius(@radius:3px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
} #header { .borderRadius(10px); } .btn { .borderRadius}
编译后:
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
Mixins注意事项:
a.可以不使用参数 .wrap(){…} .pre{ .wrap }
b.内置变量@arguments代表所有参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; } 注意,在参数没有默认值的前提下使用@arguments调用时必须赋值,否则会导致整个页面内的less语法出错而失效。
c. Mixins必须使用ID或者类,即#xx或.xx,否则无效。
3.嵌套
#header {
&.fl{ float: left; }
.mln { margin-left:; }
} #header.fl{float: left;}
#header .mln {margin-left:;}
4.运算&函数
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
.switchColor {
color: #222222;
}
.lightColor{
lighten(@color, 10%);
}
运算主要是针对任何数字、颜色、变量的操作,支持加、减、乘、除、()或者更复杂的综合运算;而Functions主要是针对颜色,同时提供了部分数学函数,具体的API可参阅文档。
5.继承
.animal { background-color: black; color: white;}
.bear { &:extend(.animal); background-color: brown;}
当前还有其他继承的写法,我这只是写了其中的一种,详细可在官网上查看文档。
6.作用域
@var: red;
#page {
@var: white;
#header { color: @var; // white }
}
#footer {
color: @var; // red
}
Less中的变量、Mixins等的作用域都只是当前文件!
7.注释
单行注释方式: //单行注释
单行、多行注释: /* 注释 多行注释 */
- 资源分享
官网:lesscss.org
中文社区:www.lesscss.net
在线LESS编译:http://tool.oschina.net/less
...
5分钟快速入门 - Less的更多相关文章
- 一分钟快速入门openstack
一.它是什么,能干什么想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让大家认识更清晰些.op ...
- Vue.js——60分钟快速入门(转)
vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...
- Vue.js 60 分钟快速入门
Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...
- 不会几个框架,都不好意思说搞过前端: Vue.js - 60分钟快速入门
Vue.js——60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...
- AngularJS 30分钟快速入门【译】
引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...
- ichartjs一分钟快速入门教程
1.构建项目环境 由于ichartjs是一个js库,所以只要将ichart.js加入你页面的head中就完成了ichartjs的运行环境.代码如下: <script type="tex ...
- Redis 十分钟快速入门
本教程是一个快速入门教程,所以Redis的命令只是简单介绍了几个常用的,如果有其他需求请求官网查看API 使用. 1. Redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的ke ...
- 十分钟快速入门 Python,看完即会,不用收藏!
本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...
- Python 30分钟快速入门指南
学习地址 中文版:Python 30分钟入门指南 英文版:Learn X in Y minutes 学习时间 2019/03/10 19:00 - 19:32,多用了2分钟.
随机推荐
- Masonry布局框架的使用
Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性.比我们使用自动布局,繁琐的约束条件,好用多了.下面我们来学学masonry的使用方 ...
- iOS搜索框UISearchBar
当你在seachBar中输入字母之前的时候,只是用鼠标选中searchBar的时候,如图 终端输出截图如下:(这个时候调用先shouldBeginEditing,之后调用didBeginEditing ...
- nodejs抓取数据一(列表抓取)
纯属初学...有很多需要改进的地方,请多多指点... 目标是抓取58同城 这个大分类下的列表数据: http://cd.58.com/caishui/?PGTID=14397169455980.924 ...
- select into from 和 insert into select 的用法
SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) valu ...
- ios framework 开发
ios framework 开发 之 参考 ios framework 开发 之 实战 iOS workspace 依次编译多个工程
- python 自动化运维项目_目录
微信小程序监控界面 CMDB 跳板机 代码上线系统 网站用户访问质量监测 分布式监控 Docker自动化管理平台 Openstack二次开发
- php在客户端禁用cookie时让session不失效的解决方法
cookie固然好,不过有些客户端浏览器会禁用cookie,这就会导致你所依赖cookies的程序会失效或出错,那么若真出现用户关闭cookies的情况,PHP应该如何再次使用session?方法还是 ...
- Vim 第一天
记得第一次接触vi编辑器,好像是在海尔的机房吧,那是时候还是没有毕业的小菜鸟一只(PS:现在也是菜鸟),记得是测试一个云存储的产品.看着他们用vi编辑器,当时也没有感觉有什么(现在也没感觉……),只是 ...
- Visual Studio 2015的安装与基本使用
为什么要使用Visual Studio 2015? 它是中文的.界面友好.自动补全.实时语法错误提示(上图中波浪线部分).单步调试……最重要的社区版是免费的!所以你不必再使用破解的.老旧的的不兼容现代 ...
- Python中执行系统命令常见的几种方法--转载
Python中执行系统命令常见的几种方法 Python中执行系统命令常见的几种方法有: (1)os.system # 仅仅在一个子终端运行系统命令,而不能获取命令执行后的返回信息 # 如果再命令行下执 ...