教程 > LESS 教程 > Less 特征 阅读：36

LESS 第n个表达式

返回 Less 扩展

第n个表达式的形式在扩展（extend）中很重要，否则它将选择器视为不同。 第 n 个表达式 1n+2 和 n+2 是等价的，但 extend 将此表达式视为不同。

例如，使用以下代码创建一个 LESS 文件

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}
.child:extend(:nth-child(1n+2)){}

当我们在命令提示符下编译上述代码时，我们将收到如下所示的错误消息。

less 第n个表达式错误

编译后，我们将获得以下 CSS 代码。

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}

在属性选择器中，引用类型并不重要，我们可以在以下示例中看到它

示例

以下示例演示了在 LESS 文件中使用附加到选择器的扩展

extend_syntax.html

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
            <title>迹忆客(jiyik.com) - LESS 扩展 Extend</title>
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to 迹忆客</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

现在，创建文件 style.less。

style.less

[title = tutorialspoint] {
   font-style: italic;
}

[title = 'tutorialspoint'] {
   font-style: italic;
}

[title = "tutorialspoint"] {
   font-style: italic;
}
.style:extend([title = tutorialspoint]) {}
.container:extend([title = 'tutorialspoint']) {}
.img:extend([title = "tutorialspoint"]) {}

我们可以使用以下命令将 style.less 文件编译为 style.css

$ lessc style.less style.css

执行上述命令； 它将使用以下代码自动创建 style.css 文件

style.css

[title=tutorialspoint],
.style,
.container,
.img {
  font-style: italic;
}
[title='tutorialspoint'],
.style,
.container,
.img {
  font-style: italic;
}
[title="tutorialspoint"],
.style,
.container,
.img {
  font-style: italic;
}

按照以下步骤查看上述代码的工作原理

  • 将上述 html 代码保存在 extend_syntax.html 文件中。
  • 在浏览器中打开此 HTML 文件，将显示以下输出。

less 第n个表达式

返回 Less 扩展

查看笔记

扫码一下
查看教程更方便