stylus（css预编译器）

zhichangterry 发布于2019-04-23 13:41 / 623人阅读

推荐去张鑫旭大神这里详细了解：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;
  }
}

好像传不了文件，有初始化样式，和兼容样式的两个小文件，传不送来，需要的留言我就行。

专线服务服务器托管预编译阶段模板预编译 webrtc预编译预编译头文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2217.html

大话css预编译处理（一）通读介绍篇

摘要：使用预编译处理的优势使用预处理器，可以提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。一、什么是css预编译处理？ CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。...

Backache 2019-08-30 15:55 评论0 收藏0
大话css预编译处理（二）安装使用篇

摘要：上面的命令会将编译的传递给，你可以将它保存到一个文件中除了上面的命令转译源文件之外，现在还有很多第三方开发的工具，例如是一个前端预处理器语言图形编译工具，支持，帮助开发者更高效地使用它们进行开发。一、Sass、LESS和Stylus的安装 1.Sass的安装 Sass是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以正常使用Sass。只是必须先安装Ruby，然后再安装...

SwordFly 2019-08-30 15:55 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（二）

摘要：解析不同文件使用哪些，这个比较简单，很多文章都有，就不多说了，注意的是，这里的可以换成你自己的预编译器，例如等，或者直接用都行，当然还可以用一种通用方法，后面补上。前情提要上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，最后给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webp...

Lowky 2019-08-01 15:33 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（二）

摘要：解析不同文件使用哪些，这个比较简单，很多文章都有，就不多说了，注意的是，这里的可以换成你自己的预编译器，例如等，或者直接用都行，当然还可以用一种通用方法，后面补上。前情提要上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，最后给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webp...

Object 2019-08-22 10:36 评论0 收藏0