Stylus 安装使用图解

Posted 2021-03-04 jtlgb

Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

小编这里分享一下如何安装及使用Stylus

工具/原料

 

• nodeJS

方法/步骤

 

1.  

   首先，我们确认已经安装nodeJS，如果没有或不会的话查看一下我的其他经验文档；

   首先在【开始】选择Node.js command prompt

   
2.  

   弹出的命令框中输入【npm install stylus -g】,出现如图显示内容，显示出版本表示安装完成

   
3.  

   小编这里在E盘，新建了【stylusexample】文件夹，在里面有新建了【src】文件夹，最后在src中新建了一个【example.styl】

   在example.styl中编写stylus代码：

   header

       #logo

           border:1px solid red

   h1

       margin:0

       padding:0

   是的你没有看错，没有分号也没与括号，stylus的语法非常灵活多变

   
4.  

   然后在命令框中进入stylusexample文件夹，输入编译命令把.styl文件编译成.css文件

   stylus --compress src

   注意：有些小伙伴们不知道如何进入E盘的话，很简单，只要在命令行中输入（e:）回车就可以了

   
5.  

   然后在查看一下我们的文件夹中是否已经出现了一个新编译的.css文件？