在浏览器中使用LESSCSS

浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。

浏览器端使用方法：

  1. 使用link引入.less文件，注意将rel设为stylesheet/less:

    <link rel="stylesheet/less" type="text/css" href="styles.less" />

  2. 在本站下载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的简单使用的更多相关文章

  1. 【造轮子】打造一个简单的万能Excel读写工具

    大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...

  2. Fabio 安装和简单使用

    Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...

  3. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  4. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  5. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  6. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. 使用 Nodejs 搭建简单的Web服务器

    使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...

  8. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  10. 简单粗暴地理解js原型链--js面向对象编程

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

随机推荐

  1. 编码中的setCharacterEncoding 理解

    1.pageEncoding="UTF-8"的作用是设置JSP编译成Servlet时使用的编码.  2.contentType="text/html;charset=UT ...

  2. 【2016-10-27】【坚持学习】【Day14】【GlobalAssemblyInfo 】

    当一个解决方案,有多个项目时候,每一个项目的AssemblyInfo 都要写相同的东西.麻烦,因此使用GlobalAssemblyInfo 来统一管理. 实现如下: 在解决方案下增加一个文件夹以及Gl ...

  3. jquery常用函数与方法

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  4. Spring远程调用技术<3>-Spring的HTTP Invoker

    前面提到RMI使用java标准的对象序列化机制,但是很难穿透防火墙.  另一方面,Hessian和Burlap能很好地穿透防火墙,但是使用私有的对象序列化机制. Spring提供的http invke ...

  5. iOS 2D绘图 (Quartz2D)之Transform(CTM，Translate，Rotate，scale)

    前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...

  6. android第一行代码－5.监听器的两种用法和context

    监听器的两种用法 1.匿名函数设置监听器 public class MainActivity extends Activity { private Button button; @Override p ...

  7. sqlserver 2008R2数据库迁移oracle

    x项目需要,将以前的sqlserver数据库迁移的oracle数据库中,由于以前对oracle只是在DML语句的步骤,所以总结一下这次遇到的问题以及具体步骤 1,oracle新建数据库 新建Oracl ...

  8. PyQt4入门

    PyQt4入门教程(6)_对话框 文中译者的话将用方括号[]标出.对话框(Dialogs)是现代GUI程序中不可缺少的一部分.对话本来指的是两个或者更多人之间的交流,而在计算机应用中,对话是一个可以让 ...

  9. Windows Serivce服务实现过程和打包安装

    环境:vs2013,win7 参考: Windows服务的快速搭建与调试(C#图解) .Net实现Windows服务安装完成后自动启动的两种方法 C# 生成windows 服务打包程序 1.新建项目W ...

  10. 从贝叶斯到粒子滤波——Round 2

    上一篇博文已经讲了贝叶斯滤波的原理以及公式的推导:http://www.cnblogs.com/JunhaoWu/p/bayes_filter.html 本篇文章将从贝叶斯滤波引入到粒子滤波,讲诉粒子 ...