LESS知识总结
1、认识less
2、使用less
3、变量( variables )
4、混合 ( mixins )
5、嵌套规则 ( nested-rules )
6、运算(operations)
7、函数(functions)
8、命名空间
9、作用域
10、引入(importing)
11、关键字( important )
12、条件表达式
13、循环(loop)
14、合并属性
15、函数库(function)
初见less |
|
正确使用less |
|
变量 |
|
混合 |
|
嵌套规则
|
什么是嵌套规则 模仿html结构,让css代码更加简洁明了清晰。 header{ width: 960px; h1{ font-size: 18px; color: green; } .logo{ width: 300px; height: 150px; background: darkred; &:hover{ background: forestgreen; } } } & 说明:表示当前选择器的所有父选择器。 & 插入到选择器之后,就会将当前选择器插入到父选择器之前。 .a{ .b{ .c&{ color: 123; } } } 编译后 .c .a .b{ color: 123; } 组合生成所有可能的选择器列表 p, a, li { border-top: 2px dotted #366; & & { border-top: 0; } } 编译后 p p, p a, p li, a p, a a, a li, li p, li a, li li{ border-top: 0; } |
运算 |
运算说明(运算符与值之间必须以空格分开,涉及优先级时以“( )”优先)
任何数值、颜色和变量都可以进行运算;
less会自动推断数值的单位,所有不必所有数值都加上单位。
.wp{
margin: 0 auto;
background: forestgreen;
width: 450px + 450;
height: 400 + 400px;
}
//涉及到优先级,使用()区分优先级
.wp{
margin: 0 auto;
width: (550 - 50)*2 + 24px;
height: 400 + 400px;
background:#ff0000 - 55; //#000021 c8c8c8
}
//rgb模式他的值是 0~255 ,当你的值超过255 ,那么就会以255进行相加操作
|
函数
|
Less提供了许多用于转换颜色,处理字符串和进行算术运算的函数。 .bgcolor{ background :rgb(0,133,0) ; z-index: blue(#050506); } 编译后 .bgcolor{ background :#008500; z-index: 6; } |
命名空间
|
什么是命名空间
在less中,我们需要将一些混合组合在一起,可以通过嵌套多层id或者class实现。
#bgcolor(){
background: #ffffff;
.a{
color: #888888;
&:hover{
color: #ff6600;
}
.b{
background: #ff0000;
}
}
}
.bgcolor1{
background: #fdfee0;
#bgcolor>.a;
}
注意:">"可以省略不写
|
作用域
|
什么是作用域
less中的作用域与编程语言中的作用域概念非常相似,首先会在局部查找变量和混合。如果没找到,编译器就会在父作用域中查找,依次类推。
@clolor:#ffffff;
.bgcolor{
width: 50px;
a{
color: @clolor; //#ff0000
}
}
@clolor:#ff0000;
|
引入 |
什么是引入
你可以引入一个或多个.less文件,然后这个文件中的所有变量都可以在当前的less项目中使用!
@import "main.less";
@import (reference) "main.less"; //引用LESS文件,但是不输出
@import (inline) "main.less"; //引用LESS文件,但是不进行操作
@import (once) "main.less"; //引用LESS文件,但是不进行操作
@import (less) "index.css"; //无论是什么格式的文件,都把他作为LESS文件操作
@import (css) "main.less"; //无论是什么格式的文件,都把他作为CSS文件操作
@import (multiple) "main.less"; //multiple,允许引入多次相同文件名的文件
@import (multiple) "main.less"; //multiple,允许引入多次相同文件名的文件
@import (multiple) "main.less"; //multiple,允许引入多次相同文件名的文件
.centen{
width:@wp;
.color;
}
注意:引用.css文件,会被原样输出到编译文件中!
|
关键字
|
什么是 !important关键字
在调用的混合集后面追加 !important 关键字,可以使混合集里面的所有属性都继承!important。
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
font-size: 16px;
font-weight: 900;
}
.unimportant {
.foo();
}
.important {
.foo() !important;
}
注意:会提升所有样式的权重,尽量少用,不推荐使用。
|
条件表达式
|
>,>=,=,<=,<,true .mixin (@a) when (lightness(@a) >= 50%) { //255/2=127.5
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#7e7e7e) } //221 > 127.5 >50% background-color: black; 7e7e7e = 126
.class2 { .mixin(#808080) } //85 <127.5 <50% background-color: white; 808080 = 128
类型检查函数
可以基于值的类型来匹配函数
iscolor
isnumber
isstring
iskeyword
isurl
.mixin (@a) when (iscolor(@a)) {
background-color: black;
}
.mixin (@a) when (isnumber(@a) ) {
background-color: white;
shuzi:shuzi;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#7e7e7e) } //background-color: black;
.class2 { .mixin(123) } //background-color: white;
单位检查函数
可以基于值的类型来匹配函数
ispixel
ispercentage isunit
.mixin (@a) when (ispixel(@a)) {
background-color: black;
}
.mixin (@a) when (ispercentage(@a) ) {
background-color: white;
}
.mixin (@a) {
width: @a;
}
.class1 { .mixin(960px) } //background-color: black; width:960px
.class2 { .mixin(95%) } //background-color: white;width:95%
|
循环
|
在less中,混合可以调用它自身,这样,当一个混合递归调用自己,再结合Guard表达式和模式匹配这两个特性,就可以写出循环结构.
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // 递归调用自身 4 3 2 1 0
width: (10px * @counter); // 每次调用时产生的样式代码30px 20px 10px
}
div {
.loop(3); // 调用循环
}
.loop(@counter) when (@counter > 0) {
h@{counter}{
padding: (10px * @counter);
}// 每次调用时产生的样式代码
.loop((@counter - 1)); // 递归调用自身
}
div {
.loop(6); // 调用循环
}
|
合并属性
|
"+"逗号分隔所合并的属性值
在需要合并的属性的:的前面加上+就可以完成合并,合并以,分割属性
//+ 合并以后,以逗号分割属性值
.mixin() {
box-shadow+: inset 0 0 10px #555 ;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
//+_ 合并以后,以空格分割属性值
.a(){
background+:#f60;
background+_:url("/sss.jod") ;
background+:no-repeat;
background+_:center;
}
.myclass {
.a()
}
//background+_:#f60 url("/sss.jod");
注意:当前使用的是哪个,就以这个想加。
|
LESS知识总结的更多相关文章
- 你必须知道的EF知识和经验
注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式. 推荐MiniProfiler插件 工欲善其事,必先利其器. 我们使用EF和在很大程度提高了开发速度,不过随之带来的 ...
- MySQL高级知识- MySQL的架构介绍
[TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...
- 学点HTTP知识
不学无术 又一次感觉到不学无术,被人一问Http知识尽然一点也没答上来,丢人丢到家了啊.平时也看许多的技术文章,为什么到了关键时刻就答不上来呢? 确实发现一个问题,光看是没有用的,需要实践.看别人说的 ...
- java中的字符串相关知识整理
字符串为什么这么重要 写了多年java的开发应该对String不陌生,但是我却越发觉得它陌生.每学一门编程语言就会与字符串这个关键词打不少交道.看来它真的很重要. 字符串就是一系列的字符组合的串,如果 ...
- [C#] C# 知识回顾 - 你真的懂异常(Exception)吗?
你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...
- [C#] C# 知识回顾 - 学会处理异常
学会处理异常 你可以使用 try 块来对你觉得可能会出现异常的代码进行分区. 其中,与之关联的 catch 块可用于处理任何异常情况. 一个包含代码的 finally 块,无论 try 块中是否在运行 ...
- [C#] C# 知识回顾 - 学会使用异常
学会使用异常 在 C# 中,程序中在运行时出现的错误,会不断在程序中进行传播,这种机制称为“异常”. 异常通常由错误的代码引发,并由能够更正错误的代码进行 catch. 异常可由 .NET 的 CLR ...
- [C#] C# 知识回顾 - 异常介绍
异常介绍 我们平时在写程序时,无意中(或技术不够),而导致程序运行时出现意外(或异常),对于这个问题, C# 有专门的异常处理程序. 异常处理所涉及到的关键字有 try.catch 和 finally ...
- [.NET] C# 知识回顾 - Event 事件
C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...
- [.NET] C# 知识回顾 - 事件入门
C# 知识回顾 - 事件入门 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6057301.html 序 之前通过<C# 知识回顾 - 委托 de ...
随机推荐
- c# 7.0 6.0 新语法
1.参考地址:https://docs.microsoft.com/zh-cn/dotnet/csharp/tutorials/exploration/csharp-7?tutorial-step=5 ...
- Golang 入门系列(四)如何理解interface接口
前面讲了很多Go 语言的基础知识,包括go环境的安装,go语言的语法等,感兴趣的朋友,可以先看看之前的文章.https://www.cnblogs.com/zhangweizhong/category ...
- 随心测试_软测基础_002_<测试工程师_核心技能体系>
测试工程师核心技能体系构成 测试基础体系:[对象——>方法——>流程].[测试活动类型——>质量] 测试分析体系:[测试对象分析]——>[测试设计(计划.数据.用例.文档)] ...
- static 与final abstract关键字
一.通常访问类的属性与方法需要创建该类的实例,而static关键字的访问不需要某个特定的实例. 1.静态变量 使用类名.变量直接访问 package text5; public class Fathe ...
- 查看CLOUD系统级IIS日志
1.进入IIS,点击查看日志文件 2.分不同文件夹存放
- centos7之关于时间和日期以及时间同步的应用
在CentOS 6版本,时间设置有date.hwclock命令,从CentOS 7开始,使用了一个新的命令timedatectl. 基本概念: 一.GMT.UTC.CST.DST 时间 UTC 整个地 ...
- sql-josn
1 select fname,fdistrict ,famount from sale for json auto---最简单方式[{"name":"name1" ...
- Python——Socket编程
一.TCP 1.客户端 import socket sk = socket.socket() # 买个手机 sk.connect(('127.0.0.1',8080)) # 拨号 ret = sk.r ...
- Lodop打印控件传入css样式、看是否传入正确样式
Lodop中可以传入页面存在的css样式,也可以是拼接后的新样式,例如本博客的其他博文:Lodop打印如何隐藏table某一列 需要打印的页面,样式不一定都是行内样式,style样式单独写在页面上,或 ...
- EasyTouch5ForSiki学院
总结: 这里面的一些功能,就可以拿来做移动或者PC的很多功能了,这是一个很有用的插件. 禁用0618错误 EasyTouch4_x的写法: using HedgehogTeam.EasyTouch; ...