Nodejs中Stylus让CSS也能编程

Nodejs中Stylus让CSS也能编程

前言：

到目前为止，前端开发三个最重要的部分HTML、JavaScript、CSS中，CSS的支持一直是相对较少的。在HTML5+CSS3的时代，我们需要更加灵活地运用CSS，让其成为开发的强大工具。CSS的静态化特性使其难以适应现代Web应用的需求。为了提高开发效率，LESS和SASS等工具应运而生。而Stylus不仅比LESS更强大，而且由于它基于Node.js，更符合我们的开发习惯。

文章目录：

• Stylus介绍
• Stylus安装
• Stylus语法
• 在Express3项目中使用Stylus
• 基于Grunt自动处理

Stylus介绍

Stylus是一种CSS预处理器，可以让你用一种更为简洁和灵活的方式编写CSS。它支持变量、嵌套规则、混合（mixins）、函数等功能，极大地提高了CSS的可维护性和扩展性。

Stylus安装

你可以通过npm（Node Package Manager）来安装Stylus：

npm install stylus -g

或者在项目中本地安装：

npm install stylus --save-dev

Stylus语法

Stylus的基本语法非常简单。以下是一个简单的例子：

// 定义变量
$primary-color = #4CAF50

// 定义混合
button-style()
  padding 10px
  border-radius 5px
  background-color $primary-color
  color white

// 使用混合
.button
  button-style()

.container
  width 100%
  height 100%
  display flex
  flex-direction column
  justify-content center
  align-items center

上述代码定义了一个按钮样式，并在一个类名为.button的元素中使用了这个样式。同时，定义了一个容器样式，用于居中显示内容。

在Express3项目中使用Stylus

假设你已经有一个Express3项目，可以在项目中安装Stylus和相关中间件：

npm install stylus nib --save
npm install stylus-middleware --save-dev

然后，在你的Express应用中配置Stylus中间件：

var express = require('express');
var stylus = require('stylus');

var app = express();

app.use(stylus.middleware({
  src: __dirname + '/public',
  compile: function(str, path) {
    return stylus(str)
      .set('filename', path)
      .use(nib()); // 使用nib扩展
  }
}));

app.get('/', function(req, res) {
  res.render('index');
});

app.listen(3000);

在这个配置中，stylus.middleware会将.styl文件编译为CSS，并将其注入到页面中。

基于Grunt自动处理

Grunt是一个流行的前端任务运行器，可以帮助你自动化一些常见的开发任务。你可以使用grunt-contrib-stylus插件来自动处理Stylus文件。

首先，安装必要的插件：

npm install grunt grunt-contrib-stylus --save-dev

然后，在项目的Gruntfile.js中添加Stylus任务：

module.exports = function(grunt) {
  grunt.initConfig({
    stylus: {
      compile: {
        options: {
          compress: true
        },
        files: {
          'public/css/style.css': 'public/stylus/style.styl'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.registerTask('default', ['stylus']);
};

这样，每次你修改.styl文件时，Grunt都会自动编译并生成对应的CSS文件。

总结

通过Stylus，我们可以更高效地编写和管理CSS，使得CSS代码更加模块化和可复用。结合Express和Grunt，可以进一步提升开发效率，让CSS成为真正的开发利器。