使用LESS快速开发CSS

刺骨的言语ヽ痛彻心扉 2022-05-16 05:04 173阅读 0赞

# 一、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>2018-8-17</li>
 <li><a href="">这里是一个测试的文字</a>2018-8-17</li>
 <li><a href="">这里是一个测试的文字</a>2018-8-17</li>
 <li><a href="">这里是一个测试的文字</a>2018-8-17</li>
 <li><a href="">这里是一个测试的文字</a>2018-8-17</li>
 <li><a href="">这里是一个测试的文字</a>2018-8-17</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中文网][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) 后面的空格；

[Less]: http://lesscss.cn/