less
- Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。
- 使用:
- 编写less文件-->引入less文件-->引入less.js-->运行
- 注意点:
- 一定要先引入less.css再引入less.js
- 一定要在服务端运行才能生效, 本地运行无效
- 引入less.js就是让网页在运行的时候动态的区解析less的css,动态的设置给元素
<link rel="stylesheet/less" href="css/10-less文件中引入其他less文件.less">
<script src="js/less.min.js"></script>
less注释
- //为单行注释, 当利用工具转换为CSS文件时不被编译(暴露)
- /**/为多行注释, 当利用工具转换为CSS文件时编译(会被暴露)
less中的变量
- 格式: @变量名称: 值;
- 取值采用就近原则
- 作用域是{开始到}结束
- 注意点: less变量采用延时加载,后定义的变量在前面也可以使用
@color: yellow
div{
@color: blue
background-color: @color; //blue
}
p{
background-color: @color; //yellow
}
less中的运算
- 运算符支持+ - * /
- 运算项有一个带单位即可
- 运算符两端用空格隔开, 用空格隔开, 用空格隔开
margin-left: ( -200px / 2 );
less混合
- 将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可
- 在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来(相当于赋值黏贴)
- 注意点:
- 如果混合名称的后面没有(), 那么在预处理的时候, 会将混合的代码也拷贝过来
- 如果混合名称的后面加上(), 那么在预处理的时候, 不会将混合的代码拷贝过来
//.center{
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translateX(-50%) translateY(-50%);
//}
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
.box1{
width:200px;
height:200px;
background: red;
.center();
}
.box2{
width: 200px;
height: 200px;
background: blue;
//position: absolute;
//left: 50%;
//top: 50%;
//transform: translateX(-50%) translateY(-50%);
.center;
}
带参数的混合
- 参数后面加 :值,表示不传参数的时候的默认值
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
.init(@width:200px,@height:200px,@color:red){
width:@width;
height:,@height;
background: @color;
}
.box1{
.init(200px,200px,blue)
.center();
}
.box2{
.init(300px,300px,red)
.center;
less可变参数
.transition(...){
transition: @arguments;
}
div{
width: 200px;
height: 200px;
background: red;
//transition: margin-left 2s linear 0s;
//.transition(margin-left, 2s, linear, 0s);
.transition(margin-left, 2s);
}
less混合的匹配模式
- 如下所示,Down,Up,Left,Right都为匹配模式,如果写上@_为和任意模式匹配的时候都会被执行
// 只要任意和匹配模式被执行, 这个混合都会被执行
.triangle(@_ ,@w, @c){
width: 0;
height: 0;
overflow: hidden;
}
.triangle(Down,@w, @c){
border-width: @w;
border-style: solid dashed dashed dashed ;
border-color: @c transparent transparent transparent;
}
.triangle(Up,@w, @c){
border-width: @w;
border-style: dashed dashed solid dashed ;
border-color: transparent transparent @c transparent;
}
.triangle(Left,@w, @c){
border-width: @w;
border-style: dashed solid dashed dashed ;
border-color: transparent @c transparent transparent;
}
.triangle(Right,@w, @c){
border-width: @w;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent @c;
}
div{
//.triangle(Down ,20px, red);
//.triangle(Up ,20px, red);
//.triangle(Left ,20px, red);
.triangle(Right ,40px, red);
}
less中引入其他less文件
- 用@import less文件名称即可
@import triangle.less
less中的函数
- 函数太多, 查less文档, 直接调用即可, 文档地址: http://lesscss.cn/functions/
less中&的使用
如下
div{
width: 200px;
height: 200px;
background: red;
&:hover{
background: blue; //当鼠标悬停变成蓝色
}
}
以上代码相当于
div{
width: 200px;
height: 200px;
background: red;
}
div:hover{
background: blue; //当鼠标悬停变成蓝色
}
less中的继承
- 混合相当于代码的拷贝, 当这个混合应用于多个选择器中相当于拷贝多次
- 继承相当于为你选择的多个选择器提供并集选择器,代码只会拷贝一次,赋予多个选择器
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box1:extend(.center){
width: 300px;
height: 300px;
background: red;
}
.box2{
&:extend(.center);
width: 100px;
height: 100px;
background: blue;
//.center;
}
以上代码相当于
.center,.box1,.box2 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box1 {
width: 300px;
height: 300px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
