Less学习（1）
写在开头的话：
月余前被问起会不会Less，当时就有想学这个css框架的念头，而在昨天，在前端乱炖上看到一篇LessCss的开篇介绍，忽然就有了一股立马去学的冲动，回到家后找了几篇文章看了下，初感觉比较容易入门，变量混合参数的写法都很容易让人接受。至于嵌套，目前而言，我个人并不喜欢这种写法。追梦说谷歌正在用c++写他们自己的Sass(据说类似Less的一种css框架)，更加让我坚定了学这个框架的想法。今天只看了文档的小半部分，明天空的话就继续喽。希望以后能在项目中用到吧，不过目前我们公司的话，希望不大，哈哈。
一、变量
定义
@color:#e11921;
使用
a:hover{
color:@color;
}
编译后的结果：
a:hover { color: #e11921;}
注意点：
（1）变量的定义无需提前，也就是说，定义可以放在使用之后。比如：
a:hover{
color:@color;
}
@color:#e11921;
编译后的结果：
a:hover {
color: #e11921;
}
（2）变量的作用域
@bg:#cccccc;
.wrap{
@bg:#e5e5e5;
.box{
background-color:@bg;
}
}
.module{
background-color:@bg
}
编译后的结果为：
.wrap .box {
background-color: #e5e5e5;
}
.module {
background-color: #cccccc;
}
二、混合
我们可以定义一些通用的属性集.class,然后在其他的地方引入这些属性集
.btn{
display:inline-block;
border:1px solid #e5e5e5;
text-align:center;
}
.btn-b{
width:62px;
height:22px;
line-height:22px;
.btn;
}
编译后的结果为：
.btn {
display: inline-block;
border: 1px solid #e5e5e5;
text-align: center;
}
.btn-b {
width: 62px;
height: 22px;
line-height: 22px;
display: inline-block;
border: 1px solid #e5e5e5;
text-align: center;
}
注意点：变量也会被混合，带入到新的作用域。（暂）
三、带参数的混合
（我觉得这个功能很适合用于css3，比如渐变啊什么的，浏览器私有前缀是繁琐的存在= =还有就是一组类似的样式了，比如不同尺寸的相似按钮）
继续拿.btn作例子：
.btn(@width:64px,@height:22px){
display:inline-block;
width:@width;
height:@height;
line-height:@height;
text-align:center;
background-color:#f4f4f4;
color:#333;
border:1px solid #ccc;
border-radius:5px;
}
#submit{
.btn(80px,28px);
}
编译后的结果为：
#submit {
display: inline-block;
width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: #f4f4f4;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
}
如果不想把.btn暴露到css中去，只在Less的混合中使用，可以不要设定参数（这里是我疑惑的地方，上个例子中编译的结果也并没有暴露.btn啊）：如
.btn(){
display:inline-block;
width:64px;
height:20px;
line-height:32px;
text-align:center;
background-color:#f4f4f4;
color:#333;
border:1px solid #ccc;
border-radius:5px;
}
#cancel{
.btn;
}
编译后的结果为：
#cancel {
display: inline-block;
width: 64px;
height: 20px;
line-height: 32px;
text-align: center;
background-color: #f4f4f4;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
}
注意点：
（1）多参数的混合，参数之间除使用逗号分隔外，还可以使用分号（官方推荐），因为分号有双重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。当参数分隔符中逗号和分号都存在时，则分号作为分隔符。
（2）同名不同参数的混合，看下面这个例子：
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
第一个mixin强制要求第一个参数
第二个mixin强制要求第一个参数，第二个参数为可选
第三个mixin强制要求前2个参数，第三个为可选
因此当调用时：
.some .selector div {
.mixin(#008000);
}
编辑结果为：
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2:;
}
四 @arguments变量
@arguments包含了你传进去的所有变量，所以它会适合用在一些符合的属性，比如border margin padding box-shadow等等。
我们拿border作为例子（因为写的最多）
.border(@width:1px;@style:solid;@color:#e11921){
border:@arguments;
}
#border{
.border(2px,dashed,#f00);
}
编译结果为：
#border {
border: 2px dashed #ff0000;
}
好吧，我发现这个例子有点鸡肋，还是换成box-shadow吧
.box-shadow(@x:1;@y:1;@blur:2;@color:#eee){
box-shadow:@arguments;
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
-ms-box-shaow:@arguments;
}
#box{
.box-shadow(2px;2px;4px;rgba(0,0,0,0.6));
}
编译结果为：
#box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
-ms-box-shaow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
五：参数高级用法：
.mixin (...) { // 接受 0-N 个参数 （...我猜测是任意个数的意思）
.mixin () { // 不接受任何参数
.mixin (@a: 1) { // 接受 0-1 个参数
.mixin (@a: 1, ...) { // 接受 0-N 个参数
.mixin (@a, ...) { // 接受 1-N 个参数（参数a没有默认值，表示强制要求这个参数）
.mixin (@a, @rest...) {
// @rest 表示 @a 之后的参数
// @arguments 表示所有参数
}
六：！important
.box{
width:100px;
height:100px;
}
#facebox{
.box !important;
background-color:#edd;
}
编译后的结果为：
.box {
width: 100px;
height: 100px;
}
#facebox {
width: 100px !important;
height: 100px !important;
background-color: #edd;
}
最新文章
- Android6.0权限组申请
- CodeIgnitor 创建admin和其他目录，前后端分离，很巧妙的方式，网上查找其他的都不是使用这种方式实现的。
- glut编译问题 (程序无法运行)
- lua协程实现简析
- leetcode@ [126] Word Ladder II (BFS + 层次遍历 + DFS)
- Dojo实现Tabs页报错（三）
- C# 关于委托的小例子
- Makefile常用调试方法
- docker中执行sed: can't move '/etc/resolv.conf73UqmG' to '/etc/resolv.conf': Device or resource busy错误的处理原因及方式
- vscode 调试.net core 2.0 输出乱码解决方法
- 使用WinDbg获取SSDT函数表对应的索引再计算得出地址
- java中使用ReentrantLock锁中的Condition实现三个线程之间通信，交替输出信息
- 【k短路&A*算法】BZOJ1975: [Sdoi2010]魔法猪学院
- kvm虚拟机中鼠标不同步的问题解决方法
- Centos7源码安装mariadb
- python使用stomp连接activemq
- MySQL中进行树状所有子节点的查询 . mysql根据父id 查询所有的子id
- apache提示没有设置 max-age or expires解决办法
- monit
- 201621123008 《Java程序设计》第六周实验总结