Skip to content

14.md

Latest commit

 

History

History
143 lines (88 loc) · 5.89 KB

14.md

File metadata and controls

143 lines (88 loc) · 5.89 KB

十四、应用 Stylus、Less 和 Sass

对于任何 web 项目来说，使用级联样式表(CCS)都是必须的，但是在复杂的项目中，CSS 样式表的编写和管理非常繁琐。这主要是因为 CSS 不是真正的编程语言。CSS 没有继承、变量或函数。对于普通的 CSS 资源来说，代码重用和可维护性是一个棘手的问题。对于大型项目或旨在在不同项目间共享的 CSS 库来说尤其如此。

解决使用普通 CSS 的痛苦的方法是使用另一种更好的语言，这种语言在构建时(用于生产)或在运行中(用于开发)被编译到 CSS 中。对于后者，Express.js 使用中间件，所以每次网页请求 CSS 资产时，框架都会将更好的 CSS 代码转换为普通 CSS。一些更好的 CSS 库包括 Stylus(我最喜欢的)、Less(Twitter Bootstrap 团队最喜欢的)和 Sass。

因此，Stylus、Less 和 Sass 带来了急需的可重用性(混合、扩展、变量等)。)转换为样式表，这样我们作为开发人员就可以更高效、更容易地重用 CSS 代码。让我们看看当我们使用 Express.js 时，如何利用这一令人惊叹的资源。

关于这些库及其特性的详细介绍超出了本章的范围，因为这些特性非常多，并且将来可能会发生变化(所以最好参考官方文档，本章末尾提供了相关链接)。本章教你如何将库插入 Express.js 应用。这些库本身(在很大程度上)是向后兼容普通 CSS 的；因此，他们有一个宽容、平坦的学习曲线。

Image 提示 Express Generator v4.2.0 支持 Less 和 Stylus 库，但不支持 Sass。

唱针

Stylus 是 Express.js 的兄弟，是最常用的 CSS 框架。 1 我最喜欢它的原因和我喜欢 Jade 的原因一样:它通过最小化工作所需的字符数来实现雄辩。我必须键入的字符越少，我出错的机会就越少，我就有更多的时间来解决实际问题。

要安装 Stylus，请键入并运行

$ npm install stylus@0.42.3 --save.

使用带有app.use和文件夹名称的 Stylus。然后，要应用static中间件，将它包含在您的服务器文件中:

//... Import dependencies and instantiate app
app.use(require('stylus').middleware(__dirname + '/public'));
app.use(express.static(path.join(__dirname, 'public')));
//... Routes and app.listen()

将*.styl文件放入我们公开的文件夹中(例如public或public/css，并使用*.css扩展名将它们包含在 Jade(或任何其他)模板中。对，没错！文件是*.styl，但是在 Jade 或 HTML 代码中，我们要求的是*.css文件。Express.js 会变魔术的！例如，我们在public/stylesheets/中有style.styl，所以我们在 template/HTML 中使用/stylesheets/style.css:

//...
  head
    link(rel='stylesheet', href='/stylesheets/style.css')
//...

或者，在您选择的任何其他模板或纯 HTML 文件中，输入以下内容:

<link rel="stylesheet" href="/stylesheets/style.css"/>

对于从头开始创建的项目，您可以使用生成器命令:

$ express -c stylus express-app-name command

您可以在ch14/stylus文件夹和 GitHub ( https://github.com/azat-co/proexpressjs)上找到支持 Stylus 的项目。

较少的

要在 Express.js 中少用，我们需要less-middleware，它是一个外部 NPM 模块( https://www.npmjs.org/package/less-middleware ) :

$ npm install less-middleware@1.0.0 --save

然后，我们需要在static和路由(ch14/less/app.js)前添加less-middleware :

//... Import dependencies and instantiate app
app.use(require('less-middleware')(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));
//... Routes and app.listen()

假设较少的文件在public/css中，我们可以链接*.css文件，剩下的会自动处理；例如，一个 Jade 模板可能会这样使用:

//...
  head
    link(rel='stylesheet', href='/stylesheets/style.css')
//...

或者，在您选择的任何其他模板中，或者在纯 HTML 文件中，使用以下内容:

<link rel="stylesheet" href="/stylesheets/style.css"/>

对于从头开始创建的项目，您可以使用$ express -c less express-app-name命令。

你可以在ch14/less文件夹和 GitHub ( https://github.com/azat-co/proexpressjs)上找到这个功能较少的项目。

厚颜无耻

要在 Express.js 中使用 Sass ，我们需要 node-sass，它是一个外部 NPM 模块(https://npmjs.org/package/node-sass；GitHub: https://github.com/sass/node-sass ):

$ npm install node-sass@0.6.7 --save

这是我们用于 Sass ( ch14/sass/app.js)的 Express.js 插件:

// ... Import dependencies and instantiate app
app.use(require('node-sass').middleware({
  src: __dirname + '/public',
  dest: __dirname + '/public',
  debug: true,
  outputStyle: 'compressed'
}));
app.use(express.static(path.join(__dirname, 'public')));
// ... Routes and app.listen()

Jade 模板还导入了*.css文件:

link(rel='stylesheet', href='/stylesheets/style.css')

支持 Sass 的项目在ch14/sass文件夹中，也在 GitHub ( https://github.com/azat-co/proexpressjs)上。

摘要

我们在本章中提到的 CSS 框架的大部分代码都与普通 CSS 兼容。换句话说，普通的 CSS 代码在 Stylus、Sass 或更少的软件中也能很好地工作。因此，在您的项目中包含这样一个 CSS 框架没有任何害处。

使用这种框架的好处很多，包括混合、变量、继承等的可用性。这些特性相当广泛，这也是它们没有被包括在本书中的原因。有关完整信息，请参考 Stylus(http://learnboost.github.io/stylus)、Sass ( http://sass-lang.com)和 Less ( http://lesscss.org)的官方在线文档。

下一章提供了一些关于 Express.js 和安全性的重要提示。

1T0】