CoffeeScript + Html5 + Less这个新组合,看上去Less更容易拿下,先尝尝糖吧.

Less这么小个东西,竟然要翻墙,真是没有天理,简直不可理喻,先不管那么多了,那就看这个吧.http://www.lesscss.net/

这个Less,比起CSS,就是要更少的代码,更多的动态,更多的重用.提供了变量,继承,运算,函数等,我们就来看看吧.

首先是这玩意最后怎么生成CSS, 两种用法,我们先用一秒钟选择最容易的,就是网站提供的生成CSS功能.学了就可以使用了.然后当然也可以在RunJS里直接写.环境问题解决了,来看看语法吧.

1.变量: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?

其实就是定义一个常量  @car : 值;   使用的时候 @var  这个很象Sql的变量定义.

2.混合: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?

其实就是在CSS里再引入另一CSS的名称,如下:

@fontColor: red;

.h2 {
font-size: 22px;
} div {
color:@fontColor;
.h2
}

真是简单啊.任何 CSS classid 或者 元素 属性集都可以以同样的方式引入。

3.带混合的参数: 就是混合的定义里可以加参数 .h2(@变量名[: 默认值]),还可以用...表示多个参数.如下:

.h2(@size: 12px) {
font-size: @size;
} div {
color:@fontColor;
.h2(22px)
}

Pattern-matching and Guard expressions 比较多,就是条件判断后再混合.先略过

4.嵌套: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?

就是CSS里再定义CSS,如下:

#header        { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}

&这个符号还有更多的用法,先略过.

5.运算: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?

任何数字、颜色或者变量都可以参与运算,如border: (@width * 2) solid black;

6.函数: LESS 提供了多种函数用于控制颜色变化、处理字符串、算术运算等等。

7.名字空间: 为了更好的组织的封装, 引入的时候用 > 号. 空间名称 > 样式名称,如:

#header a {
color: orange;
#bundle > .button;
}

8.作用域: 如变量定义等,类似JS

9.注释: 除了/**/注释, 也可以用//注释,但生成后自动过滤掉,很奇怪的是当初定义CSS时,为什么不支持//这样的注释呢?

10.导入: Importing如:

@import "lib.less";
@import "lib";
@import "lib.css";

11.字符串插值: 可以把变量插到字符串里.@{val},如:background-image: url("@{base-url}/images/bg.png");

12.避免编译: ~"XXX", 这样XXX内容将原样输出成CSS

13.选择插值: @{val}这样的变量还可以用地选择器名称上,如: .@{name} {color:black;}

14.JavaScript evaluation: 反向使用JS, 作者不建议使用.

然后呢?然后就没有了.Less就是这么少,除掉不建议使用的第14条,及略过的复杂部分,总共就十几条规则,大约5分钟就可以学完了,当然我边学边写花的时间比5分钟要多,还有更多的就是Less里的函数了,不过以直觉来看,这些函数用不用都成,大多都是和颜色相关的.

