自己的一个LESS工具函数库
自己大概在一年前开始使用LESS编写样式,现在感觉不用LESS都不会写样式了。现在写静态页面完全离不开LESS与Zen Coding,我可以不用什么IDE,但这两个工具却必须要,当然也强烈推荐看到这篇文章的朋友去试试LESS与Zen Coding(Zen Coding现在改名叫Emmet)。
在使用LESS的过程中,自己慢慢积累了一些常用的LESS函数,经过自己的实践,感觉还是很不错,会让你少写很多的css hack,这也就少了很多的粘贴,复制。效率能提高不少。下图是helper.less的代码结构:
//这是compat命名空间下的所有方法
#compat {
.mixin (@type) when (@type = clearfix) {
*zoom: 1;
&:before,
&:after {
content: "\20";
display: table;
line-height: 0;
}
&:after {
clear: both;
}
} .mixin(@type) when (@type = inline-block) {
display:inline-block;;
*display:inline;
*zoom:1;
} .mixin(@type, @v) when(@type = opacity) {
@msv: unit(percentage(@v));
opacity: @v;
filter:alpha(opacity=@msv);
} .mixin(@type) when (@type = opacity) {
@v: 0.5;
@msv: unit(percentage(@v));
opacity: @v;
filter:alpha(opacity=@msv);
} .mixin(@type, @color, @alpha) when (@type = rgba-bgc) {
@r: red(@color);
@g: green(@color);
@b: blue(@color); @color2: rgba(@r, @g, @b, @alpha);
@ie: argb(@color2); background-color: rgba(@r, @g, @b, @alpha);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=@ie,EndColorStr=@ie);
} .mixin(@type, @color, @alpha) when(@type = rgba-bdc) {
@r: red(@color);
@g: green(@color);
@b: blue(@color); border-color: rgba(@r, @g, @b, @alpha);
} .mixin(@type) when(@type = hide-text) {
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
} .mixin(@type) when(@type = wto) {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
} .mixin(@type, @fontName, @fontFileURL) when (@type = font-family) {
@font-face {
font-family: "@{fontName}";
src: url("@{fontFileURL}.eot"); /* IE9 Compat Modes */
src: url('@{fontFileURL}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("@{fontFileURL}.woff") format('woff'), /* Modern Browsers */
url("@{fontFileURL}.ttf") format('truetype'), /* Safari, Android, iOS */
url("@{fontFileURL}.svg#YourWebFontName") format('svg'); /* Legacy iOS */
}
}
}
下面是我们的具体Demo例子:
//导入函数库
@import "helper"; //导入配置
@import "config"; //demo1: 定义一个常用的.clearfix
.clearfix {
#compat > .mixin(clearfix);
} //demo2: 定义自己的字体(使用font-icon)
#compat > .mixin(font-family, myFontFamily, 'http://l.com/font/myFontFamily'); //demo3: 定义自己的字体,但参数通过config.less配置
#compat > .mixin(font-family, @fontFamilyName, @fontFileURL); //demo4: 一步搞定颜色十六进制到rgba的转换
.rgbaTest {
#compat > .mixin(rgba-bgc, #000, 0.27);
} //demo5: 常用的opacity
.opcity27 {
#compat > .mixin(opacity, .27);
} //下面是编译后生成的css
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "\20";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
@font-face {
font-family: "myFontFamily";
src: url("http://l.com/font/myFontFamily.eot");
src: url('http://l.com/font/myFontFamily.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("http://l.com/font/myFontFamily.woff") format('woff'), /* Modern Browsers */
url("http://l.com/font/myFontFamily.ttf") format('truetype'), /* Safari, Android, iOS */
url("http://l.com/font/myFontFamily.svg#YourWebFontName") format('svg');/* IE9 Compat Modes */
/* Legacy iOS */
}
@font-face {
font-family: "lessTest";
src: url("http://www.jagus720.com/font/fontTest.eot");
src: url('http://www.jagus720.com/font/fontTest.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("http://www.jagus720.com/font/fontTest.woff") format('woff'), /* Modern Browsers */
url("http://www.jagus720.com/font/fontTest.ttf") format('truetype'), /* Safari, Android, iOS */
url("http://www.jagus720.com/font/fontTest.svg#YourWebFontName") format('svg');/* IE9 Compat Modes */
/* Legacy iOS */
}
.rgbaTest {
background-color: rgba(0, 0, 0, 0.27);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#45000000, EndColorStr=#45000000);
}
.opcity27 {
opacity: 0.27;
filter: alpha(opacity=27);
}
写在最后,使用这样的一个LESS工具库的好处:
1. 由于这些工具方法都是函数,所以在编程中函数有什么优点,他都有,在一些IDE中(如IDEA)甚至会给出相应的提示
2. 使用类似的工具库后,我们编写的LESS原文件,代码更优雅,更好阅读,更容易维护
3. LESS的编译可以使用Koala(请Google或Baidu之)或grunt的相应插件
当然,这个helper.less本身写的还是很一般,如里面的percentage模块就很不好,但也没想到更好的方法。大家如果有什么建议,请留言,非常感觉!
自己的一个LESS工具函数库的更多相关文章
- 如何持续集成/交付一个开源.NET函数库到Nuget.org
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:这是一个简单的入门向导,涉及到GitHub.AppVeyor和Nuget.org. 最 ...
- 封装一个Ajax工具函数
/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type string 请求的方式 默认是get * 2. url ...
- 从零开始学习jQuery (九) jQuery工具函数
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 我们经常要使用脚本处理各种业务逻辑, 最常见的就 ...
- labview从入门到出家5(进阶篇)--程序调试以及labview函数库的运用
跟了前面几章的操作流程,相信大家对labview有了一定的认识.其实只要了解了labview的编程思路,再熟悉地运用各个变量,函数以及属性,那么我们就可以打开labview的大门了.跟其他编程语言一样 ...
- 为开发者准备的 Android 函数库(2016 年版)
转载:http://www.androidchina.net/5922.html第三方函数库(译者注:包括第三方提供的 SDK,开源函数库)以惊人的方式助力着 Android 开发,借助这些其他开发人 ...
- 开发常用的 Android 函数库
第三方函数库(译者注:包括第三方提供的 SDK,开源函数库)以惊人的方式助力着 Android 开发,借助这些其他开发人员辛勤工作的成果,我们开发起来更轻松和快捷.目前存在成千上万的函数库,如何选择正 ...
- linux 函数库使用
程序函数库可分为3种类型:静态函 数库(static libraries).共享函数库(shared libraries)和动态加载函数库(dynamically loaded libraries) ...
- Android 为开发者准备的最佳 Android 函数库(2016 年版)
本文是翻译自 CloudRAIL 的官方博客(https://cloudrail.com/best-android-libraries-for-developers/),本文中分享的 Android ...
- [js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)
所谓字符串工具库就是利用javascript面向对象的知识封装一个常用的字符串处理方法库,首先给这个库起个名字,好吧就叫ghostwu.js. 看下ghostwu.js的整体架构: ; (functi ...
随机推荐
- web.xml中servlet初始化参数的设置
<context-param><param-name>param1</param-name><param-value>value1</param- ...
- iOS开发--CoreGraphics简单绘图
一.导入coreGraphics.framework 二.绘制图形 1.绘制矩形 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 绘制矩形 - (v ...
- iOS iPhone iPad 各种控件默认高度
iPhone iPad 各种控件默认高度 注意:这些是ios7之前的,ios7之后(包括ios7)有改动,我会在后面标注出来 iPhone和iPad下各种常见控件的宽度和标准是一样的,所以这里就用iP ...
- CentOS单用户模式下修改ROOT密码和grub加密
Linux 系统处于正常状态时,服务器主机开机(或重新启动)后,能够由系统引导器程序自动引导 Linux 系统启动到多用户模式,并提供正常的网络服务.如果系统管理员需要进行系统维护或系统出现启动异常时 ...
- PowerDesiger 15逆向生成工程E-R图及导出word表格
应用环境:win8(64位)+oracle10g(32位)服务端+PowerDesigner15 需求:oracle数据库中的表结构是web工程框架hibernate 自动生成,现需要将数据库中已有的 ...
- 第一个Struts2程序
Struts2.3.16, Tomcat6.0.37,Java8 /web.xml <?xml version="1.0" encoding="UTF-8" ...
- java读取某个文件夹下的所有文件
import java.io.FileNotFoundException;import java.io.IOException;import java.io.File; public class Re ...
- UVA 11019 Matrix Matcher(ac自动机)
题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- Setup Entity Framework Environment
http://www.entityframeworktutorial.net/EntityFramework5/setup-entityframework-environment.aspx Entit ...
- leetcode:Delete Node in a Linked List
Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...