Less复习
一、Less概述
Less是一种CSS的扩展和动态样式表语言,CSS预处理,可以在客户端或服务器端运行,帮助我们自定义,管理和重用网页的样式表。Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
Less是一种开源语言,也是跨浏览器兼容的语言。
二、Less入门案例
创建HTML文件后,在<head>
中引入:
<link rel="stylesheet/less" type="text/css" href="./css/styles.less" />
<script src="//cdn.jsdelivr.net/npm/less@3.13" ></script>
<body>
<div id="header"></div>
</body>
写入外部样式,styles.less
@width: 100px;
@height: @width + 50px;
#header {
width: @width;
height: @height;
background-color: hotpink;
}
可以实现高度比宽度大50px,只需要改变宽度即可。
三、Less文件编译为CSS文件
- 确认电脑已经安装了node环境
- 安装less编译器lessc,命令如下:
npm install -g less
- dos窗口进入需要转换的less文件的位置
- 执行以下命令:
lessc less文件名.less 生成的css文件名.css
四、Less语法
1.变量
引入外部less文件
@color: red;
@size: 14px;
@width: 100px;
@height: @width + 50px;
.container{
background: @color;
font-size: @size;
width: @width;
height: @height;
}
2.变量数组
@colors: red,green,blue ;
#p{
color: extract(@colors, 1) //less 初始为1开始
}
3.颜色函数
LESS提供了一些函数,使定义和操作颜色变得超级简单。使用其中的一些函数帮助你控制颜色,更好地配色并保持其组织性。
@colors: red,green,blue ;
#p{
color: extract(@colors, 1) /*extract从数组中取值,less 初始为1开始*/
}
#p1{
/*color: fadeout(extract(@colors,1),90%) ;*/
color: mix(extract(@colors,1),extract(@colors, 3)) ;
}
4.数学函数
- round(1.67); // 返回2
- ceil(2.4); // 返回3
- floor(2.6); // 返回2
- percentage(0.5); // 返回50%
@colors: red,green,blue ;
#p2{
color:extract(@colors, ceil(1.5))
}
5.作用域
@a: red ;
//在大括号中也可以定义变量
#p3{
@a: pink ;
/*color: lighten(@a, 50%);*/
color:lighten(@a,5%) ;
}
h1{
color: @a ;
}
h2{
color: darken(@a, 15%);
}
less中的作用域首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。
6.混合
<body>
<h3 class = "one">我喜欢<span class = "two">杨迪</span></h3>
<h4>hahahaha</h4>
</body>
/*混合语法*/
.one{
color:green ;
font-size: 30px;
.two() ;
}
.two(@a:red){
color:@a ;
font-size: 50px;
font-style: italic;
}
h4{
cursor: pointer;
.two(green) ;
}
7.匹配模式
可以理解成JS当中if-else、switch语句,假设项目需要多处用到一些小图标,这里以三角形来举例。
<body>
<p class = "sanjiaoxing"></p>
</body>
/*朝上的三角形*/
.triangle(top,@width: 50px,@color: #ccc){
border-width: @width;
border-color: transparent transparent @color transparent;
border-style: dashed dashed solid dashed;
}
/*朝下的三角形*/
.triangle(bottom,@width: 50px,@color: #ccc){
border-width: @width;
border-color: @color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
/*朝左的三角形*/
.triangle(left,@width: 50px,@color: #ccc){
border-width: @width;
border-color: transparent @color transparent transparent;
border-style: dashed solid dashed dashed;
}
/*朝右的三角形*/
.triangle(right,@width: 50px,@color: #ccc){
border-width: @width;
border-color: transparent transparent transparent @color ;
border-style: dashed dashed dashed solid;
}
/*只要是用到.triangle,都会携带以下这些CSS,@_表示携带这些公共样式*/
.triangle(@_,@width: 50px,@color: #ccc){
height: 0;
width: 0; /*注意这个width设置,不设置就不会出现三角形*/
overflow: hidden;
}
/*开始调用*/
.sanjiaoxing{
.triangle(bottom,30px,red);
}
8.运算
一般运算是用在px和color,但color相对少用。
@fontSize: 50px;
@color: #ccc;
.container{
font-size: @fontSize + 30;
color: @color + 10;
}
9.嵌套规则
<ul class="list">
<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
</ul>
/*第一种*/
.list{
width: 200px;
height: auto;
background-color: pink;
.li{
height: 30px;
line-height: 30px;
}
.a{
font-size: 24px;
&:hover{
color: green; /* &:指向上一层父选择器 */
}
}
.span{
font-size: 12px;
}
}
嵌套规则当然可以使用下面的第二种写法
/*第二种*/
.list{
width: 200px;
height: auto;
background-color: pink;
.li{
height: 30px;
line-height: 30px;
.a{
font-size: 24px;
&:hover{
color:red ;
}
}
.span{
font-size: 12px;
}
}
}
写的层级越多,解析会越慢,推荐第一种。
10.@arguments变量
@arguments表现传入的所有参数,使用较少。
.border(@w: 2px,@color: red,@style: solid){
border: @arguements;
}
.container{
width: 100px;
height: 100px;
.border();
}
/*编译成CSS*/
.container {
width: 100px;
height: 100px;
border: 2px red solid;
}
11.避免编译
有时候会输出一些不正确的CSS语法或者使用一些Less不认识的语法。我们可以在值的前面加上~
,表示不进行编译。比如滤镜等。
.container{
width: ~'calc(100%-20)'; /*calc() 函数计算 <div> 元素的宽度*/
height:50px;
background-color: pink;
}
.one{
width: calc(50% - 20px);
height:50px;
background-color: hotpink;
}
.two{
width: calc(50%);
height:50px;
background-color: hotpink;
}
12.!imporant
!imporant优先执行
<p class = "container" id = "p">林志玲</p>
.container{
width: 100px;
height: 100px;
background: pink;
border: 4px green solid ;
}
#p{
border: 2px red dashed !important ;
}