当前位置:网站首页 / 技术杂谈 / 正文

vue项目中stylus基本使用

时间:2019年06月11日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 553次 | 评论 0

定义 :css预处理器

除了stylus之外还有less和SaaS,他们都是css预处理器,本身并不能被浏览器识别,所以他们最后还是被处理为为css,供浏览器识别。如果想详细了解三者区别的请stylus区别

为什么这里选择stylus呢???

Stylus是来源于Node.js社区,与js关系密切,所以基于Vue.js的开发,我们选择使用Stylus。

①sublime安装stylus支持

②webpack配置

③stylus基本语法

讲解:

sublime安装stylus支持

步骤:

快捷键CTRL+shift+P→在弹出框输入install Package → 回车 → 输入Vue Syntax Highlight→ 回车 →安装完成

重新打开stylus文件即可发现代码已经高亮。

详细步骤请看配置sublime支持vue语法高亮篇

webpack配置

① 下载stylus包依赖

npm install stylus stylus-loader -D

webpack.base.conf.js添加规则:

{
        test: /\.styl$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }

重新执行npm run dev 打包即可。

stylus基本语法

我是做的饿了吗项目,所需语法不多,这里写一下我用到的语法

*.vue

<style scoped lang="stylus" rel="stylesheet/stylus">

这里在style设置了属性后,就可以写stylus语法了。

stylus语法

1、可以省略分号以及冒号

2、缩进代表父子级

一段stylus代码

.list-item
.text-box
    span
        background-color: $background-color
        margin: add(10)
        padding: add(10, 5)
    &:hover
        background-color: powderblue

编译后:

.list-item span,
.text-box span {
  background-color: #add8e6;
  margin: 20px;
  padding: 15px
}
.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

这是我目前用到的基本语法,详细请见官网

参考文档:

https://www.npmjs.com/package/stylus-loader

推荐您阅读更多有关于“stylusvue饿了吗,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。