Less语法学习-未完待续

冷不防 2021-09-16 17:10 545阅读 0赞

# Less语法学习 #

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

**变量**

说明：声明变量的时候，使用@开头，并且对于声明的变量，可以进行运算。注意：变量实际上是“常量”，因为它们只能定义一次。举例如下：

@nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    
    #header {
      color: @light-blue;
    }

输出：

#header {
      color: #6c94be;
    }

**混入**

Mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集中的方法。

.bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

我们希望在其他规则集中使用这些属性。好吧，我们只需要删除我们想要属性的类的名称。

#menu a {
      color: #111;
      .bordered;
    }
    
    .post a {
      color: red;
      .bordered;
    }

**嵌套规则**

Less使您能够使用嵌套代替或与级联结合使用。另外，将伪选择器与mixin捆绑在一起。经典的clearfix hack，重写为mixin（`&`代表当前的选择器父级）：

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

转化后：

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

与伪选择器结合使用，举例：

.clearfix {
      display: block;
      zoom: 1;
    
      &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

**嵌套指令和冒泡**

media或keyframe可以以与选择器相同的方式嵌套指令。指令位于顶部，相对于同一规则集内其他元素的相对顺序保持不变。这叫做冒泡。  
有条件的指令，例如@Media，@supports也@document有选择器复制到他们的身体：  
个人通俗理解：**选择器（.screen-color）写在最外面，内部的@media嵌套可以理解为 “&” ，即 and 。**

.screen-color {
      @media screen {
        color: green;
        @media (min-width: 768px) {
          color: red;
        }
      }
      @media tv {
        color: black;
      }
    }

转化后：

@media screen {
      .screen-color {
        color: green;
      }
    }
    @media screen and (min-width: 768px) {
      .screen-color {
        color: red;
      }
    }
    @media tv {
      .screen-color {
        color: black;
      }
    }

其余非条件指令，例如font-face或keyframes，被冒泡了。他们的身体没有改变：

#a {
      color: blue;
      @font-face {
        src: made-up-url;
      }
      padding: 2 2 2 2;
    }

转化后：

#a {
      color: blue;
    }
    @font-face {
      src: made-up-url;
    }
    #a {
      padding: 2 2 2 2;
    }

**操作**

算术运算+，-，\*，/可以在任意数量，颜色或可变的操作。如果可能，数学运算会考虑单位并在添加，减去或比较数字之前转换数字。结果最左边是明确说明的单位类型。如果转换不可能或没有意义，则忽略单位。不可能转换的示例：px到cm或rad到％。

**功能**

Less提供了各种功能，可以转换颜色，操纵字符串和进行数学运算。它们完全记录在函数参考中。  
示例：使用百分比将0.5％转换为50％，将基色的饱和度增加5％，然后将背景颜色设置为减轻25％并旋转8度的颜色：

@base: #f04615;
    @width: 0.5;
    
    .class {
      width: percentage(@width); // returns `50%`
      color: saturate(@base, 5%);
      background-color: spin(lighten(@base, 25%), 8);
    }

**命名空间和访问器（暂不理解）**

**范围（暂不理解）**

**评论（暂不理解）**

**输入**

导入工作几乎与预期一致。您可以导入.less文件，其中的所有变量都可用。可以选择为.less文件指定扩展名。

@import "library"; // library.less
    @import "typo.css";

**可变插值**

变量可控制CSS规则中的值，也可在其他地方使用，例如选择器名称，属性名称，URL和@import语句。

**   选择**

// Variables
    @my-selector: banner;
    
    // Usage
    .@{my-selector} {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }

转化为：

.banner {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }

**网址**

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

**导入语句**

// Variables
    @themes: "../../src/themes";
    // Usage
    @import "@{themes}/tidal-wave.less";

**属性**

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

**变量名称**

使用变量定义变量

@fnord:  "I am fnord.";
    @var:    "fnord";
    content: @@var;
    // 输出结果为content: "I am fnord.";

**延迟加载（咱不理解）**