Less的简单使用
在浏览器中使用LESSCSS
浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。
浏览器端使用方法：
使用
link引入.less文件，注意将rel设为stylesheet/less:<link rel="stylesheet/less" type="text/css" href="styles.less" />
在本站下载less.js，将它引入页面的
<head>元素中，像这样：<script src="less.js" type="text/javascript"></script>
需要注意.less文件要在脚本文件之前引入。
基本用法如下：
/*定义一个color变量*/
@red: #e74c3c;
#header{
color: @red;//引用之前定义好的变量, 变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。所以@red在后面定义也是可以的
}
h2{
color: @red;
} /* 定义一个warning类
* 可以像函数一样向类传递参数*/
.warning (@warning:orange){
background-color:@warning;
} #warning{
.warning;
}
#error{
.warning(red);
} /* 当然， 还可以嵌套 */
#footer{
h2{
color:blue;
}
p{
color:grren;
a{
background-color:orange;
&:hover{
background-color:red;
}
}
}
} /* 函数和运算 */
@the-border: 1px;
@base-color: #111; #header{
color:(@base-color * 3);
boder-left:@the-border;
boder-right:(@the-border * 10); } #footer{
background-color: desaturate(@red, 30%);//降低饱和度：desaturate(color, x%);
}
Less的简单使用的更多相关文章
- 【造轮子】打造一个简单的万能Excel读写工具
大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...
- Fabio 安装和简单使用
Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 哪种缓存效果高？开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 在Openfire上弄一个简单的推送系统
推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...
- 我的MYSQL学习心得（一） 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 使用 Nodejs 搭建简单的Web服务器
使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...
- ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 简单粗暴地理解js原型链--js面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
随机推荐
- WPF 3D 知识点大全以及实例
引言 现在物联网概念这么火,如果监控的信息能够实时在手机的客服端中以3D形式展示给我们,那种体验大家可以发挥自己的想象. 那生活中我们还有很多地方用到这些,如上图所示的Kinect 在医疗上的应用,当 ...
- 【2016-11-7】【坚持学习】【Day22】【Oracle 递归查询】
直接在oracle 递归查询语句 select * from groups start with id=:DeptId connect by prior superiorid =id 往下找 sele ...
- 【2016-10-27】【坚持学习】【Day14】【VS 配置管理器 AssemblyInfo 】
有这样一个需求,不同客户,有不同的逻辑,通过配置管理器和条件编译进行 自动执行正确的代码.
- 当Python在appium中使用if……else语句不好使怎么办
前几天写自动化脚本的时候,有个地方需要用if--else判断获得的ID和name是哪个,从而决定点击哪个按钮,我用if--else去判断,可是总是提示我找不到对应的元素, 在网上爬了好久,最终终于找到 ...
- The week in .NET - 1/12/2015
On.NET Last week, we had Mads Torgersen on the show to talk about language design in general, and C# ...
- C#进阶系列——MEF实现设计上的“松耦合”（二）
前言:前篇 C#进阶系列——MEF实现设计上的“松耦合”(一) 介绍了下MEF的基础用法,让我们对MEF有了一个抽象的认识.当然MEF的用法可能不限于此,比如MEF的目录服务.目录筛选.重组部件等高级 ...
- 回答阿里社招面试如何准备，顺便谈谈对于Java程序猿学习当中各个阶段的建议
引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的对话都给记下来.LZ自己当初面试完以后,除了记住一些聊过的知识点以外,具体的内容 ...
- 76 mkswaP-用于设置交换区
Linux mkswap命令用于设置交换区(swap area). mkswap可将磁盘分区或文件设为Linux的交换区. 语法 mkswap [-cf][-v0][-v1][设备名称或文件][交换区 ...
- 反序列化问题的研究之java篇
博客园很早就开通了,当时下决心要把自己的经验心得记录上去,但是却没有做到,因为一直觉得自己搞得东西可能还是比较的初级,感觉拿不出手,所以也就是只是把它记录在在印象笔记上面(三年下来,还是整理和收藏了一 ...
- Win10家庭版升级专业版密钥
步骤如下: Win10 Home 版本基础上,设置—更新安全—激活—更改产品密钥(或者 我的电脑右键—属性—右下角更改产品密钥),输入 VK7JG-NPHTM-C97JM-9MPGT-3V66T