less之旅
在遇到less之前,一直和css交往,当less出现在我码农生涯的时候,被她给深深地吸引。从此,less成了自己码农生活里面的一房,css退居二房!那么,less到底有什么魅力让我如此迷上她呢?
less初识
Less是一门CSS预处理语言,它扩展了CSS 语言,为CSS赋予了动态语言的特性,增加了变量、Mixin、函数等特性,使CSS 更易维护和扩展。
Less可以运行在node或者浏览器端,对于初学者来说,使用第三方编辑器考拉Koala来学习less
Koala
安装Koala → 打开Koala → 面板添加CSS文件夹(先在里面创建.less文件) → 选中.less文件 → 右侧编译选项,默认自动编译 → 选中Refresh(生成相应CSS文件) → 用编辑器打开less文件,实现CSS编写 → 自动生成CSS文件
less语法
变量
在页面中,需要重复使用或者后期需要修改的样式提前出来,写成变量。该变量可是一个边框样式、内容样式、像素值……
格式:@varablename:value ;
less中声明变量使用 @ 符号,且变量不会被编译css文件中;
less文件清单:
@f_color:#ffffff; //声明一个背景颜色变量
div{
background-color:@f_color; //使用变量
}
编译后css文件清单:
div{
background-color:#ffffff;
}
说明:若后期需要修改背景颜色,直接在less中修改变量的值就可以实现,不需要去动css文件。
嵌套规则
less中可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量和给特定元素添加clss和id,使得代码看起来更加的清晰。
(1)基本用法
less文件清单:
@f_color:#ffffff; //声明一个背景颜色变量
div{
width:50px;
height:50px;
span{ //div中包含子元素span
display:inline-block;
background-color:@f_color;
}
}
编译后css文件清单:
div{
width:50px;
height:50px;
}
div span{
display:inline-block;
background-color:#ffffff;
}
(2)嵌套一个类
该类是html里面className,会在css文件中输出,若html结构中存在该类名,则该类的样式会起作用
less文件清单:
.cur{
width:50px;
height:50px;
}
.wrap{ //嵌套类
.cur;
}
编译后css文件清单:
.cur{
width:50px;
height:50px;
}
.wrap{
width:50px;
height:50px;
}
注:这里的关系比较复杂,在后面混入有详细介绍
(3)选择器继承
less中的“&”符号在嵌套规则中是指引用上层(父级)选择器,在伪类选择器和伪元素上用的比较多;
less中使用继承时,如果在声明块内书写$,尽量写在开头;
less文件清单:
div{
&:hover{ //表示div在hover的时候改变背景色
background-color:orange;
}
background-color:green;
}
编译后css文件清单:
div{
background-color:green;
}
div:hover{
background-color:orange;
}
混入Mixin
(1)直接在目标位置混入另一个类样式(无参数混入)
a>混入名称后面不加()的情况
这种情况下,cur作为一个html的类名className,即使不被调用也会被输入到css中
less文件清单:
.cur{ //cur是一个类名clssName
background-color:red;
}
div{
.cur;
}
css文件清单:
.cur{ //css文件中也输出该样式
background-color:red;
}
div{
background-color:red;
}
b>混入名称后面加上()的情况
这种情况下,定义的混入类样式,不会在css中输出,只会存在与less文件中;小括号()内可以加参数,也可以不加
less文件清单:
.cur(){ //定义不需要输出的混入类样式
background-color:red;
}
div{
.cur();
}
css文件清单:
div{
background-color:red;
}
对于混入的最佳实践:
a> 不直接使用混入已有类样式的方式,也就是第一种方式不加()的混入;
b> 先定义混入类样式,然后在需要输出的类样式中直接进行混入该样式;
c> 混入时必须加上()来表明这不是一个clssName;
(2)定义一个不输出的样式,在目标位置混入(带参数混入)
a> 这种情况下,可以给参数设置默认值,如果在后面混入类样式的时候,需要修改该参数的值,则分下面两种情况:
单个参数,可以直接写参数的值;
多个参数,如需全部重新配置,可以直接依次写参数值;如是只某个配置,必须加上变量名;
b> 混入类样式的参数分隔符使用,和;均可,但在同一项目中必须保持统一;
less文件清单:
.br(@w:2px ; @c:red){ //这里参数之间采用”;“,也可以采用“,“
border:@w solid @c;
}
div{
width:50px;
height:50px;
.br(@c:green); // 只配置了一个参数的值,其他采用默认值
}
编译后css文件清单:
div{
width:50px;
height:50px;
border:2px solid green;
}
四则运算
less针对css中数值型的value(数字、颜色、变量等)提供了可以加减乘除的四则运算功能,便于我们处理这类数值之间关系;
less文件清单:
@w:100px ;
@c:#444444;
box1{
width:@w;
height:@w /2 ;
color:@c / 2 ;
}
box2{
width:@w + 20 ;
}
css文件清单:
box1{
width:100px;
height:50px;
color:#222222;
}
box2{
width:120px;
}
特别说明:计算过程中可以不管单位,less会自动判断;另外,在颜色进行运算的时候,小心踩坑!如#4f25c7,通常不建议对颜色进行运算;
LESS大战浏览器私有前缀
这是爱上less原因之所在,以前在写css的时候,一旦用到css3中新增的属性,都要写上各大浏览器厂商的私有前缀,严重扯到项目开发的蛋!less的出现就填了这坑,以圆角为例直接上代码!
less文件清单:
.b_radius(@r:10px){ //定义一个圆角混入样式
-webkit-border-radius: @r;
-moz-border-radius: @r;
-ms-border-radius: @r;
-o-border-radius: @r;
border-radius: @r;
}
div{
.b_radius(60%); //这里我就没有带上参数名,因为一个参数,就直接上参数值
}
css文件清单:
div{
-webkit-border-radius: 60%;
-moz-border-radius: 60%;
-ms-border-radius: 60%;
-o-border-radius: 60%;
border-radius: 60%;
}
特别说明:只需在less文件中定义一次,在需要圆角属性的输出样式中直接混入该类样式即可,速度、效率那是杠杠的!
匹配模式
匹配模式?简单说就是只要满足某个样式就能调用那个样式,有点if语句的味道吧,以css画小三角为例;
less文件清单:
.triangle(right;@w:20px;@c:red){ //定义右三角样式
border:@w solid transparent;
border-left:@w solid @c;
border-style: dashed solid dashed dashed;
}
.triangle(left;@w:20px;@c:red){ //定义左三角样式
border:@w solid transparent;
border-left:@w solid @c;
border-style: dashed dashed dashed solid; //这里是为了解决IE6下出现的黑色边
}
.sanjiao{
width:;
height:;
overflow:hidden;
.triangle(right); //根据需要(画右三角形)调用上面定义的混入类样式
}
css文件清单:
.sanjiao { //画出向右的三角,因为只匹配right这个混入样式
border: 20px solid transparent;
border-left: 20px solid #ff0000;
border-style: dashed solid dashed dashed;
width:;
height:;
overflow: hidden;
}
说明:很方便吧,上面定义完混入样式,只要在需要三角形的输出样式中直接调用就能画出我们需要的三角形,是不是就完美了呢?没!没!!
匹配模式之爱我你就带上我
上面代码有个不足,就是每次我们在页面上其他部分要画三角形时,都得重新写三个小可爱:
width: 0;
height: 0;
overflow: hidden;
有没有解决办法呢?有!
在上面less文件清单中定义混入样式的时候,只要在加上下面这个样式,就完美咯!!
.triangle(@_,@w:20px;@c:red){ //注意这里的@_
width:;
height:;
overflow:hidden;
}
这时候只要在less文件清单中向下面这样调用混入样式也能达到上面的效果,看看代码,少了不少吧!!!
.sanjiao{
.triangle(right);
}
为什么呢?
@_参数,告诉我们每次在调用混入样式时,都要把具有@_参数混入样式里面的属性都带上!
@_参数是less的固定用法,记住就好!!
注:后面的参数也必须带上且与.triangle()的参数相同,要不然后果很严重!
注释
less的注释可以分为三种:
(1)标准css注释:/*shadow*/,这种注释会保留到编译后的css文件;
(2)单行注释://,这种注释只保留在less源文件中,不会出现在编译css文件中;
(3)重要注释:/*! @版权归shadow所有*/,这种注释即使css文件压缩也会保留,通常只有在声明版权的时候用,很少用;
最佳实践:在实际开发,由于后期维护在less文件上进行,因此,没有必要把全部注释输入到css文件中,常采用单行注释://
@import导入
@import 对于模块化开发来说非常有帮助!
实际开发中,通常有好几个less文件,但是产品上线的时候,都会合并为一个less文件进行编译,如:
(1)有文件rest.less/detial.less/index.less ……
(2)在index.less导入文件rest.less/detial.less,则可在index.less文件的头部:
@import “rest.less”;
@import “detial.less”;
(3)这里可以去掉文件名后缀,通常不建议这么做
注:less的函数部分在此处不做介绍,如有需要请上less官网查看,http://lesscss.cn/;
less参考资料网址:http://efe.baidu.com/blog/revisiting-css-preprocessors/;
https://github.com/ecomfe/spec/blob/master/less-code-style.md;
koala下载地址:http://koala-app.com/index-zh.html;
本文属于自己学习总结,仅供参考,希望对你的学习有用!如有不足之处,还望请你提出宝贵的意见,我将在第一时间更改!谢谢!!
less之旅的更多相关文章
- Linq之旅:Linq入门详解(Linq to Objects)
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- WCF学习之旅—第三个示例之四(三十)
上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) WCF学习之旅—第三个示例之三(二十九) ...
- 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法
若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...
- Hadoop学习之旅二:HDFS
本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...
- .NET跨平台之旅:在生产环境中上线第一个运行于Linux上的ASP.NET Core站点
2016年7月10日,我们在生产环境中上线了第一个运行于Linux上的ASP.NET Core站点,这是一个简单的提供后端服务的ASP.NET Core Web API站点. 项目是在Windows上 ...
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- WCF学习之旅—第三个示例之二(二十八)
上接WCF学习之旅—第三个示例之一(二十七) 五.在项目BookMgr.Model创建实体类数据 第一步,安装Entity Framework 1) 使用NuGet下载最新版的Entity Fram ...
- WCF学习之旅—第三个示例之三(二十九)
上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) 在上一篇文章中我们创建了实体对象与接口协定,在这一篇文章中我们来学习如何创建WCF的服务端代码.具体步骤见下面. ...
随机推荐
- 2014年10月Android面试总结
最近打算跳槽,所以到外面逛了一圈,发现外面的世界还是比较精彩的,同时也认识了自己的一些不足,以及作为一个Android开发者,自己后面需要掌握的东西做一下列举. 先介绍下本人的工作经历吧,本人11年7 ...
- 小A老师的学习法
3.13
- R软件常用命令
1.getwd() 获取默认的目录 2.> mydata <- read.csv("1.csv") 读取1.csv文件中的数据,并赋值给一个mydata的对 ...
- ZigBee 学习资源
1.雪帕的主页 http://home.cnblogs.com/u/yqh2007/ 2.刘志鹏的主页 http://www.cnblogs.com/hustlzp/archive/2011/02/1 ...
- 移动端模拟hover
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...
- Catalina.createDigester方法详细理解
这个方法主要设置(这个方法很重要,贵在理解,虽然还没学过设计模式..) 1.遇到<server>标签时创建StandardServer实例 设置StandardServer类内部的相关 ...
- ls命令显示的total你知道代表着什么吗?
今天我无意间在用ls命令的时候发现显示的内容里的total,这个total代表着什么,引起了我的疑惑. 接下来开始解开它的神秘面纱. total后面的数字是指当前目录下所有文件所占用的空间总和,它是怎 ...
- 业务ID 生成策略
业务ID 生成策略,从技术上说,基本要借助一个集中式的引擎来帮忙实现. 为了扩大业务ID生成策略的并发问题,还有更为技巧性的提升. 先来介绍普遍的分布式ID生成策略: 1. 利用DB的自增主键 这里又 ...
- JBoss Web和Tomcat的区别
在Web2.0的时代,基于Tomcat内核的JBoss在J2EE应用服务器领域已成为发展最为迅速的应用服务器.这一青出于蓝而胜于蓝的产品与Tomcat的区别又在哪里? 基于Tomcat内核,青胜于蓝. ...
- 为 Nginx 创建 windows 服务自启动
1.下载最新版的 Windows Service Wrapper 程序 下载地址:http://download.java.net/maven/2/com/sun/winsw/winsw/1.9/ 2 ...