less 能加快css编写?
真心不知道用了less之后,怎么能让css写的更快。有时你定义了变量还得回到开头去看看。关键是定义的变量在css不停的修改中会变得没什么用。
用了之后没觉得会加快,感觉让我更加郁闷,求各位大神指点指点,是不是我在哪个地方错了。
比如:
@color:#ccc;
.border(@color:#ccc){
border:1px solid @color;
}
.div1{
color:@color;
.border(red);
}
.div2{
color:@color;
.border(blue);
}
忽然觉得这个div2字体颜色可能不太适合要换,然后通过四则运算color:@color + 33333(晕这个加起来是什么我也不知道。。),然后div2的border-bottom要没有边框,改div2
.div2{
color:@color+333333;
border-top:1px solid blue;
border-left:1px solid blue;
border-right:1px solid blue;
}
总感觉css要经常变来变去所以是没办法定义一些框框去限定它。就算把整体的框架都布局好,在细节方面还是要经常修改。我用了less改一个已经写完的css(其中一部分),但是没发现效率高在哪里,看着完整的css改也没感觉快到哪里去,更别说在开发过程中了。唯一能让我觉得有用的地方就是嵌套了,其他方面真没有体验到。
原来的css:
*html {
background-image: url(about:blank);
background-attachment: fixed;
} body {
margin:;
padding:;
background: #F6E8CB;
font-size: 12px;
height: 1200px;
} ul {
list-style: none;
margin:;
padding:;
} span {
margin:;
padding:;
}
.selectSlide {
width: 160px;
padding: 0 10px 10px 10px;
} .selectSlide span {
display: inline-block;
line-height: 20px;
} .selectSlide span a {
color: #888;
text-decoration: none;
} .selectSlide span a:hover {
text-decoration: underline;
} .hide {
display: none;
} .topmenu {
width: 70px;
float: right;
height: 30px;
line-height: 30px;
} .topmenu span {
width: 14px;
height: 30px;
display: inline-block;
cursor: pointer;
background: url(../img/topmenu.jpg) no-repeat;
} .topmenu .span1 {
background-position: -5px -32px;
} .topmenu .span1on {
background-position: -5px 2px;
} .topmenu .span2 {
background-position: -28px -32px;
} .topmenu .span2on {
background-position: -28px 2px;
}
用less 来做修改:
*html {
background-image: url(about:blank);
background-attachment: fixed;
} .init_mp(@mp:0) {
margin: @mp;
padding: @mp;
} .init_wh(@width:0,@height:0) {
width: @width;
height: @height;
} .init_position(@position:0px 0px) {
background-position: @position;
} body {
.init_mp(0);
background: #F6E8CB;
font-size: 12px;
height: 1200px;
} ul {
list-style: none;
.init_mp(0);
}
span {
.init_mp(0);
}
.selectSlide {
width: 160px;
padding: 0 10px 10px 10px;
span {
display: inline-block;
line-height: 20px;
a {
color: #888;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
} .hide {
display: none;
} .topmenu {
float: right;
.init_wh(30px,70px);
line-height: 30px;
span {
.init_wh(14px,30px);
display: inline-block;
cursor: pointer;
background: url(../img/topmenu.jpg) no-repeat;
}
.span1 {
.init_position(-5px -32px);
}
.span1on {
.init_position(-5px 2px);
}
.span2 {
.init_position(-28px -32px);
}
.span2on {
.init_position(-28px 2px);
}
}
真心希望是我把这个东西用错了,各位大神给点意见吧。
less 能加快css编写?的更多相关文章
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- css编写注意事项(不定时更新)
CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...
- 个人css编写规范
前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...
- CSS编写指导规范和建议
在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
- css编写规范最佳实践
最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...
- 用CSS编写多种常见的图形
用CSS编写多种常见的图形 正方形与长方形 这个是最简单的,直接上代码 <!DOCTYPE html> <html> <head> <title>< ...
- CSS编写技巧
1.尽量少的使用全局的重置代码 全局重置代码:*{margin:0; padding:0;}对于熟悉CSS的人来说并不陌生,并且有很多人的第一句CSS代码就是这句.它可以避免不同浏览器的默认间距不同而 ...
- css编写规范
一.注释规范 1.文件顶部注释(推荐使用) /* * @description: 中文说明 * @author: name * @update: name (2013-04-13 18:32) */ ...
- (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
随机推荐
- oracle中的decode的使用
含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN R ...
- php入门之表单创建和基本处理
为了方便后面学习数组,这里引入了过渡章节就是表单,至于为什么,等真的学习到数组的时候你就会发现它的妙处拉. ============================================== ...
- 关于B/S系统中文件上传的大小限制怎么做
1.前端:采用flash控件或者Html5的特性(有浏览器版本要求)来判断文件大小.纯html或js是没法判断用户上传文件大小的. 2.nginx:服务器端的第一道防线,一般会有对上传文件做大小限制. ...
- Spark Streaming揭秘 Day9 从Receiver的设计到Spark框架的扩展
Spark Streaming揭秘 Day9 从Receiver的设计到Spark框架的扩展 Receiver是SparkStreaming的输入数据来源,从对Receiver整个生命周期的设计,我们 ...
- Oracle访问数据的存取方法
1) 全表扫描(Full Table Scans, FTS) 为实现全表扫描,Oracle读取表中所有的行,并检查每一行是否满足语句的WHERE限制条件.Oracle顺序地读取分配给表的每个数据块,直 ...
- WinForm调试输出数据
在调试Winfrom时想知道其中的数据输出 1.单击运行按钮 2.选择调试->窗口->输出 3.单击Winform中要执行的按钮 在输出栏中显示输出数据 4.Ctrl K S 能够 ...
- 从JAVA多线程理解到集群分布式和网络设计的浅析
对于JAVA多线程的应用非常广泛,现在的系统没有多线程几乎什么也做不了,很多时候我们在何种场合如何应用多线程成为一种首先需要选择的问题,另外关于java多线程的知识也是非常的多,本文中先介绍和说明一些 ...
- (转载)Cocos2dx-OpenGL ES2.0教程:初识MVP(3)
在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix.它其实是一个uniform,每一个cocos2d-x预定义的shader都包含有这个uniform, 但是 ...
- 【BZOJ 2301】[HAOI2011]Problem b
Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. Input 第一行一个整数 ...
- python学习笔记7(使用字符串)
一.字符串格式化,在%左侧放置一个字符串,右侧放置希望格式化的值. >>> format = 'Hello,%s,%s enough for ya?' >>> va ...