喝咖啡写脚本,顺便再加一点点CSS语法糖 2.五分钟学会Less
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 class, id 或者 元素 属性集都可以以同样的方式引入。
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的更多相关文章
- 喝咖啡写脚本,顺便再加一点点CSS语法糖 1.选择环境
经过对前端开发的初步了解,大体上发现了以下几点,前端开发需要使用脚本语言,主要是JavaScript,需要Html,需要CSS,这些东西相信很多人已经很熟了.但是仅仅只是学习一点简单的JS,配合Htm ...
- 写完批处理脚本,再写个Gradle脚本,解放双手
前言 上一篇写个批处理来帮忙干活---遍历&字符串处理中,我们已经学习如何写批处理脚本来帮我们做一些简单的重复性工作,本篇继续来学习如何用 Gradle 写脚本,让它也来帮我们干活 Gradl ...
- LoadRunner手写脚本、检查点、集合点、事务、思考时间
手写脚本 什么时候要手写? 可以有条件手写脚本的场景有两类: 有接口说明文档 没有借口说明文档,要去录制,录制不了,抓包手写 所需函数 我们这里讲的例子是基于 http 协议的,也是常见的两种请求类型 ...
- 【hadoop】如何向map和reduce脚本传递参数,加载文件和目录
本文主要讲解三个问题: 1 使用Java编写MapReduce程序时,如何向map.reduce函数传递参数. 2 使用Streaming编写MapReduce程序(C/C++ ...
- 十分钟学会写shell脚本
大家好!我是handsomecui,下面我为大家讲解一下shell脚本的写法,讲的不好的地方,欢迎大家留言拍砖. 1.在linux下会写shell脚本是非常重要的,下面我参照例子给大家展示几个脚本,顺 ...
- 如何向map和reduce脚本传递参数,加载文件和目录
本文主要讲解三个问题: 1 使用Java编写MapReduce程序时,如何向map.reduce函数传递参数. 2 使用Streaming编写MapReduce程序(C/C++ ...
- javascript脚本的延时加载
javascript脚本的延时加载 向HTML页面中插入js代码的主要方法是使用<script>标签,在实际的开发中多采用外部文件的方式,主要考虑到外部js代码的可维护性及可缓存性等优点. ...
- base64文件隐写脚本
base64文件隐写脚本 base64 可以在文件中隐藏信息,记录一下提取脚本 ''' base64文件隐写脚本 import re import base64 b64chars = 'ABCDEFG ...
- CTF写脚本
今天总结一下CTF如何写脚本快速得分....(比较菜,能力有限,大佬勿喷) 所谓的写脚本得分,就是利用了 python爬虫的思想,如果之前没有听说过的话,可以去爬虫的相关语法.如果是看网上的视频的话, ...
随机推荐
- kafka常用的操作命令
1.kafka启动命令 nohup bin/kafka-server-start.sh config/server.properties & 2.创建topic bin/kafka-topic ...
- C++类所占内存大小计算
C++类所占内存大小计算 说明:笔者的操作系统是32位的. class A {}; sizeof( A ) = ? sizeof( A ) = 1明明是空类,为什么编译器说它是1呢? 空类同样可以实例 ...
- CS193P学习笔记(一)
1>iOS系统分层 1.Core OS 核心操作系统层,很接近硬件的一层: 本质是一个Unix内核,使用基于BSD的Unix版本,拥有文件系统.套接字.权限等一系列Unix所具有的特性,并且 ...
- Andorid 内存溢出与内存泄露,几种常见导致内存泄露的写法
内存泄露,大部分是因为程序的逻辑不严谨,但是又可以跑通顺,然后导致的,内存溢出不会报错,如果不看日志信息是并不知道有泄露的.但是如果一直泄露,然后最终导致的内存溢出,仍然会使程序挂掉.内存溢出大部分是 ...
- 如何判断两个String是否是Anagrams_java实现
Anagrams:是颠倒字母顺序的字符串 本文提供三个方法,分别分析时间空间复杂度 方法一:暴力遍历 时间复杂度:O(n^2) 方法二:基于排序算法,Sorting的时间复杂度是O(n*log(n)) ...
- 关于TouchEvent里面的touches,targetTouches,changedTouches的解释
touches:手指触摸到屏幕上引起的当前所有触摸点的集合; targetTouches:手指触摸到绑定事件的节点上的触摸点的集合; changedTouches:触摸事件时改变触摸点的集合; 以下 ...
- JAVASE笔记回顾
第一部分,JAVA基础和面向对象 part01 入门与开发环境搭建 1: 计算机基础知识(了解)(1)计算机(2)计算机硬件(3)计算机软件系统软件:windows,linux,mac应用软件:QQ, ...
- notepad++下的字体设置
设置 - 语言格式设置 中
- ZOJ 3659 & HDU 4424 Conquer a New Region (并查集)
这题要用到一点贪心的思想,因为一个点到另一个点的运载能力决定于其间的边的最小权值,所以先把线段按权值从大到小排个序,每次加的边都比以前小,然后合并集合时,比较 x = findset(a) 做根或 y ...
- IO流的练习4 —— 键盘录入学生成绩信息,进行排序后存入文本中
需求: 键盘录入5个学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分从高到低存入文本文件 分析: A:创建学生类 B:创建集合对象 TreeSet<Student> C:键盘录入学 ...