上篇文章介绍了如何安装Less,我们将所有东西都写在.less里面,最后通过命令将.less转换成.css文件,就可以放入到项目里用了。今天了解一些less常用知识点。

1.变量:声明两个变量,一个是背景颜色,一个是文本颜色

Less代码:

@background-color: #ffffff;
@text-color: #1A237E; p{
background-color: @background-color;
color: @text-color;
padding: 15px;
} ul{
background-color: @background-color;
} li{
color: @text-color;
}

将其编译成css后的代码:

p{
background-color: #ffffff;
color: #1A237E;
padding: 15px;
} ul{
background-color: #ffffff;
} li{
color: #1A237E;
}

这就是Less里面的变量用法,用起来非常方便。比如上面想切换那两个颜色只需要将变量值互换一下即可。

2.Mixin :可以将已有的 class 和 id 的样式应用到另一个不同的选择器上。比如看下面例子。

#circle{
background-color: #4CAF50;
border-radius: %;
} #small-circle{
width: 50px;
height: 50px;
#circle
} #big-circle{
width: 100px;
height: 100px;
#circle
}

将其编译成css后的代码:

#circle {
background-color: #4CAF50;
border-radius: %;
}
#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: %;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: %;
}

注意看上面这个.css里面是不是也出现了 #circle的样式,如果你不想让#circle再出现到.css里面那就加一个()即可,例如:

#circle(){
background-color: #4CAF50;
border-radius: %;
} #small-circle{
width: 50px;
height: 50px;
#circle
} #big-circle{
width: 100px;
height: 100px;
#circle
}

将其编译成css后的代码:

#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: %;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: %;
}

另外Mixin还可以传参,比如传入一个指定宽高的参数,默认是30。创建一个 30×30的小圆和一个 200×200 的大圆

#circle(@size: 30px){
background-color: #4CAF50;
border-radius: %; width: @size;
height: @size;
} #small-circle{
#circle
} #big-circle{
#circle(200px)
}

将其编译成css后的代码:

#small-circle {
background-color: #4CAF50;
border-radius: %;
width: 30px;
height: 30px;
}
#big-circle {
background-color: #4CAF50;
border-radius: %;
width: 200px;
height: 200px;
}

3.嵌套:可以和html相匹配的方式构造.Less样式表,例如:

ul{
background-color: #03A9F4;
padding: 10px;
list-style: none; li{
background-color: #fff;
border-radius: 3px;
margin: 10px ;
}
}

将其编译成css后的代码:

ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
background-color: #fff;
border-radius: 3px;
margin: 10px ;
}

就像在其它高级语言中一样, Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明, less 会一直往上查找,直至找到离它最近的声明。例如:

@text-color: #;

ul{
@text-color: #fff;
background-color: #03A9F4;
padding: 10px;
list-style: none; li{
color: @text-color;
border-radius: 3px;
margin: 10px ;
}
}

将其编译成css后的代码:

ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
color: #ffffff;
border-radius: 3px;
margin: 10px ;
}

4.运算:和+ - * /一样 可以操作任何数字类型变量。例如:两个紧邻的 div 标签,第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

@div-width: 100px;
@color: #03A9F4; div{
height: 50px;
display: inline-block;
} #left{
width: @div-width;
background-color: @color - ;
} #right{
width: @div-width * ;
background-color: @color;
}

将其编译成css后的代码:

div {
height: 50px;
display: inline-block;
}
#left {
width: 100px;
background-color: #;
}
#right {
width: 200px;
background-color: #03a9f4;
}

5.函数: 看一下 fadeout, 一个降低颜色透明度的函数

@var: #;

div{
height: 50px;
width: 50px;
background-color: @var; &:hover{
background-color: fadeout(@var, %)
}
}

将其编译成css后的代码:

div {
height: 50px;
width: 50px;
background-color: #;
}
div:hover {
background-color: rgba(, , , 0.5);
} 当鼠标放在div上时,降低透明度0.5

想学习更多Less知识,推荐:https://www.w3cschool.cn/less/importing.html

原文来自:https://www.jianshu.com/p/c676041f387e.

