安装步骤

  • 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. 关于JDK8对List的分组汇总

    1. 跟据某个属性分组OfficeId: Map<String, List<IncomeSumPojo>> collect = list.stream().collect(Co ...

  2. 基于dubbo的分布式系统（一）安装docker

    1.安装过程参考: #uname -r  查看内核是否高于3.10 #sudo yum update root权限登陆确保yum包最新 #sudo yum remove docker docker-c ...

  3. JS 类和继承

    function User(name, pass) { this.name = name this.pass = pass } User.prototype.showName = function ( ...

  4. MQTT服务器特性支持详情

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  5. 《统计学习方法（李航）》讲义 第03章 k近邻法

    k 近邻法(k-nearest neighbor,k-NN) 是一种基本分类与回归方法.本书只讨论分类问题中的k近邻法.k近邻法的输入为实例的特征向量,对应于特征空间的点;输出为实例的类别,可以取多类 ...

  6. DataV数据可视化功能特性

    使用DataV制作实时销售数据可视化大屏 (本课程可以帮助数据分析师学习数据可视化大屏的制作,包括制作的方法.设计原则等基础知识,并提供一个微项目,使用数加的DataV基于ABC公司的经营数据,快速构 ...

  7. spark 笔记 16： BlockManager

    先看一下原理性的文章:http://jerryshao.me/architecture/2013/10/08/spark-storage-module-analysis/ ,http://jerrys ...

  8. orcal 中的orcal用法

    ROWID是数据的详细地址,通过rowid,Oracle可以快速的定位某行具体的数据的位置. ROWID可以分为物理rowid和逻辑rowid两种.普通的堆表中的rowid是物理rowid,索引组织表 ...

  9. 分组 vs 联合

    // 分组 function groupBy(groups) { return groups.reduce((pre, cur) => { pre[cur.groupId] = (pre[cur ...

  10. MutablePropertyValues的简单用法

    代码例子: package com.cy.model; import lombok.Getter; import lombok.Setter; import lombok.ToString; @Get ...