安装步骤

  • 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. 堆里面的分区：Eden，Survivor（from+ to），老年代，各自的特点

    堆里面分为新生代和老生代(java8取消了永久代,采用了Metaspace),新生代包含Eden+Survivor区,survivor区里面分为from和to区,内存回收时,如果用的是复制算法,从fr ...

  2. 剑指offer32----之字形打印一颗二叉树

    题目 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 思路 在这里我们如果单纯的使用队列去弄的话,会很 ...

  3. 谈谈DevOps和TestOps个人见解

    首先是百度百科和维基百科的解释对DevOps的说明: https://baike.baidu.com/item/devops DevOps是开发运维,而TestOps则测试运维.DevOps(Deve ...

  4. leetcode 分割回文串

    这个方法有问题,这是计算所有子串组成的所有回文子串:而不是所有分割的回文子串: class Solution { public: vector<vector<string>> ...

  5. BS架构和CS架构

    B:browser  浏览器 S:server       服务器 C:client        客户端 BS:浏览器和服务器的关系,通过浏览器来访问服务器.比如:新浪.百度.等等. 优点:只要有浏 ...

  6. golang开发问题

    开发问题: How to find out which types implement which interface in Golang? How do you quickly find the i ...

  7. 基于form表单的极验滑动验证小案例

    01.目录展示 02.url.py urlpatterns = [ path('admin/', admin.site.urls), path('login/',views.login), path( ...

  8. asp.net 配置 web.config 禁用VS2013自带的Browser Link功能

    我的字符被截断了 然后,我修改了下 web.config 的配置,在appSettings节点里加了这个,如下: <appSettings><add key="vs:Ena ...

  9. python学习之模块-模块(五)

    5.10 包 5.10.1 包的概念 [官网解释] Packages are a way of structuring Python's module namespace by using " ...

  10. Tomcat轻量级web服务器

    1.三种web服务器 apache: 动态网站 nginx: 静态网站 tomcat:java开发的程序 2.tomcat安装 官网下载安装包(tomcat 9) 解压并放在/usr/local下 c ...