CSS 预处理器 |较少的

LESS代表精简样式表。它是一个向后兼容的 CSS 语言扩展。它允许我们在 CSS 兼容的语法中使用变量、嵌套、mixin 等功能。 LESS 受 SASS 的影响，并影响了 SASS 较新的“SCSS”语法。 LESS 在 Bootstrap 3 中使用，但在 Bootstrap 4 中被 SASS 取代。

先决条件：

• HTML
• CSS

  系统要求

  • 操作系统：跨平台
  • 浏览器支持： IE (Internet Explorer 8+)、Firefox、Google Chrome、Safari。

  文件类型：所有 LESS 文件都必须具有.less文件扩展名。

  工作： Web 浏览器不理解 LESS 代码本身。这就是为什么您需要 LESS 预处理器将 LESS 代码更改为简单的标准 CSS 代码的原因。

  工作步骤：

  • 将 LESS 代码写入文件。
  • 使用命令lessc input.less output.less将 LESS 代码编译成 CSS 代码。
  • 将编译后的 CSS 文件包含在 html 文件中。

  特征：

  • 变量：变量可用于存储可重用的 CSS 值。它们用@初始化。

    @lt-gray: #ddd;
    @background-dark: #512DA8;
    @carousel-item-height: 300px;
    

  • Mixins： Mixin 是一种将一组属性从一个规则集中包含到另一个规则集中的方法。

    zero-margin {
        margin:0px auto;
        background:@white;
    }
      
    .row-header {
        .zero-margin;
        padding:0px auto;
    }
      
    .row-content {
        .zero-margin;
        border-bottom: 1px ridge;
        min-height:400px;
        padding: 50px 0px 50px 0px;
    }
    

  • 嵌套： LESS 使您能够使用嵌套。

    .carousel {
        background:@background-dark;
      
        .carousel-item {
            height: @carousel-item-height;
            img {
                position: absolute;
                top: 0;
                left: 0;
                min-height: 300px;
            }
        }
    }
    

  • 数学运算：算术运算 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

    .carousel-item {
        height: @carousel-item-height;
    }
      
    .carousel-item .item-large {
        height: @carousel-item-height *2;
    }
    

  • 函数： LESS 提供了多种函数，如数学、列表、字符串、颜色运算、颜色混合等。

    @width: 0.8;
      
    .class {
        width: percentage(@width); // Returns `80%`
        color: saturate(@base, 5%);
        background-color: spin(lighten(@base, 25%), 8);
    }
    

  示例：文件名gfg.html

   
   
       
           
            
           
            
           
                
           
       
        
       
          
  Welcome to GeeksforGeeks. 
              
   
                  
  Algo
   
                  
  DS
   
                  
  Languages
   
                  
  Interviews
   
                  
  CS subjects
   
              
   
          
       
       
                                        
  

  文件名style.less

  @color-primary: #009900;
  @font-pri: Sans-Serif;
  @font-sec: Helvetica;
    
  body{
      color: @color-primary;
      font-size: 40px;
  }
    
  .list{
      font-family: @font-pri;
      font-size: 20px;
      .a{
          font-family: @font-sec;
          font-size: 10px;
      }
  }
  

  我们在编译style.less后得到的文件名style.css

  body {
    color: #009900;
    font-size: 40px;
  }
  .list {
    font-family: Sans-Serif;
    font-size: 20px;
  }
  .list .a {
    font-family: Helvetica;
    font-size: 10px;
  }
  

  输出：
  

  好处：

  • LESS 是跨浏览器兼容的。
  • LESS 提供了一个运算符列表，使用户可以轻松进行编码。
  • 由于使用了变量，维护很容易。

  缺点：

  • 与 SASS 相比，LESS 提供的框架更少。
  • 对于那些不熟悉 CSS 的人来说，这可能会很棘手。