安装步骤

  • 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. Java 内部类、成员类、局部类、匿名类等

    Java各种称呼类详解 Java有各种各样类,内部类.嵌套类.成员类.局部类(本地类).静态类.匿名类.文件类以及这些组合起来的称呼类,成员内部类,成员匿名类,成员嵌套类,本地匿名类等,真是多的不行, ...

  2. Gradle项目构建工具学习笔记（持续更新中。。。）

    1.gradle的安装 1)从官网下载gradle,然后解压 2)在系统环境变量新建GRADLE_HOME 3)将%GRADLE_HOME%\bin加入PATH中 2.验证是否安装成功 gradle ...

  3. 第六周总结&实验报告四

    这周是放国庆节的假,所有没有进行深入的学习,只是写了个实验的题目,也发现了自己在基础上还是要加强学习. 实验四 类的继承 一. 实验目的 (1) 掌握类的继承方法: (2) 变量的继承和覆盖,方法的继 ...

  4. 界面之下：还原真实的 MV* 模式

    界面之下:还原真实的MV*模式 作者:戴嘉华 转载请注明出处并保留原文链接( https://github.com/livoras/blog/issues/11 )和作者信息. 目录: 前言 MVC ...

  5. windows spark1.6

    jdk1.7 scala 2.10.5 spark 1.6.1 http://spark.apache.org/downloads.html hadoop 2.6.4 只需要留bin https:// ...

  6. SELECT list is not in GROUP BY clause and contains nonaggregated

    安装了mysql5.7,用group by 查询时抛出如下异常 SQLSTATE[42000]: Syntax error or access violation: 1055 Expression # ...

  7. 万变的Web，不变的CRUD

    用JSP+Servlet写程序,到Struts,Spring,hibernate写程序,到现在Spring Cloud分布式写程序,到底有多大区别,是不是还在写CRUD? 看着JD上各种要求,简直是S ...

  8. 深度学习----现今主流GAN原理总结及对比

    原文地址:https://blog.csdn.net/Sakura55/article/details/81514828 1.GAN 先来看看公式:             GAN网络主要由两个网络构 ...

  9. 【html】合并单元格，并居中显示文本

     现状: 想要实现的效果: 代码实现: <tr> <td colspan=" align="center">用例失败为0,无测试详情</td ...

  10. Docker的应用场景

    1.实现docker在浏览器中被访问. 框架和工具:docker+NOVNC 2.持续集成,自动化测试,发布 Github(或者码云) + Jenkins  + docker 3.弹性扩容 marat ...