关键词：
推荐去张鑫旭大神这里详细了解：http://www.zhangxinxu.com/jq/stylus/
安装
npm install -g stylus
自动编译
$ stylus -w demo.styl -o dist / demo.styl是styl文件，dist是要生成样式的目录文件名，-w 是自动监视文件 ，-o 是将编译后的CSS文件输出到指定文件中
压缩
stylus --compress < test.styl > test.css //stylus文件编译并压缩成css文件
导入(@import)
@import "./demo1"
变量(Variables)
font-size = 14px
body
font font-size Arial, sans-seri
body { font：14px Arial, sans-seri; }
媒体(@media)
——stylus——
.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px
——css——
.widget { padding: 10px; } @media screen and (min-width: 600px) { .widget { padding: 20px; } }
好像传不了文件，有初始化样式，和兼容样式的两个小文件，传不送来，需要的留言我就行。
stylus在静态页面上的使用经验
前段时间做vue项目，用到了css的提升开发效率的工具stylus，感觉很好用。现在又开始写静态页面了，于是将强大的stylus拿过来继续用。于是就写了这篇使用经验，算是自己总结一下。stylus的安装使用前，我们需要在终端里面进行... 查看详情
stylus基本使用(代码片段)
...开始一顿搜索。发现文件后缀是.styl的这个哥们儿学名叫stylus，是CSS的预处理框架。CSS预处理，顾名思义，预先处理CSS。那stylus咋预先处理呢？stylus给CSS添加了可编程的特性，也就是说，在stylus中可以使用变量、函数、判断、循... 查看详情
css预处理器（框架）初探：sassless和stylus
...在最为普遍的三款CSS预处理器框架，分别是Sass、LessCSS、Stylus。拿less来说，可以在页面上直接使用less文件，但要引用less.js进行解析；同时也可以直接将less输出为css文件。推荐使用后者。最常用的less编译输出css工具：与node.js关... 查看详情
css预编译语言-less
...CSS层叠样式表，它是标记语言，不是编程语言；所有的预编译CSS语言（less/sass…）都是赋予了CSS的面向对象思想LESS的编译LESS叫做预编译CSS：写好的LESS代码浏览器是不能渲染的，需要我们把它编译成为能渲染的CSS才可以开发环境... 查看详情
前端读者|百度前端编码规范（css）
...护。虽然本文档是针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)时，适用的部分也应尽量遵循本文档的约定。2代码风格2.1文件[建议]CSS文件使用无BOM的UTF-8编码。解释：TF-8编码具有更广泛的适应性。BOM在使... 查看详情
CSS中的Rails预编译错误
】CSS中的Rails预编译错误【英文标题】：RailsprecompileerrorinCSS【发布时间】：2012-03-2816:32:39【问题描述】：InvalidCSSafter"":expectedselectororat-rule,was""(in/home/test/www/dispatch/app/assets/stylesheets/application.css)(sass):364上述错误是我的预编译中发... 查看详情
css预编译：less入门
LESS预编译是向下兼容CSS并且为当前CSS扩展功能。LESS官网就是最好的学习资源。 这篇文章是对LESS的一个Overview,仅作为初步了解。因为官网是英文，所以我也尽量顺应它的表达避免歧义。Variablesusevariablesformorecomprihensiblecode:@nic... 查看详情
css预编译器——less的使用
仅介绍在客户端环境下使用的方法1新建test.less并引入.less该文件（和css一样在head处引入），注意rel="stylesheet/less"；1<linkrel="stylesheet/less"type="text/css"href="text.less"/>2下载并引入less.js文件，并在head处引入，注意该文件一定要在.l... 查看详情
laravel中css预编译语言sass快速入门教程
CSS预编译语言概述CSS作为一门样式语言，语法简单，易于上手，但是由于不具备常规编程语言提供的变量、函数、继承等机制，因此很容易写出大量没有逻辑、难以复用和扩展的代码，在日常开发使用中，如果没有完善的编码规... 查看详情
sublime中如何用less实现css预编译
实现css预编译的方式有很多，听说glup很流行而且功能也很强大，但是就目前的工作而言，仅要css预编译和YUIcompress就够了，接下来切入正题Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维... 查看详情
css-stylus
1.stylus对定义CSS的方式进行了改变，允许我们简化CSS的书写格式，同时允许我们定义变量、定义函数来操作CSSCSS处理器类型：sass/less/stylusstylus结构1.1用法<stylelang="stylus">/*引入外部css文件*/@import‘assets/css/reset.css‘/*定义变量... 查看详情
css预编译器：sass（入门），更快的前端开发
Sass扩展了CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass生成良好格式化的CSS代码，易于组织和维护。SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性... 查看详情
在我的 css 中不断遇到资产预编译错误...不知道为啥
】在我的css中不断遇到资产预编译错误...不知道为啥【英文标题】：Keeprunningintoassetprecompileerrorinmycss...notsurewhy在我的css中不断遇到资产预编译错误...不知道为什么【发布时间】：2013-04-3018:37:30【问题描述】：我在预编译资产时... 查看详情
css原生变量var
...就是css变量没有广泛使用的原因吧CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量，方便代码的维护，其实css也有自己原生的变量var：命名方式：--*(以--开头，*代表变量名称)变量名称命名规则：不能以：$，[，^，(，%等... 查看详情
5分钟学会使用less预编译器
5分钟学会使用Less预编译器Less是什么？LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。Less编译器：笔者推荐K... 查看详情
css预编译器：sass（进阶）,更快的前端开发
1.@if @if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块在Sass中除了@if之，还可以配合@elseif和@else一起使用。假设要控制一个元素隐藏或显示，我们就可以... 查看详情
css预处理器stylus分享
CSS预处理器Stylus分享ps:为了分享，内容东拼西凑，并非原创，很多参考了张鑫旭大大翻译的中文文档。这里放上两个不错的stylus链接：https://github.com/leeseean/stylus-style-guide githubstylus语法规范http://blog.hooperui.com/561-2/ 预处理... 查看详情
Rails 似乎要求我在 CSS 对 Development 生效之前进行预编译
】Rails似乎要求我在CSS对Development生效之前进行预编译【英文标题】：RailsseemstorequiremetoprecompilebeforeCSSwilltakeeffectonDevelopment【发布时间】：2013-11-2920:14:27【问题描述】：我在Rails中使用CSS并创建了这个css文件的杰作：h1color:red;但在... 查看详情