Less基础语法学习

刺骨的言语ヽ痛彻心扉 2022-03-27 06:36 350阅读 0赞

**Less（Leaner Style Sheet）是一门向后兼容的CSS扩展语言**

## 1 变量 ##

**less可以定义变量，在编译时自动将变量名替换为用户定义的值。使用`@`定义和使用变量，变量声明可以在开头，也可以在使用变量后，不一定需要预先声明：**

// 变量
    @link-color: #428bca;  //sea blue // 用法 .link { 
      color: @link-color;
    }

.link { 
      color: @link-color;
    }
    
    // 变量
    @link-color: #428bca;  //sea blue

--------------------

**除了在值中使用变量，在选择器名称、属性名、URL和`@import`语句，甚至是其他变量名中都能使用变量：**

@mySelector: banner;
    
    .@{ mySelector} { 
      font-weight: bold;
    }

@images: "../img";
    
    body { 
      color: #444;
      background: url("@{images}/white-sand.png");
    }

@themes: "../../src/themes";
    
    @import "@{ themes}/tidal-wave.less";  //导入less文件

@property: color;
    
    .widget { 
      @{ property}: #0ee; background-@{ property}: #999;
    }

@fnord: "I am fnord.";
    @var: "fnord";
    content: @@var;
    
    //将会编译为
    content: "I am fnord.";

## 2 嵌套 ##

**less文件可以嵌套样式，使代码更符合html结构，更加简洁**

#header { 
      color: black;
    }
    #header .navigation { 
      font-size: 12px;
    }
    #header .logo { 
      width: 300px;
    }

**可以用以下形式编写：**

#header { 
      color: black; .navigation { 
        font-size: 12px;
      }
      .logo { 
        width: 300px;
      }
    }

## 3 混合 ##

**less可以混合样式（类选择器或id选择器）：**

.a, #b { 
      color: red;
    }
    .mixin-class { 
      .a();
    }
    .mixin-id { 
      #b();
    }

**编译为：**

.a, #b { 
      color: red;
    }
    .mixin-class { 
      color: red;
    }
    .mixin-id { 
      color: red;
    }

--------------------

**如果你不想输出混合集，可以在定义时加上一个括号：**

.my-mixin { 
      color: black;
    }
    .my-other-mixin() { 
      background: white;
    }
    .class { 
      .my-mixin;
      .my-other-mixin;
    }

**编译为：**

.my-mixin { 
      color: black;
    }
    .class { 
      color: black;
      background: white;
    }

--------------------

**混合集不仅可以包含各种属性，还可以包含各种选择器:**

.my-hover-mixin() { 
      &:hover {        // &表示父选择器
        border: 1px solid red;
      }
    }
    button { 
      .my-hover-mixin();
    }

**编译为：**

button:hover { 
      border: 1px solid red;
    }

**可以在混合集中嵌套多层`id`和`class`选择器，在使用时进行指定，相当于命名空间：**

#my-library { 
      .my-mixin() { 
        color: black;
      }
    }
    // 可以这样调用 .class { 
      #my-library > .my-mixin();
    }

**下面四种写法效果一样：**

#outer > .inner;
    #outer > .inner();
    #outer.inner;
    #outer.inner();

## 4 函数 ##

**可以在混合集中设置参数，变为函数，在它进行混入操作时，会将变量传递给选择器代码块：**

.border-radius(@radius) { 
      -webkit-border-radius: @radius;
         -moz-border-radius: @radius;
              border-radius: @radius;
    }
    
    #header { 
      .border-radius(4px);
    }
    .button { 
      .border-radius(6px);
    }

**甚至可以设置参数的默认值:**

.border-radius(@radius: 5px) { 
      -webkit-border-radius: @radius;
         -moz-border-radius: @radius;
              border-radius: @radius;
    }
    
    #header { 
      .border-radius;
    }

**如果带有多个参数，可用`；`分隔：**

.mixin(@color) { 
      color-1: @color;
    }
    .mixin(@color; @padding: 2) { 
      color-2: @color;
      padding-2: @padding;
    }
    
    .some .selector div { 
      .mixin(#008000);
    }

**编译为：**

.some .selector div { 
      color-1: #008000;
      color-2: #008000;
      padding-2: 2;
    }

**参数可以为命名参数：**

.mixin(@color: black; @margin: 10px; @padding: 20px) { 
      color: @color;
      margin: @margin;
      padding: @padding;
    }
    
    .class2 { 
      .mixin(#efca44; @padding: 40px);
    }

**编译为：**

.class2 { 
      color: #efca44;
      margin: 10px;
      padding: 40px;
    }

--------------------

**你可以通过传递给混合集的参数，进行模式匹配，改变混合集的行为：**

.mixin(dark; @color) { 
      color: darken(@color, 10%);
    }
    .mixin(light; @color) { 
      color: lighten(@color, 10%);
    }
    .mixin(@_; @color) {    //@_为任何值
      display: block;
    }
    
    @switch: light;
    
    .class { 
      .mixin(@switch; #888);
    }

**上述进行模式匹配，只有第二个和第三个模式匹配成功，编译为：**

.class { 
      color: #a2a2a2;
      display: block;
    }

--------------------

**可以将混合用作函数使用，所有定义在一个mixin中的变量都是可见的，还可以用于调用它的作用域中（除非调用它的作用域定义了同名变量）**

.average(@x, @y) { 
      @average: ((@x + @y) / 2);
    }
    
    div { 
      .average(16px, 50px); // "call" the mixin
      padding: @average;    // use its "return" value
    }

**编译为：**

div { 
      padding: 33px;
    }

## 5 扩展（继承） ##

**扩展与混合相似，但混合编译后的css相当于新增一块相同的样式内容，而扩展是在选择器的后面增加了一个你要引用的选择器名，所以扩展相比要节省更多的资源。**

**扩展有两种语法，效果一样，可以放置在选择器最后面（一定要在最后），也可以放置在规则集中：**

.a:extend(.b) { }
    
    // 上面的代码块与下面这个做一样的事情 .a { 
      &:extend(.b);
    }

**示例：**

nav ul { 
      &:extend(.inline);
      background: blue;
    }
    
    .inline { 
      color: red;
    }

**ul继承了类inline的属性，编译为：**

nav ul { 
      background: blue;
    }
    
    .inline, nav ul { 
      color: red;
    }

**如果要继承多个类，用逗号分隔：**

.e:extend(.f, .g) { }

--------------------

**可以嵌套选择器中的扩展：**

.bucket { 
      tr {  
        color: blue;
      }
    }
    .some-class:extend(.bucket tr) { }

**编译为：**

.bucket tr, .some-class { 
      color: blue;
    }

--------------------

**扩展为精确匹配，它不管选择器是否以星号开头：**

*.class { 
      color: blue;
    }
    .noStar:extend(.class) { } // 不会匹配*.class选择器

## 6 导入 ##

**less文件可以导入其他less或css文件，将其包含进来**

@import "foo";      // foo.less is imported
    @import "foo.less"; // foo.less is imported
    @import "foo.php";  // foo.php imported as a less file
    @import "foo.css";  // statement left in place, as-is

**除此之外less还支持循环、合并、条件以及众多内置函数功能，详情可见**[官网][Link 1]

[Link 1]: https://www.css88.com/doc/less/features/#features-overview-feature