使用LESS快速开发CSS

一、say hello & intro

1 less介绍

LESS CSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

二、less语法详解

1 less中的注释

  /**/ 这种注释是会编译到.css文件中的

  // 这种注释是不会被编译到.css文件中的（建议使用这种注释，方便以后维护less文件）

2 变量

​@test_width:300px;
body {
    width: @test_width;
    height: @test_width;
}

less中的变量

less中想声明变量的话 一定要用@开头 例如： @变量名：值；

3 混合

  简单的混合，就是把.border定义的样式混合到.box中（.border类似于申明）

@test_witd:300px;
.box {
  width: @test_witd;
  height: @test_witd;
  background-color: #ffff00;

  .border;
}

// 混合
.border {
  border: 5px solid pink;
}

复制的混合，带参数的

// 混合 - 可带参数的

.border_02(@border_width){
  border: @border_width solid yellow;
}

.test_hunhe{
  .border_02(30px)
}

//混合 - 默认带值
.border_03(@border_width:10px){
  border: @border_width solid green;
}

.test_hunhe_03{
  .border_03();
}

// 混合的例子
.border_radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.radius_test{
  width: 100px;
  height: 100px;
  background-color: red;
  .border_radius(50%)
}

4 匹配模式

--相当于JS中的if

• 但不完全是

--满足条件后才能匹配

// 匹配模式

.triangle(top,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: @c transparent transparent  transparent;
  border-style: solid dashed dashed  dashed;
}
.triangle(left,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent  @c transparent transparent;
  border-style: dashed solid dashed  dashed;
}
.triangle(right,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent transparent transparent  @c ;
  border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao{
  .triangle(right,10px,blue);
}

匹配模式-定位

//匹配模式 - 定位
.pos(r){
  position: relative;
}
.pos(a){
  position: absolute;
}
.pos(f){
  position: fixed;
}

.pipei{
  width: 50px;
  height: 50px;
  background-color: green;
  .pos(a)
}

5 运算

 

// 运算

@test_01:300px;

.box_02{
  width: @test_01 + 20;
}

 没有必须规定带单位进行运算

6 嵌套规则

HTML：

 <ul class="list">
        <li><a href="">这里是一个测试的文字</a><span>2018-8-17</span></li>
        <li><a href="">这里是一个测试的文字</a><span>2018-8-17</span></li>
        <li><a href="">这里是一个测试的文字</a><span>2018-8-17</span></li>
        <li><a href="">这里是一个测试的文字</a><span>2018-8-17</span></li>
        <li><a href="">这里是一个测试的文字</a><span>2018-8-17</span></li>
        <li><a href="">这里是一个测试的文字</a><span>2018-8-17</span></li>
 </ul>

LESS：

// 嵌套
ul.list{
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style:none;

  li{
      height: 30px;
      line-height: 30px;
      background-color: pink;
      margin-bottom: 5px;
      padding: 0 10px;
  }
  a{
      float: left;
      //hover事件：&代表它的上一层选择器
      &:hover{
          color: red;
      }
  }
  span{
    float: right;
  }
}

 能减少嵌套的就减少嵌套，能提高加载速度(所以把a、span提到和li一层)

hover事件：&代表它的上一层选择器

7 @arguments变量

// arguments变量
.border_arg(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.test_arguments{
  .border_arg(40px)
}

8 避免编译、！important以及总结

  - 有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法

  - 要输出这样的值我们可以在字符串前加上一个~

• 例如：width：~' calc(100%-35)'

// 避免编译

.test_03{
  width: ~'calc(300px - 30px)';
}

 important: 提高优先级

//important
.test_important {
  .border_radius()!important;
  .border_arg()!important;
}

 Less中文网站：Less中文网

注意：

1. 清除浮动的after：需要使用&:after放在里面

   .clearfix{
       &:after{
           content:"";
           display:block;
           clear:both;
       }
       zoom:1;
   }

2. less导入其他样式文件

​
@import "ku"; //less文件

@import (less)"a.css"  //css文件

​

• 导入 less ： @import "less"; 导入less文件后面不需要加后缀；

• 导入 css： @import (less) "body.css"; 注意 (less) 后面的空格；