Less(v3.9.0)使用详解

该系列：

Less(v3.9.0)使用详解——基本使用

Less(v3.9.0)使用详解——变量

Less(v3.9.0)使用详解——嵌套和父选择器&

Less(v3.9.0)使用详解——extend(嵌套)

其他待更新...

翻译自less官方文档lesscss.org/features/#v…

变量

@width: 10px;
@height: @width + 10px;#header {width: @width;height: @height;
}
复制代码

编译为

#header {width: 10px;height: 20px;
}
复制代码

变量还可以用在其他地方，比如选择器名称，属性名称，urls地址，@import导入语句

// Variables
@my-selector: banner;
@images: "../img";
@property: font-weight;// Usage
.@{my-selector} {@{property}: bold;line-height: 40px;margin: 0 auto;background: url("@{images}/white-sand.png");
}
复制代码

编译为

.banner {font-weight: bold;line-height: 40px;margin: 0 auto;background: url("../img/white-sand.png");
}
复制代码

引用变量的变量

@primary:  green;
@secondary: blue;.section {@color: primary;.element {color: @@color;}
}
复制代码

编译为

.section .element {color: green;
}
复制代码

惰性求值，变量不用非得在使用之前声明，有点类似js的变量提升，当一个变量重复声明两次时，从当前作用域开始向上找，以最近作用域最后声明的为准

.lazy-eval {width: @var;@a: 9%;
}@var: @a;
@a: 100%;
复制代码

编译为

.lazy-eval {width: 9%;
}
复制代码

引用css属性值作为变量（v3.0.0），当遇到多个重复属性值时，规则同惰性求值

.block {color: red; .inner {background-color: $color; }color: blue;
}
复制代码

编译为

.block {color: red; color: blue;
}
.block .inner {background-color: blue;
}
复制代码

由于类似变量提升，惰性求值的特性，能够实现改变某些库默认变量的功能

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);// use of library
@import "library.less";
@base-color: red;
复制代码

此时base-color就变为red，而dark-color就变为dark red了，这在实现主题颜色时很有用

Less(v3.9.0)使用详解—变量相关推荐

ETCD v3 restful api 使用详解
ETCD v3 restful api 使用详解网上已经有很多关于v2接口的使用了,类型下面的请求方式,本文就主要讲解v3版本的restful api的使用方式. //V2版本curl http:/ ...
Hadoop3.2.0使用详解
Hadoop3.2.0使用详解 1.概述 Hadoop3已经发布很久了,迭代集成的一些新特性也是很有用的.截止本篇博客书写为止,Hadoop发布了3.2.0.接下来,笔者就为大家分享一下在使用Hado ...
android平台下OpenGL ES 3.0实例详解顶点属性、顶点数组
OpenGL ES 3.0学习实践 android平台下OpenGL ES 3.0从零开始 android平台下OpenGL ES 3.0绘制纯色背景 android平台下OpenGL ES 3.0绘 ...
关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解
关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解大海和星辰之间,是我们征途的方向: js是一种描述型的语言,由浏览器动态的解析与执行:严格来讲,js是单线程执行的,也就是说js脚本运 ...
vue-cli3.0配置详解
这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install ...
[转载]AxureRP 7.0部件详解（一）
转载]AxureRP 7.0部件详解(一) 本文为Axure RT7.0教程,本章主要介绍menu菜单.table表格.Tree Widget 树部件三个部件,后续将持续更新...... Menu 菜 ...
Android消息传递之EventBus 3.0使用详解
前言: 前面两篇不仅学习了子线程与UI主线程之间的通信方式,也学习了如何实现组件之间通信,基于前面的知识我们今天来分析一下EventBus是如何管理事件总线的,EventBus到底是不是最佳方案?学习 ...
linux rpm安装zabbix,CentOS 7上安装Zabbix Server 3.0 图文详解
CentOS 7上安装Zabbix Server 3.0 图文详解 1.查看系统信息. cat /etc/RedHat-release CentOS Linux release 7.0.1406 (C ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...

Less(v3.9.0)使用详解—变量

变量

Less(v3.9.0)使用详解—变量相关推荐

最新文章

热门文章