安装步骤

  • cnpm install stylus --save-dev
  • cnpm install stylus-loader --save-dev

写法如下：

<style lang="stylus">

  .goods

    display flex

    position absolute

    top 174px

    bottom 46px

    width 100%

    overflow hidden

    .menu-wrapper

      flex 0 0 80px

      width 80px

      background #f3f5f7

      margin-top: 2px;

      .menu-item-selected

        background white

        font-weight 700

        margin-top -1px

</style>

　　

参考文档：http://www.mamicode.com/info-detail-1863165.html

stylus教程：http://www.zhangxinxu.com/jq/stylus/functions.php

vue中使用stylus编写css的更多相关文章

  1. 在vue 中使用Stylus

    概述 什么是Stylus Stylus是一个CSS预处理器. 什么是CSS预处理器 关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个 CSS 预处理器(框架):Sass.LESS 和 Sty ...

  2. vue中全局引入bootstrap.css

    1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...

  3. vue 中如何对公共css、 js 方法进行单文件统一管理，全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  4. vue中使用stylus

    1.创建完成一个初始项目后,通过 npm install stylus -D命令,在项目内安装stylus.(注意:命令结尾 -D 即是 --save-dev 的简写形式) 2.需要安装loader, ...

  5. vue中设置全局的css样式

    只需在main.js    ====import './style.less'   main.js =>>   import Vue from 'vue' import App from ...

  6. 在vue中使用css预编辑器

    vue中使用less 安装less依赖,npm install less less-loader --save vue中使用sass npm install --save-dev sass-loade ...

  7. stylus入门教程，在webstorm中配置stylus

    转载:https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined   stylus特点 富于表现力.具有健壮性.功能丰富.动态编码 不需要写 ...

  8. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  9. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. axios 的用法解析

    axios 的非常好的请求数据方式,利用了 promise 的方式来进行的操作 首先 promise 是非常好的处理 异步请求的方式,且拥有高并发请求的能力 并发请求:出现大量的异步请求后,一起处理 ...

  2. Note: Time clocks and the ordering of events in a distributed system

    http://research.microsoft.com/en-us/um/people/lamport/pubs/time-clocks.pdf 分布式系统的时钟同步是一个非常困难的问题,this ...

  3. Cas服务器以及客户端搭建

    一.搭建cas服务器 官网:http://jasig.github.io/cas/ Cas Server 下载:http://developer.jasig.org/cas/ Cas Client 下 ...

  4. golang context学习记录1

    1.前言 一个请求,可能涉及多个API调用,多个goroutine,如何在多个API 之间,以及多个goroutine之间协作和传递信息,就是一个问题. 比如一个网络请求Request,需要开启一些g ...

  5. electron创建窗口常用配置参数

    { "width": 800,//指定窗口的宽度,单位: 像素值. 默认是 800 "height":600,//指定窗口的高度,单位: 像素值,. 默认是 6 ...

  6. python安装的各种问题

    在windows上安装python下载mis安装即可. 环境用elipse即可,需要下载pydev插件,配置解释器. 如需用到matplotlib,安装顺序为matplot,numpy,dateuti ...

  7. Redis 配置 CONFIG 命令

    redis.conf 文件在 安装目录下 CONFIG 命令查看或设置配置项 先登陆 src/redis-cli -a -a 后面是密码,默认为空,没有密码直接登陆 src/redis-cli 1.查 ...

  8. Ruby小白入门笔记之<Rubymine工具的快捷键>

    智能快捷 Ctrl+Alt+G:弹出Generate Ctrl+Alt+L:格式化代码 Alt+F1:切换视图(Project, Structure, etc.). Alt+F2:弹出预览窗口,可选择 ...

  9. zk 两阶段提交（待完善）

    zk 节点是一个 QuorumPeer,选举结束后,leader 和 follower 各自执行自己的逻辑: org.apache.zookeeper.server.quorum.QuorumPeer ...

  10. 二十二：视图之add_url_rule和app.route

    flask注册视图有两种方式 一:add_url_rule()add_url_rule源码:rule:接口地址view_func=视图函数endpoint=终结点,可以理解为给当前视图取的别名,最直观 ...