Less学习笔记

Less学习笔记

less属于css的一种预处理器处理在浏览器运行前,

基础语法

• 变量
• 混合(Mixins)
• 嵌套规则 代码更有逻辑
• 运算
• 函数
• 作用域

less和css的区别

1.less扩展了CSS语言，增加了css本身没有的变量、混合等特性，让css代码更易维护和扩展
2.css可以被浏览器直接识别，less需要先编译为css。

sass支持不使用花括号和分号，

变量

说明	值变量	选择器变量	属性变量	url变量	声明变量
变量值的含义	css中的属性值	css中的选择器	css中的属性	css中的url	css的多条样式
定义方式	@变量名:变量值	@变量名:变量值	@变量名:变量值	@变量名:"变量值"	@变量名: { 属性1: 值 ;属性2:值...};
使用方式	@变量名	@{变量名}	@{变量名}	@{变量名}	@变量名()
备注	可以把常用的变量封装在一个文件中，便于代码维护		不常用		css样式的复用

/*值变量*/
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
   color: @color;
   width: @width;
}
 /* 选择器变量 */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{
     color: #999;
     width: 50%;
	 height: $width;  /*继承width的值*/
}
.@{Wrap}{
     color:#ccc;
}
#@{Wrap}{
     color:#666;
}
/* url 变量*/
@images: "../img";
     body {
        background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
     }
/* 声明变量 */
@background: {background:red;};
#main{
        @background();
}
@Rules:{
      width: 200px;
      height: 200px;
      border: solid 1px red;
};
#con{
     @Rules();
}

变量的运算

• 加减法:以第一个数据的单位为基准
• 乘除法:注意单位一定要统一

@width:300px;
@color:#222;
#wrap{
  width:@width-20;
  height:@width-20*5;
  margin:(@width-20)*5;
  color:@color*2;
  background-color:@color + #111;
}

less嵌套

& 代表的上一层选择器的名字

#header{
   &:after{
      content:"Less is more!";
   }
   .title{
       font-weight:bold;
    }
    &_content{//理解方式：直接把 & 替换成 #header
        margin:20px;
    }
}

/* 生成的 CSS */
#header:after{
    content:"Less is more!";
}
#header .title{ //嵌套了
    font-weight:bold;
}
#header_content{//没有嵌套！
    margin:20px;
}
#header > .title{ //嵌套了
    font-weight:bold;
}

媒体查询

唯一的缺点就是,每一个元素都会编译出自己 @media 声明，并不会合并。

/* Less */
#main{
    @media screen{
        @media (max-width:768px){
          width:100px;
        }
    }
    @media tv {
      width:2000px;
    }
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
  #main{
      width:100px; 
  }
}
@media tv{
  #main{
    width:2000px;
  }
}

混合方法

混合：将一系列的规则集引入另一个规则集中

类似函数

无参数的混合

• . 与# 皆可作为 方法前缀。
• 方法后写不写 () 看个人习惯。

类名后面不添加括号，这个样式会在css编译出来并且作用到该类名上。
类名后面添加了括号之后就不是一个选择器了，只是创建了一个mixins，专门给别人用的。

变量声明@ 变量名:变量值，变量使用@变量名（）

.card() { // 等价于 .card
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
  .card();//等价于.card();
}

带参数的混合

可以想象成函数

1. Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。冒号后面的是默认值
2. @arguments代表全部参数，实参列表
3. 传的参数中 必须带着单位。

.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}

方法的匹配模式

• 第一个参数 left 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。
• @_ 如果匹配的参数 是变量，则都会被匹配，所以这个方法中可以放公共样式。

    /* Less */
          .triangle(top,@width:20px,@color:#000){
              border-color:transparent  transparent @color transparent ;
          }
          .triangle(right,@width:20px,@color:#000){
              border-color:transparent @color transparent  transparent ;
          }

          .triangle(bottom,@width:20px,@color:#000){
              border-color:@color transparent  transparent  transparent ;
          }
          .triangle(left,@width:20px,@color:#000){
              border-color:transparent  transparent  transparent @color;
          }
  //@_表示所有都可以匹配,公共样式     .triangle(@_,@width:20px,@color:#000){
              border-style: solid;
              border-width: @width;
}
          #main{
              .triangle(left, 50px, #999)
          }
          /* 生成的 CSS */
          #main{
            border-color:transparent  transparent  transparent #999;
            border-style: solid;
            border-width: 50px;
          }

继承

extend()

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。
extend（这里放规则）是一个函数

/* Less */
 .animation{
     transition: all .3s ease-out;
     .hide{
           transform:scale(0);
       }
}
#main{
       &:extend(.animation);
 }
 /* 生成后的 CSS */
.animation,#main{
      transition: all .3s ease-out;
}
#con{
     color:red
 }

all全局搜索替换

使用选择器匹配到的 全部声明

/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

参考文章
作者：SimonMa
链接：https://juejin.cn/post/6844903520441729037
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。