【LESS系列】高级特性
前面我已经有一篇文章是写 LESS 的基础语法的。
那么这一次我们来看一下 LESS 的高级特性。
说起高级特性,首先也必须要一提的是模式匹配。
虽然个人觉得模式匹配的实用度其实也是一般般,但在关键时候,有它们在的话,还是能够让我们开发得更得心应手的。
其实传参设置默认值,就是一个最简单的模式匹配。
你调用 Mixins 函数,传入参数,和不传入参数,可能会出现不同的编译结果。
OK了,还是上主菜吧,下面列出了几项 LESS 的高级特性。
按照先前的惯例,LESS CODE 和 CSS CODE 分别是编译前跟编译后的代码。
1.用不同参数个数来匹配不同的 Mixins
- /* LESS CODE */
- .test(@size){
- width: @size;
- }
- .test(@size, @multiple){
- width: @size * @multiple;
- }
- .el-a{
- .test(10px);
- }
- .el-b{
- .test(10px, 2);
- }
- /* CSS CODE */
- .el-a {
- width: 10px;
- }
- .el-b {
- width: 20px;
- }
2.用常量参数来匹配不同的 Mixins
- /* LESS CODE */
- .test(large, @size: 10px){
- width: @size * 2;
- }
- .test(simple, @size: 10px){
- width: @size;
- }
- .test(@_, @size: 10px){
- display: block;
- }
- .el-a{
- .test(large);
- }
- .el-b{
- .test(simple);
- }
- /* CSS CODE */
- .el-a {
- width: 20px;
- display: block;
- }
- .el-b {
- width: 10px;
- display: block;
- }
以下是整个过程如何发生的:
第一个 .test 只有在满足 large 条件才会被匹配;
第二个 .test 只有在满足 simple 条件才会被匹配;
第三个 .test 在任何条件下,甚至是 large 和 simple 以外的条件下都会被匹配,只要满足传参规则就可以了(.test 要求传入1~2个参数);
只要是满足匹配要求的 Mixins,都会被使用。
变量可以匹配任何值,而常量只有在传入的值与之完全相等时才可以匹配成功。
3.用条件表达式来控制模式匹配
- /* LESS CODE */
- .test(@size) when (@size >= 10){
- width: @size;
- color: #f00;
- }
- .test(@size) when (@size < 10){
- width: @size;
- color: #000;
- }
- .el-a{
- .test(20px);
- }
- .el-b{
- .test(5px);
- }
- /* CSS CODE */
- .el-a {
- width: 20px;
- color: #f00;
- }
- .el-b {
- width: 5px;
- color: #000;
- }
有了条件表达式,总算可以跟 SASS 的 @if 比拼一下了,虽然实际用起来感觉还是不如 @if,但总比被完爆要强不少了。
4.条件表达式中使用类型检测函数
- /* LESS CODE */
- .test(@param) when (iscolor(@param)){
- color: @param;
- }
- .test(@param) when (isnumber(@param)){
- width: @param;
- }
- .el-a{
- .test(#f00);
- }
- .el-b{
- .test(5px);
- }
- /* CSS CODE */
- .el-a {
- color: #ff0000;
- }
- .el-b {
- width: 5px;
- }
当然,上面的例子仅仅是列出了两个类型检测函数,LESS 提供了很多类型检测函数,如:iscolor、isnumber、isstring、iskeyword、isurl等等,具体的话,我会在下一篇 LESS 函数说明中提及。
5.条件表达式中使用 and、or、not
- /* LESS CODE */
- .test(@size) when (@size > 10) and (@size < 20){
- width: @size;
- color: #000;
- }
- .test(@size) when (@size < 10), (@size > 20){
- width: @size;
- color: #ff0;
- }
- .test(@size) when not (@size = 20){
- text-align: center;
- }
- .el-a{
- .test(15px);
- }
- .el-b{
- .test(5px);
- }
- .el-c{
- .test(10px);
- }
- /* CSS CODE */
- .el-a {
- width: 15px;
- color: #000;
- text-align: center;
- }
- .el-b {
- width: 5px;
- color: #ff0;
- text-align: center;
- }
- .el-c {
- text-align: center;
- }
细心的同学会发现,LESS 中的逻辑与,是用英文逗号“,”来实现的,而不是直接用 or。
6.条件表达式中参数和参数进行比较
- /* LESS CODE */
- .test(@width, @height) when (@width >= @height){
- width: @width;
- height: @height;
- background-color: #000;
- }
- .test(@width, @height) when (@width < @height){
- width: @width;
- height: @height;
- background-color: #f00;
- }
- .el-a{
- .test(10px, 20px);
- }
- .el-b{
- .test(20px, 10px);
- }
- /* CSS CODE */
- .el-a {
- width: 10px;
- height: 20px;
- background-color: #f00;
- }
- .el-b {
- width: 20px;
- height: 10px;
- background-color: #000;
- }
7.高级参数用法
- /* LESS CODE */
- /* 不接受任何参数 */
- .test(){
- ...
- }
- /* 接受任意多个参数 */
- .test(...){
- ...
- }
- /* 接受1个参数 */
- .test(@size: 1px){
- ...
- }
- /* 接受0~1个参数 */
- .test(@size){
- ...
- }
- /* 同样是接受任意多个参数 */
- .test(@size: 1px, ...){
- ...
- }
- /* 接受1~N个参数 */
- .test(@size, ...){
- ...
- }
主要是说明“...”的用法,另外还有先前(在基本语法一文中)提到的 @arguments 变量,如果已经淡忘,那可以去回顾下了。
8.作用域
- /* LESS CODE */
- .test(@bgColor, @size){
- .set-bg-color(){
- background: @bgColor;
- }
- .set-size(){
- width: @size;
- height: @size;
- }
- .set-bg-color();
- .set-size();
- }
- .el-a{
- .test(#fff, 20px);
- }
- /* CSS CODE */
- .el-a {
- background: #ffffff;
- width: 20px;
- height: 20px;
- }
可以看到,在 .test 中,我还定义了两个 Mixins (就是 .set-bg-color 和 .set-size),但是这两个 Mixins 的作用域仅仅是在 .test 之中,如果在外部调用是会编译报错的。
而 .set-bg-color 和 .set-size 作为 .test 的内部 Mixins,它们本身虽然没参数,却又可以直接使用 .test 的参数。
是不是和 JS 很像?如果你对 JS 的作用域有所了解,那么这些应该不难理解。
9.字符串插值
- /* LESS CODE */
- .test(@domain){
- background-image: url("@{domain}/img/test.png");
- }
- .el-a{
- .test('http://asset.img.com');
- }
- /* CSS CODE */
- .el-a {
- background-image: url("http://asset.img.com/img/test.png");
- }
这一个特性在统一配置静态资源所在域中会有很好的发挥
10.避免编译
- /* LESS CODE */
- .test(){
- filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
- }
- .el-a{
- .test();
- }
- /* CSS CODE */
- .el-a {
- filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
- }
对于像滤镜这种特别的 CSS (特别之处在于这样的 CSS 本身就是一种函数调用,而 LESS 又没有提供这样的函数),LESS 通过 ~"内容" 这样格式来直接输出内容,避免对内容部分进行编译。
11.在 LESS 中使用 Javascript
- /* LESS CODE */
- .el-a{
- font-size: 12px;
- color: #f00;
- &:before{
- @arr: 'hello', 'world';
- content: `@{arr}.join(' ').toUpperCase()`;
- }
- }
- /* CSS CODE */
- .el-a {
- font-size: 12px;
- color: #f00;
- }
- .el-a:before {
- content: "HELLO WORLD";
- }
上面的例子中,可以捕抓到几个点:
如何用 LESS 变量来定义数组,@arr: 'hello', 'world';
如何在 LESS 中使用 JS(用“``”来包住要执行的JS语句),and 当中的 JS 如何获取 LESS 中定义的变量(用“@{变量名}”的格式),content: `@{arr}.join(' ').toUpperCase()`;
由于一般情况下,我们都是用 LESS 编译出 CSS 后,直接引用 CSS 文件的。所以在 LESS 中一般都不会使用和 DOM 相关的 JS 代码;
虽然说,能在 LESS 中使用 JS 是一件很让人兴奋的事,但实际上...除了极少时候需要做字符串处理外,真的想不到有什么时候需要用到这一特性...
【LESS系列】高级特性的更多相关文章
- Zookeeper系列五:Master选举、ZK高级特性:基本模型
一.Master选举 1. master选举原理: 有多个master,每次只能有一个master负责主要的工作,其他的master作为备份,同时对负责工作的master进行监听,一旦负责工作的mas ...
- Visual Studio 2015 速递(4)——高级特性之移动开发
系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...
- Python的高级特性8:你真的了解类,对象,实例,方法吗
Python的高级特性1-7系列是本人从Python2过渡3时写下的一些个人见解(不敢说一定对),接下来的系列主要会以类级为主. 类,对象,实例,方法是几个面向对象的几个基本概念,其实我觉得很多人并不 ...
- Python进阶:全面解读高级特性之切片!
导读:切片系列文章连续写了三篇,本文是对它们做的汇总.为什么要把序列文章合并呢?在此说明一下,本文绝不是简单地将它们做了合并,主要是修正了一些严重的错误(如自定义序列切片的部分),还对行文结构与章节衔 ...
- Redis基础用法、高级特性与性能调优以及缓存穿透等分析
一.Redis介绍 Redis是一个开源的,基于内存的结构化数据存储媒介,可以作为数据库.缓存服务或消息服务使用.Redis支持多种数据结构,包括字符串.哈希表.链表.集合.有序集合.位图.Hype ...
- Redis基础、高级特性与性能调优
本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...
- Redis 基础、高级特性与性能调优
本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...
- Visual Studio 2015速递(4)——高级特性之移动开发
系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...
- 《Java核心技术 卷II 高级特性(原书第9版)》
<Java核心技术 卷II 高级特性(原书第9版)> 基本信息 原书名:Core Java Volume II—Advanced Features(Ninth Edition) 作者: ( ...
随机推荐
- Geronimo 叛逆者: 使用集成软件包:Codehaus 的 Woodstox(转载)
XML 解析器通常是高性能.健壮应用程序的关键.传统的 XML 解析技术包括文档对象模型(Document Object Model,DOM)和 Simple API for XML (SAX).现在 ...
- 【树状DP】星象仪
题目描述 在寂寞的夜里,星象仪是非常浪漫的东西.但是,你作为一个精神稍微有点不太正常的Geek,把原本正常的星象仪改造得像电报发送器一样.当然,你这个的构造还要更加奇葩一点.具体来说,你的星象仪是一棵 ...
- Python入门基础学习 一
Python入门基础学习 一 Python下载及安装 下载地址:https://www.python.org/,选择最新的版本下载 稍等一会,安装完成. 简单语句 从idle启动Python:IDLE ...
- .NET框架源码解读之启动CLR
前面提到在SSCLI环境里运行.NET程序的时候,执行的命令类似java程序的执行过程,即通过clix程序解释执行.net程序.这个过程看起来跟在windows环境下执行.net程序表面上看起来不一样 ...
- Centos 7 安装记录
0.安装中选择最小安装 1.centos7安装图形界面 之前转载过一篇“centos6安装图形界面”的文章,地址见http://my.oschina.net/u/1169607/blog/335304 ...
- Python 实现图片对比检测
在写测试框架的时候,需要用到图片对比的方法来判断用例执行的情况,问了一下度娘,原来可以用PIL模块处理: from PIL import Image # 先安装Pillow, \>pip in ...
- C#学习(1):类型约束
where T : class泛型类型约束 类型参数约束,.NET支持的类型参数约束有以下五种: where T : struct | T必须是一个结构类型 where T : class T必须是一 ...
- .net图表之ECharts随笔08-bar柱状图
之前一直都是跟着修改demo,感觉用得很吃力,现在结合上配置手册就好很多了,其实说到底就是参数的配置,所以配置手册尤为重要. 当然,这其中还是很多坑,希望可以找到对应的解决方案吧!!! 1. tool ...
- 【Oracle 12c】最新CUUG OCP-071考试题库(55题)
55.(13-3) choose the best answer: Which statement is true regarding the SESSION_PRIVS dictionary vie ...
- 动态代理(JDK实现)
JDK动态代理,针对目标对象的接口进行代理 ,动态生成接口的实现类 !(必须有接口) public class ProxyDemo { //通过方法的返回值得到代理对象 方法参数 ...