技术实战:在Vue.js中使用Stylus预处理器

什么是Stylus

Stylus是一个CSS预处理器。

什么是CSS预处理器

关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

现在你应该对CSS预处理器有个大概的认识了,总的来说,CSS预处理器为CSS提供了更多的更加灵活的可编程性,是不是很棒!

选型

那么在SaaS,Less和Stylus中,为什么选择后者呢?因为Stylus是来源于Node.js社区,与js关系密切,所以基于Vue.js的开发,我们选择使用Stylus。

配置Stylus环境

安装

命令行中打cnpm install stylus

image.png

在让编辑器支持Stylus

编辑器选型

对于编辑器的选择之前一直没有单独说过,这里稍微提一下,对于写Vue或者前端代码,这里推荐的有三个编辑器

WebStorm

VSCode

Sublime Text

对于电脑配置较高的内存较大的,推荐使用WebStorm,这个编辑器很智能也很庞大,对于电脑配置稍低的,推荐使用后面两个。

另外,在编辑代码时,当时用后两种编辑器时,很依赖各种各样的插件

当你觉得使用的时候很不爽的时候

就去网上搜相应的插件

比如我需要Vue高亮语法的插件,就去搜索安装Vue插件

那么对于Stylus,我们也只需要安装Stylus的插件就可以了。

关于安装插件,这里有几个连接

Sublime Text插件安装方法和常用插件

Sublime Text写Vue

然后具体的不多说,大家可以百度谷歌

在编辑器安装支持Stylus

这个就是在编辑器安装Stylus高亮插件,sublime直接在搜索安装Stylus,WebStorm不需要单独安装插件,新建Stylus文件是,只需要New->stylesheet->stylus即可

PS.Stylus的拓展名是.styl

初次使用

初始化项目

vue init webpack stylus

cd stylus

cnpm install

cnpm install stylus --save-dev

cnpm install stylus-loader --save-dev

image.png

cnpm run dev

使用Stylus

在.vue文件中使用

image.png

引入单独的.styl文件

在写css之前,我新建了几个div

新建.styl文件

image.png

编写Stylus

引入文件

image.png

查看效果

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181005A0ZXDE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券