在一定程度上,css不能被视为一个节目。虽然和其他语言,它有自己的规范。编码,但它的笨拙实在让我失望。

不喜欢css是由于不管怎么优化代码。项目大到一定程序后。都会看上去一团乱。并且有时候一个bug的定位也要花去不少时间。直到我发现了less。突然感慨。css中的jquery大概就是它了。

less同意传參数,同意定义变量,能够把层叠的样式组织得较为美观,能够少写很多反复代码……这一切的优势,让我毫不犹豫地要去把它增加接下来的项目。

举个样例:

css要这样写:

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

而less能够这样写:

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

css要这样写:

#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

而less能够这样写:

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
} #menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}

以下是学习它的一些资料:

1、less.js下载地址:http://www.lesscss.net/#download-options

2、高速 新手教程:http://www.bootcss.com/p/lesscss/

3、在ie6/7/8下使用less。须要加上es5-shim.js。下载地址:https://github.com/yumucode/es5-shim

刚在ie6下測试,使用http://localhost/test/less/会抱错,来不及查原因。而http://localhost/test/less/index.php则不会报错。比較理想的做法是不让浏览器执行less.js,而是在头版输出,把.less文件转化成.css档。

版权声明:本文博主原创文章。博客,未经同意不得转载。

什么时候css会见less的更多相关文章

  1. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  2. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  4. CSS布局学习笔记之position

    CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...

  5. CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  6. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  7. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  8. css自定义字体----使用外部字体文件

    css外部自定义字体 给大家分享一个使用的css小技巧!记得收藏呀!相信大家在浏览各种网站会见到各种奇形怪状花里胡哨的文字,还有就是一些浏览器兼容性问题,不会支持一些特殊的字体!给大家分享一个极其简单 ...

  9. html+css第九篇

    热区: <img src="img/login.gif" alt="" border="0" usemap="#Map&qu ...

随机推荐

  1. Oracle EBS-SQL (WIP-11):检查期间任务完工记录数.sql

    select        WE.WIP_ENTITY_NAME                 任务名称,        WDJ.class_code                         ...

  2. 读懂系统负载(Load Avg)的含义 | Devops

    有过运维Linux服务器的选手,想必对于系统平均负载(load averages)参数不会陌生吧,我们可以通过top, htop, uptime这些命令找到它们(如下图),那么我们又改如何理解它们呢, ...

  3. 收敛 p75

    三种收敛.中心极限定理.大数定理.delta方法

  4. aix6.1 openssh安装

    环境: IBM AIX6.1 1.下载(可以直接从附件中下载): openssl IBM官方网站下载:https://www14.software.ibm.com/webapp/iwm/web/reg ...

  5. javaEE servlet获取jsp内置对象

    既然jsp和servlet是等价的,在jsp中能够使用内置对象,那么在servlet中也能够使用. 1.获得out对象 能够使用例如以下代码获得out对象: import java.io.PrintW ...

  6. android httpClient 支持HTTPS的访问方式

    项目中Android https请求地址遇到了这个异常,javax.net.ssl.SSLPeerUnverifiedException: No peer certificate,是SSL协议中没有终 ...

  7. SharePoint 2013 WebPart属性面板配置

    为WebPart添加右侧的属性面板,方便将来对于WebPart的配置,我们只需要在CustomWebPart.cs文件里面,声明一下变量即可: private string url = string. ...

  8. 关于Condition Variable的一些思考

    可能大家都使用过condition variable(之后称cv),一些博客也对cv做了介绍,但是有的说的不完全正确,甚至有误导使用者的倾向,其实最合理的使用方式是查阅文档, 如果你英语还ok的话,h ...

  9. PHP搭建简单暴力的mvc

    对于一个web系统来说,我们使用mvc很必要, 给我们带来的是清晰的结构,易运维,易扩展, mvc 我对其的理解应该叫mxvc, 多了一个x , 这个x代表什么,x可以理解为 relay,proxy, ...

  10. JVM学习之GC常用算法

    出处:博客园左潇龙的技术博客--http://www.cnblogs.com/zuoxiaolong,多谢分享 GC策略解决了哪些问题? 既然是要进行自动GC,那必然会有相应的策略,而这些策略解决了哪 ...