关键词：
介绍
在学习一个 Vue.js 项目的过程中，注意到源码中样式的部分并没有用熟悉的 .css 样式文件，而是发现了代码长得和 CSS 相像的 .styl 文件。这个 .styl 以前没见过啊，你是谁？于是开始一顿搜索。
发现文件后缀是. styl 的这个哥们儿学名叫 stylus，是 CSS 的预处理框架。
CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。
安装
首先，安装 stylus（确保之前已经安装 nodejs ）。
$ npm install stylus
安装之后，运行 stylus -h 可查看帮助。
运行 stylus example.styl 可将 demo.styl 文件编译成 example.css 文件。
基本使用
一段简单的 stylus 代码：
$background-color = lightblue
add (a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b
.list-item
.text-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-color: powderblue
编译后生成的 CSS 代码：
.list-item span, .text-box span background-color: #add8e6; margin: 20px; padding: 15px .list-item:hover, .text-box:hover background-color: #b0e0e6;
由此我们看到了 stylus 代码以及由它编译而成的 CSS 代码,下面来一步一步看一看为啥编译成这样。
变量
$background-color = lightblue
上面的代码声明了变量 $background-color,并为其赋值 lightblue。
声明之后，就可以使用这个变量了：
span
background-color: $background-color
翻译成 CSS 就是：
span background-color: lightblue;
函数
add (a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b
代码声明了函数 add, add 接受两个参数 a 和 b，其中 b 的默认值是 a。
add 中调用了 stylus 的内置函数 unit，此处，unit 函数为 a 和 b赋予了单位 px。
最后将 a 和 b 相加，并返回结果，是的，你没有看错，没有 return，但是返回了结果。
return 居然是可以省略的，很任性了。
函数调用：
span
margin: add(10)
padding: add(10, 5)
翻译成 CSS 就是：
span margin: 20px; padding: 15px;
选择器
.list-item
.text-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-color: powderblue
这一段是与 CSS 代码长得最像的了，虽说最为相像，可有些差别还是一眼就能看出的。
比如没有了 CSS 的花括号，没有了 CSS 的分号，却多了一些奇奇怪怪的缩进，还有那个 & 是什么鬼？还 &:hover ???
预知后事如何，这次接着分解。
先说符号，这里提到的花括号和分号在stylus中是可以省略的，不仅如此，冒号也是可以省略的，color: powderblue 你可以写成 color powderblue,没有问题。
再说缩进，先提出两个有缩进关系的选择器，上面代码片段第二行的 .text-box 和第三行的 span，其实很容易理解，这哥俩写到 CSS 里面是这样的：
.text-box span ...
即 span 是 .text-box 的子选择器，stylus 中以缩进表示这种关系，更加清晰明了，好看。
还有 &，这是个新鲜东西。它是父级的引用，还是来看代码。
stylus这样写:
.list-item
.text-box
&:hover
background-color: powderblue
翻译成 CSS 是这样：
.list-item:hover, .text-box:hover background-color: #b0e0e6;
相信代码中已经能很明确地体现出 & 父级引用的角色了。
同时，我们也不难看出，.list-item 和 .text-box 这两个同一级的选择器在 stylus 中是可以换行写的，只要保证缩进相同，它们就属于同一级的选择器。当然，沿用 CSS 的方式，将同一级的选择器用逗号分隔开在 stylus 中也是可以的。
总结
上面就是 stylus 的基本使用，普遍情况可以用上。
全面的 stylus 知识可以参考官方文档，或者张鑫旭翻译的中文文档 。
vue中使用stylus报错问题(代码片段)
已安装stylus-loader、css-loader、style-loaderwebpack已配置：test:/\.css$/,loader:‘style-loader!css-loader!stylus-loader‘.vue文件使用<stylelang="stylus">.containerwidth:1100pxmargin:0auto</style> 查看详情
花了两天时间学习了sass,less,stylus的基本语法和简单使用,谈谈感受.
花了两天时间学习了sass,less,stylus的基本语法和简单使用,谈谈感受.1.变量的问题 1.1变量的表示sass有个$var,less有@var,stylus的var直接就是var=值,也可以使用$var1.2变量的赋值sass,$var:value, less:@var:valuestylus:var=10 2.缩进的问题sas... 查看详情
markdowngulp，stylus，browsersync，jsuglify(代码片段)
vue引入stylus(代码片段)
项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。首先，先确定项目中是否有path模块：如果没有path模块需要先安装pathnpminstallpath--s... 查看详情
sass，less，stylus(代码片段)
sass，less，stylus三者的用法sasslessstylussasscss编程语言变量，控制，函数创建a.scss在父文件夹下开启这个$a:50px;/*变量*/divwidth:$a;height:50px;background-color:aqua;&:hoverbackground-color:yellow;有以下特点 查看详情
vue:使用stylusless（包括sublime插件支持）(代码片段)
版本：vue2.5.2webpack3.6.0 先说stylus。用npm装个包。npminstallstylusstylus-loader--save-dev然后在.vue文件中使用。<stylelang="stylus">...</style>然后是sublime。需要装两个插件：高亮、自动完成。高亮：https://github.com/billymoon/Stylus自动... 查看详情
less的基本使用(代码片段)
...所周知，less是一门css预处理语言，其他的类似还有scss、Stylus等，和js相似度比较高的就是less了。话不多说，我们来看less的使用。Node.js环境中使用Less：npminstall-gless>lesscstyles.lessstyles.css 我用的vscode,编译后css文件在vscode项... 查看详情
vue使用stylus基本布局
<template> <div class="recommend"> <!-- --> <van-loading v-show="isshow" /> <van-list v-model="loading" :finished="finished" finished-text="没有更多... 查看详情
stylus解决移动端1像素边框的问题(代码片段)
首先我是借用了yo框架的border和他的媒体查询组合这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) yo>lib>core>vari 查看详情
stylus移动端边框1像素问题解决方案(代码片段)
借鉴前端移动框架yo1border($border-width=1px,$border-color=#ccc,$border-style=solid,$radius=null)2//为边框位置提供定位参考3position:relative;4if$border-width==null5$border-width:0;67border-radius:$radius;8&::after 查看详情
2021-09-21wpf上位机37-手写笔事件(代码片段)
手写笔事件（Stylus）1、部分功能与鼠标事件同步。MSDN文档中Stylus与鼠标事件同步2、基本事件Surface-》触笔StylusButtonDownStylusButtonUpStylusDownStylusUpStylusEnterStylusLeaveStylusMove3、手写识别InkCanvas基于TabletPCSDK的IAWinFX.dll、IACore.dll和IALo 查看详情
如何在 calc() 中使用多个变量 Stylus？
】如何在calc()中使用多个变量Stylus？【英文标题】：HowtousemultiplevariablesStylusincalc()?【发布时间】：2016-02-1520:17:15【问题描述】：一切都在标题中。我无法在函数CSScalc()中合并多个Stylus变量。我创建了一个代码Sass，我会在Stylus下... 查看详情
如何在vue中全局引入stylus文件的公共变量(代码片段)
新建一个公共的stylus公共文件添加公共变量，如下：修改下图圈出的文件：具体的修改如下：//generateloaderstringtobeusedwithextracttextpluginfunctiongenerateLoaders(loader,loaderOptions)constloaders=options.usePostCSS?[cssLoader,postcssLoader]:[cssLoader]if(loader)lo... 查看详情
sass和stylus1px解决方案(代码片段)
1.sass1@charset"utf-8";2/**3*@module背景与边框4*@description为元素添加边框（包括1px边框）5*@methodborder6*@version2.0.07*@paramString$border-width指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置<2.0.0>... 查看详情
项目问题解决(代码片段)
1.stylus在webstorm中出现红色波浪线但是不影响浏览器效果，也不报错<stylelang="stylus"scoped>articledisplayflexbackgroundlightblueheight0.64rem//此处数字处.leftfloatleft.centerflex1//此处数字处backgroundwhite.rightfloatright</style>1.style默认的css类似... 查看详情
stylus安装使用图解
Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS... 查看详情
vue中使用lesssassstylus(代码片段)
...ss与sass只是语法规范不一样，具体使用可根据个人习惯。stylus的使用npmistylusstylus-loader-s组件内，设置<stylelang=‘stylus‘> 查看详情
webpack混入全局样式的两种方式(代码片段)
如果你使用stylus预处理器，默认支持import混入一些全局样式。test:/\\.styl(us)?$/,use:[MpxWebpackPlugin.wxssLoader(),loader:'stylus-loader',options:stylusOptions:import:[resolve('./src/theme.styl')],]除此之 查看详情