添加 Less (Leaner Style Sheets)

好的，Less，代表 Leaner Style Sheets，是 CSS 的语言扩展。它看起来很像 CSS，因此可以在更短的时间内非常容易地掌握它。Less 仅对 CSS 语言进行了一些方便的补充，这也是它能如此快速被学会的原因之一。在使用 Less 编写 CSS 时，你可以拥有变量、混合（mixins）、嵌套、嵌套的 @ 规则和冒泡、运算、函数等等；例如，以下是变量的样子：

@width: 10px;
@height: @width + 10px;

这些变量的使用方式与其他编程语言中的变量类似；例如，你可以在普通的 CSS 中以以下方式使用前面的变量：

#header {
  width: @width;
  height: @height;
}

上面的代码将被转换为以下 CSS，我们的浏览器可以理解：

#header {
  width: 10px;
  height: 20px;
}

这非常简单和整洁，不是吗？在 Nuxt 中，你可以通过在 <style> 块中使用 lang 属性将 Less 用作你的 CSS 预处理器：

<style lang="less">
</style>

如果你想将局部样式应用于特定的页面或布局，这种方式很好且易于管理。你应该在 lang 属性之前添加 scoped 属性，以便局部样式仅应用于特定的页面，而不会干扰其他页面中的样式。但是，如果你的多个页面和布局共享一个通用样式，那么你应该在项目 /assets/ 目录中全局创建该样式。因此，让我们通过以下步骤了解如何使用 Less 创建全局样式：

  1. 在你的终端上通过 npm 安装 Less 及其 webpack loader：

    $ npm i less --save-dev
$ npm i less-loader --save-dev

  2. 在 /assets/ 目录下创建一个 main.less 文件，并添加以下样式：

    // assets/less/main.less
@borderWidth: 1px;
@borderStyle: solid;
.cell {
  border: @borderWidth @borderStyle blue;
}
.row {
  border: @borderWidth @borderStyle red;
}

  3. 如下所示，在 Nuxt 配置文件中安装前面的全局样式：

    // nuxt.config.js
export default {
  css: [
    'assets/less/main.less'
  ]
}

  4. 在你的项目中的任何地方应用前面的样式，例如：

// pages/index.vue
<template>
  <div class="row">
    <div class="grid-x">
      <div class="medium-6 cell">
        <img class="welcome" src="~/assets/images/sample-01.jpg">
      </div>
      <div class="medium-6 cell">
        <img class="welcome" src="~/assets/images/sample-02.jpg">
      </div>
    </div>
  </div>
</template>

当你在浏览器上启动你的应用程序时，你应该会看到你刚刚添加到 CSS 类中的边框。这些边框在开发布局时可以用作指导线，因为网格系统下面的网格线是 “不可见的”，如果没有可见的线条，就很难可视化它们。

你可以在我们的 GitHub 存储库的 /chapter-3/nuxt-universal/adding-less/ 中找到前面的代码。

由于我们在本节中讨论 CSS 预处理器，值得一提的是，我们可以在 <style> 块、<template> 块或 <script> 块中使用任何预处理器，例如：

  • 如果你想使用 CoffeeScript 编写 JavaScript，你可以这样做：

    <script lang="coffee">
export default data: ->
  { message: 'hello World' }
</script>

    有关 CoffeeScript 的更多信息，请访问 https://coffeescript.org/。

  • 如果你想在 Nuxt 中使用 Pug 编写 HTML 标签，你可以这样做：

    <template lang="pug">
  h1.blue Greet {{ message }}!
</template>

    有关 Pug 的更多信息，请访问 https://coffeescript.org/。

  • 如果你想使用 Sass（Syntactically Awesome Style Sheets）或 Scss（Sassy Cascaded Style Sheets）而不是 Less 编写 CSS 样式，你可以这样做：

    <style lang="sass">
.blue
  color: blue
</style>
<style lang="scss">
.blue {
  color: blue;
}
</style>

    有关 Sass 和 Scss 的更多信息，请访问 https://coffeescript.org/。

本书中，我们在所有章节中都使用 Less、原生 HTML 和 JavaScript（主要是 ECMAScript 6 或 ECMAScript 2015）。但你可以随意尝试我们提到的任何预处理器。现在让我们看一下在你的 Nuxt 项目中向 HTML 元素添加效果和动画的另一种方法 – jQuery UI。