1、Less前言
关注less很久了,整理和查看了很多相关的资料,此篇作为less相关的开篇,希望在后期的一些项目里面开始实施起来,但是很多人觉得维护成本比较高,如果对应人员没有相关的知识积累,所有决定写一篇,以后也算less应用项目的一个捆绑资料交接一下。
2、Less是what?
--------- 动态样式语言
- 其实就是将css变得可以使用动态语言的特性,如变量、继承、运算、函数。
- less可以应用在客户端也可以应用在服务端(借助一些如Node.js这样的工具)
3、Less快速适用
- 如果你本地或者像看源码的话,需要下载一个依赖脚本文件:less.js
下载地址:http://code.google.com/p/lesscss/downloads/list
- 如果你直接连在线的地址可以在html页面的head标签里面增加如下代码:
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
- 当然我们还需要引入一个我们写less的文件,以.less为文件的后缀
我们就在上面步骤中的<script>标签的上面增加如下的代码
<!-- 方式和css的导入是一样的 -->
<link rel="stylesheet/less" href="style.less" type="text/css" />
注意一下rel的值:stylesheet/less
这边我来贴一些源码,看看为什么必须要按照这样的规则来:
var links = document.getElementsByTagName('link');
var typePattern = /^text/(x-)?less$/;
less.sheets = [];
for(var i=0;i<links.length;i++){
if(links[i].rel === 'stylesheet/less' || (links[i].rel.match(/stylesheet/)
&& (links[i].type.match(typePattern))) ){
less.sheets.push(links[i]);
}
}
允许我们定义一些比较通用的样式规则
/*less code*/
@width:960px;
.header{
width:@width;
}
.footer{
width:@width;
}
/*css code*/
.header{
width:960px;
}
.footer{
width:960px;
}
其实我们可以发现:less中的变量只能被定义一次,前面定义的会被后面覆盖。
/*我同时定义@h*/
@h:30px;
@h:100px;
.header{
height:@h;
}
/*输出的css*/
.header{
height:100px;
}
同时在less中,也有类似于php语言中变量的变量的概念。
//当然变量能够参与计算
@base-h:50px;
@height1:@base-h+100px;
@height2:@base-h+200px;
.header{
height:@height2;
}
/*转换的css*/
.header{
height:250px;
}
//或者可以这样写---但是好像不能做计算
@base-h:50px;
@height1:"base-h";
.header{
height:@@height1; //注意是两个@@
}
------ 参数可以定义默认值,也可以不定义
/*可以带参数*/
.radius(@radius:3px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
.header{
.radius;
}
.footer{
.radius(5px);
}
/*转成的css*/
.header{
border-radius:3px
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.footer{
border-radius:5px
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
这里面还有一个(类似于数组的)@arguments 变量
.box-shadow(@x:2px,@y:2px,@blur:1px,@color:#000){
box-shadow:@arguments;
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
}
.header{
.box-shadow(4px;3px;1px;#fefefe);
}
/*转换后的*/
.header{
box-shadow:4px;3px;1px;#fefefe;
-moz-box-shadow:4px;3px;1px;#fefefe;
-webkit-box-shadow:4px;3px;1px;#fefefe;
}
分享到:
相关推荐
概括了Weightless-P协议的协议部分技术特点,参照Weightless协议进行研究的好材料,为物联网发展提供参考标准,并且区别于LoRa,、Zigbee技术等规范,适合读不懂英文材料的科研研究
在这篇文章中,我们研究发现,仅在缓存传输路径上的一些节点中进行缓存,可以更好的提高缓存命中率。
INFaaS: Automated Model-less Inference Serving是一篇21年的文章,引用量145,算是一篇比较有影响力的文章。INFaaS主要解决推理服务系统的两个问题:易用性和成本效益。以往的推理服务系统需要开发人员手动调模型...
一种使用较少内存的Android应用程序增量更新方法,李锦峰,戚琦,随着智能手机的普及,移动应用成为了互联网时代中不可或缺的部分。然而,APP的版本更迭加快以及安装文件的越来越庞大,导致用户的
WebProject This is a study project of node,less,gulp and so on. 这个项目将以node js写后端,将用less写样式,运用gulp工具构建项目。
随着科学技术的发展,人们...传输等方面取得了显著的进步,开发出了更多的数字图像和视频系统"衡量这些系统中图像质量的优劣成为评价这些系统在处理和传输等方面性能的重要指标"因此图像质量评价方法的研究一直倍受关注
低功耗,低噪声,160×12017μm像素间距TEC-Less非冷却红外图像传感器
自己做的一个响应式网站 大家可以下载研究 这个网站没有用到其他框架 都是一个一步一步写 的 详情可以到我的博客上查看
对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同...
Steering Symbolic Execution to Less Traveled Paths
首先介绍了无线局域网面临的安全问题 ,并对无线局域网的安全...介绍了国内外 Wire-less-LAN安全认证机制的研究现状 ,在此基础上详细分析了基于 EAP的无线网络安全认证方法 ;最后对几种主要的认证方法进行了分析比较。
作为基于移动计算范型迁移工作流研究的继续,在无线迁移工作流按需移动中建立工作流单元在停靠站服务器中的存储模型和方法,在移动设备主动或被动地处于断接,即没有网络连接的状态下,有效利用缓存中的工作流单元,以...
在协变手性有效场理论中,具有... 这验证了在研究相关散射长度时使用D * -less的单环电势。 我们搜索动态生成的开状态,其中JP = 0 +作为各种Riemann图纸上S-矩阵的极点。 还显示了随变子质量而变化的那些极的轨迹。
本仓库是本人自己总结的web前端开发相关的知识点和技术,同时也是自己平时工作中的总结,因为项目创建的时间较早,可能有些demo中用到的技术存在一些bug ,如果有同学发现可以issue提交pr ,方便服务到后面的伙伴。...
基于DAD-Less机制的分层移动IPv6快速切换算法
在P2P领域有许多关于协议、健壮性和P2P文件共享网络的内容有效性等的研究,但是很少有(直到去年)关于从类似IRC和HTTP等使用明文协议中心命令控制机制转移到分布式命令控制机制的研究,而僵尸网路转变为了分布式的...
Burden distribution control based on adaptive genetic algorithm in bell-less blast furnace
Analysis of the Retention Characteristic in Three dimensional Junction-less Charge Trapping Memory
Chip-area-efficient capacitor-less LDO regulator with fast-transient response
principle of I2C Bus and its Application in IC design,李一凡,莫霏,Compared with the parallel bus,I2C bus do require less wiring, fewer IC connection pins, and the less number of traces required on ...