Less常用知识点的更多相关文章

  1. DB2_SQL_常用知识点&实践

    DB2_SQL_常用知识点&实践 一.删除表中的数据(delete或truncate) 1 truncate table T_USER immediate; 说明:Truncate是一个能够快 ...

  2. JAVA常用知识点及面试题总结

    1. String.StringBuffer.StringBuilder三者区别? (1)三者在执行速率上的比较: String<StringBuffer<StringBuilder 原因 ...

  3. HTML常用知识点代码演示

    1 HTML部分常用知识点 <!-- 版本声明 --> <!DOCTYPE html> <!-- 唯一根元素 --> <html> <!-- 对网 ...

  4. Java 常用知识点

    Java 常用知识点 1.日期格式化 SimpleDateFormat Date date=new Date(System.currentTimeMillis()) ; SimpleDateForma ...

  5. BIOS备忘录之EC常用知识点

    BIOS工程师眼中常用的EC知识点汇总: EC的硬件架构 EC硬件结构上主要分为两部分:Host Domain和EC Domain Host Domain就是通过LPC与CPU通信的部分(LPC部分需 ...

  6. YII2常用知识点总结

    YII2常用知识点总结 (一)总结性语句 (1)经常看看yii源码比如vendor\yiisoft\yii2\web这个目录(很重要)下的文件中的方法(这些文件中的公共方法,大致看了下基本上都可以通过 ...

  7. CSS3常用知识点

    CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/ .attr2 a[class~="kawa& ...

  8. javaScript常用知识点有哪些

    javaScript常用知识点有哪些 一.总结 一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...

  9. 一文学会 TypeScript 的 82% 常用知识点(下)

    一文学会 TypeScript 的 82% 常用知识点(下) 前端专栏 2019-11-23 18:39:08     都已经 9021 年了,TypeScript(以下简称 TS)作为前端工程师不得 ...

随机推荐

  1. 对div的操作

    链接:https://blog.csdn.net/wide288/article/details/34116495 判断DIV的内容改变的方法 近日,在帮朋友写一段小程序的时候,用到了iframe,在 ...

  2. rabbitMQ学习1:消息队列介绍与rabbitmq安装使用

    1. 什么是消息队列 生活里的消息队列,如同邮局的邮箱, 如果没邮箱的话, 邮件必须找到邮件那个人,递给他,才玩完成,那这个任务会处理的很麻烦,很慢,效率很低 但是如果有了邮箱, 邮件直接丢给邮箱,用 ...

  3. luogu P3245 [HNOI2016]大数

    传送门 \(HNOI2019\)前最后一题了qwq 这题要分情况,如果\(p=2\)或\(5\),那么只要区间内最后一个数字是\(p\)的倍数就好了,这个可以莫队,也有更优秀的做法.莫队做法可以看代码 ...

  4. vprintf printf区别

    参考链接:  https://zhidao.baidu.com/question/237458625.html

  5. 关于vmvawe的光驱,iso镜像,挂载,卸载

    勾选这个使用iso镜像文件,就相当于真实的环境下,将一张光盘插进了光驱里,然后再勾选启动时连接,那么在linux开机后,/dev/cdrom或者/dev/sr0(前者是后者的软连接)就表示这个硬件设备 ...

  6. 《Java编程思想第四版》附录 B 对比 C++和 Java

    <Java编程思想第四版完整中文高清版.pdf>-笔记 附录 B 对比 C++和 Java “作为一名 C++程序员,我们早已掌握了面向对象程序设计的基本概念,而且 Java 的语法无疑是 ...

  7. (1)Java数据结构--图文并茂-分析优缺点

    转:常见Java数据结构&优缺点 - /画家/ - 博客园http://www.cnblogs.com/earl-yongchang/p/5639161.html 图片也是引用过来的,没有重新 ...

  8. nginx 目录讲解

  9. 817. Linked List Components

    1. 原始题目 We are given head, the head node of a linked list containing unique integer values. We are a ...

  10. Crash工具实战-变量解析【转】

    转自:http://blog.chinaunix.net/uid-14528823-id-4358785.html Crash工具实战-变量解析 Crash工具用于解析Vmcore文件,Vmcore文 ...