• 定义变量,比如一键切换主题色

    1.创建xxx.styl文件,定义变量

$bgColor = #00bcg4

    2.在其他页面的style区域里,先引入这个xxx.styl文件

<style>
@import '../../xxx.styl' //样式中引入样式,要在import前加@
.header
height:3rem
width:.87rem
     color:$bgColor
</style>
  • 层级嵌套形式的书写样式,而不必像css一样加一堆的父级限制,直接嵌进父级

    .header
      display:felx
      height:80px
      width:100px
      .header-left
        line-height:60px
    height:60px
        float:left
      .header-right
        wigth:30px
  • scoped关键字限制了这里的样式只对当前页面有效

    <style lang="stylus" scoped>

stylus快速上手的更多相关文章

  1. 【Python五篇慢慢弹】快速上手学python

    快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...

  2. 快速上手Unity原生Json库

    现在新版的Unity(印象中是从5.3开始)已经提供了原生的Json库,以前一直使用LitJson,研究了一下Unity用的JsonUtility工具类的使用,发现使用还挺方便的,所以打算把项目中的J ...

  3. [译]:Xamarin.Android开发入门——Hello,Android Multiscreen快速上手

    原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...

  4. [译]:Xamarin.Android开发入门——Hello,Android快速上手

    返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...

  5. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

  6. Git版本控制Windows版快速上手

    说到版本控制,之前用过VSS,SVN,Git接触不久,感觉用着还行.写篇博文给大家分享一下使用Git的小经验,让大家对Git快速上手. 说白了Git就是一个控制版本的工具,其实没想象中的那么复杂,咱在 ...

  7. Objective-C快速上手

    最近在开发iOS程序,这篇博文的内容是刚学习Objective-C时做的笔记,力图达到用最短的时间了解OC并使用OC.Objective-C是OS X 和 iOS平台上面的主要编程语言,它是C语言的超 ...

  8. Netron开发快速上手(二):Netron序列化

    Netron是一个C#开源图形库,可以帮助开发人员开发出类似Visio的作图软件.本文继前文”Netron开发快速上手(一)“讨论如何利用Netron里的序列化功能快速保存自己开发的图形对象. 一个用 ...

  9. Netron开发快速上手(一):GraphControl,Shape,Connector和Connection

    版权所有,引用请注明出处:<<http://www.cnblogs.com/dragon/p/5203663.html >> 本文所用示例下载FlowChart.zip 一个用 ...

随机推荐

  1. CDMA与OFDM之技术比较

    频谱利用率.支持高速率多媒体服务.系统容量.抗多径信道干扰等因素是目前大多数固定宽带无线接入设备商在选择CDMA(码分多址)或OFDM(正交 频分复用)作为点到多点(PMP)的关键技术时的主要出发点. ...

  2. css雪碧图-css精灵图

    先将图片拼接在一张图上.类似实现的效果图 图片地址为合并后的图片地址,通过background-position调整背景图的位置.效果如: HTML: <div class="logo ...

  3. POJ 2104 K-th Number ( 求取区间 K 大值 || 主席树 || 离线线段树)

    题意 : 给出一个含有 N 个数的序列,然后有 M 次问询,每次问询包含 ( L, R, K ) 要求你给出 L 到 R 这个区间的第 K 大是几 分析 : 求取区间 K 大值是个经典的问题,可以使用 ...

  4. HOJ 2315 Time(模拟)

    Description Kim是一个掌控时间的大师.不同于一般人,他习惯使用秒来计算时间.如果你问他现在是几点,他会告诉你现在是今天的xxxx秒.Mik想要考考Kim.他想知道从某一天的00:00:0 ...

  5. Activiti创建表(三)

    创建Mysql 创建 mysql 数据库 activiti(名字任意):CREATE DATABASE activiti DEFAULT CHARACTER SET utf8; pom.xml < ...

  6. flex几种多列布局

    基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; ...

  7. linux设置开机启动程序?

    /etc/rc.d/init.d 是 /etc/init.d的目标链接. 如果/etc/rc.d下面没有 rc.local脚本文件, 则需要 手动创建: 而 /etc/bashrc 是在登陆bash ...

  8. 002-js-cookie

    cookie操作方法 1.写cookie //JS操作cookies方法! //写cookies function setCookie(name,value) { var Days = 30; var ...

  9. 小白学数据分析--留存率分析_I次日留存率突然下降了50%

    小白学数据分析--留存率分析_I次日留存率突然下降了50% 最近在做留存分析时,遇到了不少的情况,也经常会有人问我,为什么我的游戏突然次日留存率降了一半.如果留存率是单单作为一个简单的指标的话,那对你 ...

  10. IntelliJ IDEA的常用设置

    1.设置IDEA主题样式 ①设置方法: ②效果:设置为Darcula之后整体的风格就是暗黑主题,如上图. 2.设置编辑区主题 ①设置方法: 注:由于IDEA自带的编辑区主题比较少,想要更多的编辑区主题 ...