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;
}