喝咖啡写脚本,顺便再加一点点CSS语法糖 2.五分钟学会Less的更多相关文章

  1. 喝咖啡写脚本,顺便再加一点点CSS语法糖 1.选择环境

    经过对前端开发的初步了解,大体上发现了以下几点,前端开发需要使用脚本语言,主要是JavaScript,需要Html,需要CSS,这些东西相信很多人已经很熟了.但是仅仅只是学习一点简单的JS,配合Htm ...

  2. 写完批处理脚本,再写个Gradle脚本,解放双手

    前言 上一篇写个批处理来帮忙干活---遍历&字符串处理中,我们已经学习如何写批处理脚本来帮我们做一些简单的重复性工作,本篇继续来学习如何用 Gradle 写脚本,让它也来帮我们干活 Gradl ...

  3. LoadRunner手写脚本、检查点、集合点、事务、思考时间

    手写脚本 什么时候要手写? 可以有条件手写脚本的场景有两类: 有接口说明文档 没有借口说明文档,要去录制,录制不了,抓包手写 所需函数 我们这里讲的例子是基于 http 协议的,也是常见的两种请求类型 ...

  4. 【hadoop】如何向map和reduce脚本传递参数,加载文件和目录

    本文主要讲解三个问题:       1 使用Java编写MapReduce程序时,如何向map.reduce函数传递参数.       2 使用Streaming编写MapReduce程序(C/C++ ...

  5. 十分钟学会写shell脚本

    大家好!我是handsomecui,下面我为大家讲解一下shell脚本的写法,讲的不好的地方,欢迎大家留言拍砖. 1.在linux下会写shell脚本是非常重要的,下面我参照例子给大家展示几个脚本,顺 ...

  6. 如何向map和reduce脚本传递参数,加载文件和目录

    本文主要讲解三个问题:       1 使用Java编写MapReduce程序时,如何向map.reduce函数传递参数.       2 使用Streaming编写MapReduce程序(C/C++ ...

  7. javascript脚本的延时加载

    javascript脚本的延时加载 向HTML页面中插入js代码的主要方法是使用<script>标签,在实际的开发中多采用外部文件的方式,主要考虑到外部js代码的可维护性及可缓存性等优点. ...

  8. base64文件隐写脚本

    base64文件隐写脚本 base64 可以在文件中隐藏信息,记录一下提取脚本 ''' base64文件隐写脚本 import re import base64 b64chars = 'ABCDEFG ...

  9. CTF写脚本

    今天总结一下CTF如何写脚本快速得分....(比较菜,能力有限,大佬勿喷) 所谓的写脚本得分,就是利用了 python爬虫的思想,如果之前没有听说过的话,可以去爬虫的相关语法.如果是看网上的视频的话, ...

随机推荐

  1. kafka常用的操作命令

    1.kafka启动命令 nohup bin/kafka-server-start.sh config/server.properties & 2.创建topic bin/kafka-topic ...

  2. C++类所占内存大小计算

    C++类所占内存大小计算 说明:笔者的操作系统是32位的. class A {}; sizeof( A ) = ? sizeof( A ) = 1明明是空类,为什么编译器说它是1呢? 空类同样可以实例 ...

  3. CS193P学习笔记(一)

    1>iOS系统分层   1.Core OS 核心操作系统层,很接近硬件的一层: 本质是一个Unix内核,使用基于BSD的Unix版本,拥有文件系统.套接字.权限等一系列Unix所具有的特性,并且 ...

  4. Andorid 内存溢出与内存泄露,几种常见导致内存泄露的写法

    内存泄露,大部分是因为程序的逻辑不严谨,但是又可以跑通顺,然后导致的,内存溢出不会报错,如果不看日志信息是并不知道有泄露的.但是如果一直泄露,然后最终导致的内存溢出,仍然会使程序挂掉.内存溢出大部分是 ...

  5. 如何判断两个String是否是Anagrams_java实现

    Anagrams:是颠倒字母顺序的字符串 本文提供三个方法,分别分析时间空间复杂度 方法一:暴力遍历 时间复杂度:O(n^2) 方法二:基于排序算法,Sorting的时间复杂度是O(n*log(n)) ...

  6. 关于TouchEvent里面的touches,targetTouches,changedTouches的解释

    touches:手指触摸到屏幕上引起的当前所有触摸点的集合; targetTouches:手指触摸到绑定事件的节点上的触摸点的集合; changedTouches:触摸事件时改变触摸点的集合;  以下 ...

  7. JAVASE笔记回顾

    第一部分,JAVA基础和面向对象 part01 入门与开发环境搭建 1: 计算机基础知识(了解)(1)计算机(2)计算机硬件(3)计算机软件系统软件:windows,linux,mac应用软件:QQ, ...

  8. notepad++下的字体设置

    设置 - 语言格式设置 中

  9. ZOJ 3659 & HDU 4424 Conquer a New Region (并查集)

    这题要用到一点贪心的思想,因为一个点到另一个点的运载能力决定于其间的边的最小权值,所以先把线段按权值从大到小排个序,每次加的边都比以前小,然后合并集合时,比较 x = findset(a) 做根或 y ...

  10. IO流的练习4 —— 键盘录入学生成绩信息,进行排序后存入文本中

    需求: 键盘录入5个学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分从高到低存入文本文件 分析: A:创建学生类 B:创建集合对象 TreeSet<Student> C:键盘录入学 ...