less 的使用方法总结
一、 安装和使用 LESS 1.1 安装 使用命令行安装 LESS npm install -g less
1.2 使用 less 有多种的使用方法，在这里我向大家介绍最常用的俩种方法。 第一种是直接在浏览器中使用： 去下载一个你要的 less.js 脚本；
创建一个文件来放置你的样式，比如说style.less
添加下面的代码到你的 HTML 的 <head> 中。
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
请注意“link”的“rel”属性。你需要在属性值后面使用“/less”，LESS才起作用。你也需要在“link”样式表后面引入"script"。如果你正在使用“HTML5”语法，我无法想像为什么你不会用呢？你可以少去“type=‘text/css’”和“type='text/javascript'”。 第二种就是在命令行中使用： lessc style.less style.css
然后会在项目目录生成 style.css 文件，在 html 中引入即可。如果在编译过程中出现错误，将会在命令行中提示你。 Less 是用 JavaScript 写的，所以需要额外的 Node.js 或者网页浏览器才能够运行它。你可以在你的网站中引入 less.js ，这样在真正的运行环境下它就可以自动编译，但这个过程非常缓慢，所以不建议这么使用。 推荐的方式是提前编译成 CSS 代码并且将一个正常的发展版本备份在线上。当然还有很多可视化的的程序帮助你编译 less 文件，但是在本篇文章中我们将使用 node.js。
二、基本用法 2.1 变量 Less 的一个主要功能就是可以让你像在其它高级语言中一样声明变量，这样你就可以存储你经常使用的任何类型的值 ： 颜色，尺寸，选择器，字体名称和 URL 等。less 的哲学是在可能的情况下重用CSS语法。 这里，我们声明了两个变量，一个是背景颜色，一个是文本颜色，它们都是十六进制的值。less 代码如下： @background-color: #ffffff;
@text-color: #1A237E; .box{
width: 500px;
height: 500px;
background-color: @background-color;
}
p{
color: @text-color;
} 编译后的 css 代码如下： .box {
width: 500px;
height: 500px;
background-color: #ffffff;
}
p {
color: #1A237E;
} 在上面的例子当中，背景颜色是白色，文本颜色是黑色。比方说，现在我们要切换二者的值，也就是黑色的背景和白色的文本，我们只需要修改两个变量的值就可以了，而不是手动的去修改每个值。 阅读更多有关 Less 变量的内容，请看这里。 2.2 Mixins Less 允许我们将已有的 class 和 id 的样式应用到另一个不同的选择器上。 下面这个例子可以清楚地说明这一点。 #circle{
background-color: #4CAF50;
border-radius: 100%;
} #small-circle{
width: 50px;
height: 50px;
#circle
} #big-circle{
width: 100px;
height: 100px;
#circle
} 转换成 css 代码如下： #circle {
background-color: #4CAF50;
border-radius: 100%;
}
#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: 100%;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 100%;
} 如果你不想 mixin 也以一种规则的形式出现在 CSS 代码中，那么你可以在它的后面加上括号： #circle(){
background-color: #4CAF50;
border-radius: 100%;
} #small-circle{
width: 50px;
height: 50px;
#circle
} #big-circle{
width: 100px;
height: 100px;
#circle
}
此时编译成 CSS : #small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: 100%;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 100%;
} Mixin 另一个比较酷的功能就是它支持传入参数，下面这个例子就为 circle 传入一个指定宽高的参数，默认是 25px。 这将创建一个 25×25的小圆和一个 100×100 的大圆。 #circle(@size: 25px){
background-color: #4CAF50;
border-radius: 100%; width: @size;
height: @size;
} #small-circle{
#circle
} #big-circle{
#circle(100px)
} 转换成 CSS : #small-circle {
background-color: #4CAF50;
border-radius: 100%;
width: 25px;
height: 25px;
}
#big-circle {
background-color: #4CAF50;
border-radius: 100%;
width: 100px;
height: 100px;
} 在 官方文档 了解更多关于 mixin 的知识。 2.3 嵌套 嵌套可用于以与页面的HTML结构相匹配的方式构造样式表，同时减少了冲突的机会。下面是一个无序列表的例子。 ul{
background-color: #03A9F4;
padding: 10px;
list-style: none; li{
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}
} 编译成 CSS 代码： ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}
就像在其它高级语言中一样， Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明， less 会一直往上查找，直至找到离它最近的声明。
回到 CSS 中来，我们的 li 标签将有白色的文本，如果我们在 ul 标签中声明 @text-color 规则。 @text-color: #000000; ul{
@text-color: #fff;
background-color: #03A9F4;
padding: 10px;
list-style: none; li{
color: @text-color;
border-radius: 3px;
margin: 10px 0;
}
}
编译生成的 CSS 代码如下：
ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
color: #ffffff;
border-radius: 3px;
margin: 10px 0;
} 在 这里 了解更多关于作用域的知识。
2.4 运算 你可以对数值和颜色进行基本的数学运算。比如说我们想要两个紧邻的 div 标签，第二个标签是第一个标签的两倍宽并且拥有不同的背景色。 @div-width: 100px;
@color: #03A9F4; div{
height: 50px;
display: inline-block;
} #left{
width: @div-width;
background-color: @color - 100;
} #right{
width: @div-width * 2;
background-color: @color;
}
编译成 CSS 如下： div {
height: 50px;
display: inline-block;
}
#left {
width: 100px;
background-color: #004590;
}
#right {
width: 200px;
background-color: #03a9f4;
} 2.5 函数 Less 中有函数，这让它看起来像一门编程语言了，不是吗？ 让我们来看一下 fadeout， 一个降低颜色透明度的函数。 @var: #004590; div{
height: 50px;
width: 50px;
background-color: @var; &:hover{
background-color: fadeout(@var, 50%)
}
}
编译成 CSS 如下所示：
div {
height: 50px;
width: 50px;
background-color: #004590;
}
div:hover {
background-color: rgba(0, 69, 144, 0.5);
}
通过上述代码，当我们将鼠标悬浮在 div 上时，就可以获取半透明度的动画效果，这比之前自己手动设置要简单的多了。还有很多有用的函数去操纵颜色，检测图像的大小，甚至将资源作为 data-uri 嵌入样式表，在 这里 查看这些函数的列表。 2.6 作用域（scope） 作用域是程序中的一个标准，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以调用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。 @color: #00c; /* 蓝色 */ #header {
@color: #c00; /* 红色 */
border: 1px solid @color; /* 红色边框 */
} #footer {
border: 1px solid @color; /*蓝色边框 */
}
less 的使用方法总结的更多相关文章
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
- mapreduce多文件输出的两方法
mapreduce多文件输出的两方法 package duogemap; import java.io.IOException; import org.apache.hadoop.conf ...
- 【.net 深呼吸】细说CodeDom（6）：方法参数
本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...
- IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- ArcGIS 10.0紧凑型切片读写方法
首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...
- [BOT] 一种android中实现“圆角矩形”的方法
内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
- JS 判断数据类型的三种方法
说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...
- .NET Core中间件的注册和管道的构建（3） ---- 使用Map/MapWhen扩展方法
.NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法 0x00 为什么需要Map(MapWhen)扩展 如果业务逻辑比较简单的话,一条主管道就够了,确实用不到 ...
随机推荐
- 黑马_13 Spring Boot：01.spring boot 介绍&&02.spring boot 入门
13 Spring Boot: 01.spring boot 介绍&&02.spring boot 入门 04.spring boot 配置文件 SpringBoot基础 1.1 原有 ...
- c语言中用简单方法对多维数组进行初始化
例:int array[4][3] = {1,2,3,4,5,6,7,8,9,10,11,12}; 说明:a.由4*3可知,本二维数组包含12个元素,因此初始化时array[0][0] = 1 ,ar ...
- UML-类图-构造型应用场景是什么？
1.什么是构造型? 抽象出来的标准的模型元素. 2.有哪些? 1.预定义的,如:<<destory>> 2.自定义的 3.自定义
- JavaScript详解（一）
简介: Javascript是一个脚本语言,弱类型的编程语言,简称js,被称为网站开发的行为.它的作用是增加页面特效.前后台交互以及应用于后台开发.它即可写在HTML的script标签里,也可写在外部 ...
- SEO优化技巧
一.搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果.深究其背后的故事,搜索引擎做了很多事情. 在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关 ...
- IMX6开发板虚拟机加载Ubuntu12.04.2镜像
基于迅为IMX6开发板安装好虚拟机之后,用户就可以加载 Ubuntu12.04.2 镜像.用户可以在网盘中下载“编译好的镜像”,该镜像已经安装好了编译 Android4.4.2 所需要的大部分软件.用 ...
- maven tomcat 自动部署配置
1:Tomacat 配置 /tomcat-users.xml 添加如下: <role rolename="manager-gui"/> <role rolenam ...
- set_include_path详细解释(转)
首先我们来看这个全局变量:__FILE__它表示文件的完整路径(当然包括文件名在内)也就是说它根据你文件所在的目录不同,有着不同的值:当然,当它用在包行文件中的时候,它的值是包含的路径: 然后:我们看 ...
- servlet打包成war
1.maven pom文件里指定打包类型 2.jdk工具 进入servlet目录,执行jar -cf war名 *
- IO概念和五种IO模型
一.什么是IO? 我们都知道unix世界里.一切皆文件.而文件是什么呢?文件就是一串二进制流而已.不管socket.还是FIFO.管道.终端.对我们来说.一切都是文件.一切都是流.在信息交换的过程中. ...