相思资源网

CSS的预处理框架stylus学习教程
站长资源 2025/11/4 佚名
45 1538
相思资源网 Design By www.200059.com

stylus介绍

是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。

Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

Stylus功能上更为强壮，和js联系更加紧密。所以我选择 Stylus，SASS 玩儿过一段时间，主要是这玩意依赖ruby运行，所以我放弃使用了。
Stylus安装

全局安装，安装之前你需要你安装 nodejs 这个怎么安装搜去哦。


复制代码代码如下:$ npm install stylus -g

这样就算是安装完Stylus了，也可以正常使用Stylus。


复制代码代码如下:Usage: stylus [options] [command] [< in [> out]]
[file|dir ...]
Commands:
help <prop> Opens help info for <prop> in
your default browser. (OS X only)
Options:</p> <p> -u, --use <path> Utilize the stylus plugin at <path>
-i, --interactive Start interactive REPL
-w, --watch Watch file(s) for changes and re-compile
-o, --out <dir> Output to <dir> when passing files
-C, --css <src> [dest] Convert CSS input to Stylus
-I, --include <path> Add <path> to lookup paths
-c, --compress Compress CSS output
-d, --compare Display input along with output
-f, --firebug Emits debug infos in the generated css that
can be used by the FireStylus Firebug plugin
-l, --line-numbers Emits comments in the generated CSS
indicating the corresponding Stylus line
-V, --version Display the version of Stylus
-h, --help Display help information

生成CSS
命令行中

建立一个stylusExample/，再在里面建立 src 目录专门存放 stylus 文件，在里面建立 example.styl 文件。然后在 stylusExample 目录下面执行下面命令


复制代码代码如下:$ stylus --compress src/

输出compiled src/example.css ，这个时候表示你生成成功了，带上--compress参数表示你生成压缩的CSS文件。

$ stylus --css css/example.css css/out.styl CSS转换成styl
$ stylus help box-shadow CSS属性的帮助
$ stylus --css test.css 输出基本名一致的.styl文件
grunt生成

grunt生成 就比较爽歪歪了，具体grunt怎么玩儿，俺写了个教程Grunt教程-前端自动化 可以学习以下。

stylusExample 目录下创建两个文件，这两个文件是grunt必备文件。

    package.json：用于保存项目元数据。
    Gruntfile.js：用于配置或定义任务、加载 Grunt 插件。

package.json 内容

JavaScript Code复制内容到剪贴板
  1. {   
  2.   "name": "test",   
  3.   "version": "1.0.0",   
  4.   "description": "测试的例子",   
  5.   "repository": {   
  6.     "type": "git",   
  7.     "url": ""  
  8.   }   
  9. }  

然后安装必备插件，这些插件让stylus文件变更了自动生成，生成到相对应的文件目录中。如果报错你需要在命令行前面加上sudo，给它最大的执行权限。

npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev ：监视文件变动，做出相应动作。npm
npm install grunt-contrib-stylus --save-dev ：stylus编写styl输出css npm

安装出现这样的警告 npm WARN package.json test@1.0.0 No README data 可以不理会，如果你看着不舒服，你需要在stylusExample目录下面建立一个 README.md 文件并输入内容。也可命令执行 echo "#stylus 学习" README.md

插件执行完毕之后 package.json 文件变成了这样样子滴。

JavaScript Code复制内容到剪贴板
  1. {   
  2.   "name": "test",   
  3.   "version": "1.0.0",   
  4.   "description": "测试的例子",   
  5.   "repository": {   
  6.     "type": "git",   
  7.     "url": ""  
  8.   },   
  9.   "devDependencies": {   
  10.     "grunt": "^0.4.5",   
  11.     "grunt-contrib-stylus": "^0.21.0",   
  12.     "grunt-contrib-watch": "^0.6.1"  
  13.   }   
  14. }  

这个时候你需要使用这些插件儿完成你的任务需要在Gruntfile.js里面写你的执行任务。

JavaScript Code复制内容到剪贴板
  1. /// 包装函数   
  2. module.exports = function(grunt) {   
  3.     // 任务配置,所有插件的配置信息   
  4.     grunt.initConfig({   
  5.         pkg: grunt.file.readJSON('package.json'),   
  6.         stylus:{   
  7.             build: {   
  8.                 options: {   
  9.                     linenos: false,   
  10.                     compress: true  
  11.                 },   
  12.                 files: [{   
  13.                     'css/index.css': ['src/index.styl']   
  14.                 }]   
  15.             }   
  16.         },   
  17.         // watch插件的配置信息   
  18.         watch: {   
  19.             another: {   
  20.                 files: ['css/*','src/*.styl'],   
  21.                 tasks: ['stylus'],   
  22.                 options: {   
  23.                     livereload: 1337   
  24.                 }   
  25.             }   
  26.         }   
  27.     });   
  28.     // 告诉grunt我们将使用插件   
  29.     grunt.loadNpmTasks('grunt-contrib-watch');   
  30.     grunt.loadNpmTasks('grunt-contrib-stylus');   
  31.     // 告诉grunt当我们在终端中输入grunt时需要做些什么   
  32.     grunt.registerTask('default', ['watch']);   
  33. };  

注意读懂上面的哦，目录高对哦，这些没有必要提醒哦，这个时候你可以好好耍一下stylus
Stylus应用

这个时候真正的开始玩耍了哦。
Try Stylus!

stylus

CSS Code复制内容到剪贴板
  1. body,html   
  2.     margin:0   
  3.     padding:0  

编译成

CSS Code复制内容到剪贴板
  1. body,   
  2. html {   
  3.   margin: 0;   
  4.   padding: 0;   
  5. }  

stylus : 强大的功能丰富的语言

CSS Code复制内容到剪贴板
  1. -pos(type, args)   
  2.   i = 0   
  3.   position: unquote(type)   
  4.   {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0   
  5.   {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0   
  6.   
  7. absolute()   
  8.   -pos('absolute', arguments)   
  9.   
  10. fixed()   
  11.   -pos('fixed', arguments)   
  12.   
  13. #prompt  
  14.   absolute: top 150px left 5px  
  15.   width: 200px  
  16.   margin-left: -(@width / 2)   
  17.   
  18. #logo  
  19.   fixed: top left  

编译成

CSS Code复制内容到剪贴板
  1. #prompt {   
  2.   position: absolute;   
  3.   top: 150px;   
  4.   left: 5px;   
  5.   width: 200px;   
  6.   margin-left: -100px;   
  7. }   
  8. #logo {   
  9.   position: fixed;   
  10.   top: 0;   
  11.   left: 0;   
  12. }  

nibStylus插件

stylus

CSS Code复制内容到剪贴板
  1. @import 'nib'  
  2. body   
  3.   background: linear-gradient(20px top, white, black)   

编译成

CSS Code复制内容到剪贴板
  1. body {   
  2.   background: -webkit-linear-gradient(20px top, #fff, #000);   
  3.   background: -moz-linear-gradient(20px top, #fff, #000);   
  4.   background: -o-linear-gradient(20px top, #fff, #000);   
  5.   background: -ms-linear-gradient(20px top, #fff, #000);   
  6.   background: linear-gradient(20px top, #fff, #000);   
  7. }  

Nesting(嵌套)

stylus

CSS Code复制内容到剪贴板
  1. header   
  2.     #logo  
  3.         border:1px solid red  

编译成

header #logo {
  border: 1px solid #f00;
}

Flexible syntax(灵活的用法)

stylus

CSS Code复制内容到剪贴板
  1. body   
  2.     font 14px/1.5 Helvetica, arial, sans-serif  
  3.     button   
  4.     button.button   
  5.     input[type='button']   
  6.     input[type='submit']   
  7.         border-radius 5px  
  8.   
  9. header    
  10.     #logo,div   
  11.         font-size:14px  

编译成

CSS Code复制内容到剪贴板
  1. body {   
  2.   font: 14px/1.5 Helvetica, arial, sans-serif;   
  3. }   
  4. body button,   
  5. body button.button,   
  6. body input[type='button'] {   
  7.   border-radius: 5px;   
  8. }   
  9. header #logo,   
  10. header div {   
  11.   font-size: 14px;   
  12. }  

Flexible &(灵活&)

stylus

CSS Code复制内容到剪贴板
  1. ul   
  2.     li a   
  3.         display: block  
  4.         color: blue  
  5.         padding: 5px  
  6.         html.ie &   
  7.             padding: 6px  
  8.         &:hover   
  9.             color: red  

编译成

CSS Code复制内容到剪贴板
  1. ul li a {   
  2.   display: block;   
  3.   color: #00f;   
  4.   padding: 5px;   
  5. }   
  6. html.ie ul li a {   
  7.   padding: 6px;   
  8. }   
  9. ul li a:hover {   
  10.   color: #f00;   
  11. }  

Functions 方法
返回值

stylus

CSS Code复制内容到剪贴板
  1. border-radius(val)   
  2.     -webkit-border-radius: val   
  3.     -moz-border-radius: val   
  4.     border-radius: val   
  5.   
  6. button    
  7.     border-radius(5px);  

编译成

CSS Code复制内容到剪贴板
  1. button {   
  2.   -webkit-border-radius: 5px;   
  3.   -moz-border-radius: 5px;   
  4.   border-radius: 5px;   
  5. }  

Transparent mixins

不带参数

stylus

CSS Code复制内容到剪贴板
  1. border-radius()   
  2.     -webkit-border-radius: arguments   
  3.     -moz-border-radius: arguments   
  4.     border-radius: arguments   
  5.   
  6. button    
  7.     border-radius: 5px 10px;  

编译成

CSS Code复制内容到剪贴板
  1. button {   
  2.   -webkit-border-radius: 5px 10px;   
  3.   -moz-border-radius: 5px 10px;   
  4.   border-radius: 5px 10px;   
  5. }  

默认参数

不带参数

stylus

CSS Code复制内容到剪贴板
  1. add(a, b = a)   
  2.   a + b   
  3.   
  4. add(10, 5)   
  5. // => 15   
  6.   
  7. add(10)   
  8. // => 20  

函数体

通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。

CSS Code复制内容到剪贴板
  1. add(a, b = a)   
  2.   a = unit(a, px)   
  3.   b = unit(b, px)   
  4.   a + b   
  5.   
  6. add(15%, 10deg)   
  7. // => 25  

多个返回值

通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。

CSS Code复制内容到剪贴板
  1. sizes()   
  2.  15px 10px  
  3.   
  4. sizes()[0]   
  5. // => 15px  

Variables(变量)
常用方法

CSS Code复制内容到剪贴板
  1. stylus   
  2.   
  3. font-size = 14px  
  4.   
  5. body   
  6.     font font-size Arial, sans-seri  

编译成

CSS Code复制内容到剪贴板
  1. body {   
  2.   font: 14px Arial, sans-seri;   
  3. }  

变量放在属性中

stylus

CSS Code复制内容到剪贴板
  1. #prompt  
  2.     position: absolute  
  3.     top: 150px  
  4.     left: 50%   
  5.     width: w = 200px  
  6.     margin-left: -(w / 2)  

编译成

CSS Code复制内容到剪贴板
  1. #prompt {   
  2.   position: absolute;   
  3.   top: 150px;   
  4.   left: 50%;   
  5.   width: 200px;   
  6.   margin-left: -100px;   
  7. }  

块属性访问引用

stylus

CSS Code复制内容到剪贴板
  1. #prompt  
  2.     position: absolute  
  3.     width: 200px  
  4.     margin-left: -(@width / 2)  

编译成

CSS Code复制内容到剪贴板
  1. #prompt {   
  2.   position: absolute;   
  3.   width: 200px;   
  4.   margin-left: -100px;   
  5. }  

属性有条件地定义属性

stylus:指定z-index值为1，但是，只有在z-index之前未指定的时候才这样：

CSS Code复制内容到剪贴板
  1. position()   
  2.   position: arguments   
  3.   z-index: 1 unless @z-index  
  4.   
  5. #logo  
  6.   z-index: 20   
  7.   position: absolute  
  8.   
  9. #logo2  
  10.   position: absolute  

编译成

CSS Code复制内容到剪贴板
  1. #logo {   
  2.   z-index: 20;   
  3.   position: absolute;   
  4. }   
  5. #logo2 {   
  6.   position: absolute;   
  7.   z-index: 1;   
  8. }  

向上冒泡

stylus:属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）下面这个例子，@color被弄成了blue.

CSS Code复制内容到剪贴板
  1. body   
  2.   color: red  
  3.   ul   
  4.     li   
  5.       color: blue  
  6.       a   
  7.         background-color: @color  

编译成

CSS Code复制内容到剪贴板
  1. body {   
  2.   color: #f00;   
  3. }   
  4. body ul li {   
  5.   color: #00f;   
  6. }   
  7. body ul li a {   
  8.   background-color: #00f;   
  9. }  

Iteration(迭代)

stylus

CSS Code复制内容到剪贴板
  1. table   
  2.     for row in 1 2 3 4 5   
  3.         tr:nth-child({row})   
  4.             height: 10px * row  

编译成

C# Code复制内容到剪贴板
  1. table tr:nth-child(1) {   
  2.   height: 10px;   
  3. }   
  4. table tr:nth-child(2) {   
  5.   height: 20px;   
  6. }   
  7. table tr:nth-child(3) {   
  8.   height: 30px;   
  9. }   
  10. table tr:nth-child(4) {   
  11.   height: 40px;   
  12. }   
  13. table tr:nth-child(5) {   
  14.   height: 50px;   
  15. }  

Interpolation(插值)

stylus

CSS Code复制内容到剪贴板
  1. vendors = webkit moz o ms official   
  2. border-radius()   
  3.     for vendor in vendors   
  4.         if vendor == official   
  5.             border-radius: arguments   
  6.         else   
  7.             -{vendor}-border-radius: arguments   
  8. #content   
  9.     border-radius: 5px  

编译成

CSS Code复制内容到剪贴板
  1. #content {   
  2.   -webkit-border-radius: 5px;   
  3.   -moz-border-radius: 5px;   
  4.   -o-border-radius: 5px;   
  5.   -ms-border-radius: 5px;   
  6.   border-radius: 5px;   
  7. }  

Operators(运算符)

运算符优先级
下表运算符优先级，从最高到最低：

.
 []
 ! ~ + -
 is defined
 ** * / %
 + -
 ... ..
 <= >= < >
 in
 == is != is not isnt
 is a
 && and || or
 ?:
 = := ?= += -= *= /= %=
 not
 if unless

@import

@import "reset.css"

当使用@import没有.css扩展，会被认为是Stylus片段（如：@import "mixins/border-radius"）。

@import工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似node的require.paths）。该队列默认为单一路径，从filename选项的dirname衍生而来。 因此，如果你的文件名是/tmp/testing/stylus/main.styl，导入将显现为/tmp/testing/stylus/。

@import也支持索引形式。这意味着当你@import blueprint, 则会理解成blueprint.styl或blueprint/index.styl. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。
@font-face

stylus

CSS Code复制内容到剪贴板
  1. @font-face   
  2.   font-family Geo   
  3.   font-style normal  
  4.   src url(fonts/geo_sans_light/GensansLight.ttf)   
  5.   
  6. .ingeo   
  7.   font-family Geo  

编译成

CSS Code复制内容到剪贴板
  1. @font-face {   
  2.   font-family: Geo;   
  3.   font-style: normal;   
  4.   src: url("fonts/geo_sans_light/GensansLight.ttf");   
  5. }   
  6. .ingeo {   
  7.   font-family: Geo;   
  8. }  

@media

stylus

CSS Code复制内容到剪贴板
  1. @media print  
  2.   #header  
  3.   #footer  
  4.     display none  

编译成

CSS Code复制内容到剪贴板
  1. @media print {   
  2.   #header,   
  3.   #footer {   
  4.     display: none;   
  5.   }   
  6. }   
  7.   
  8. @keyframes  

stylus

CSS Code复制内容到剪贴板
  1. @keyframes pulse   
  2.     0%   
  3.       background-color red  
  4.       transform scale(1.0) rotate(0deg)   
  5.     33%   
  6.       background-color blue  
  7.       -webkit-transform scale(1.1) rotate(-5deg)  

编译成

CSS Code复制内容到剪贴板
  1. @-moz-keyframes pulse {   
  2.   0% {   
  3.     background-color: #f00;   
  4.     transform: scale(1) rotate(0deg);   
  5.   }   
  6.   33% {   
  7.     background-color: #00f;   
  8.     -webkit-transform: scale(1.1) rotate(-5deg);   
  9.   }   
  10. }   
  11. @-webkit-keyframes pulse {   
  12.   0% {   
  13.     background-color: #f00;   
  14.     transform: scale(1) rotate(0deg);   
  15.   }   
  16.   33% {   
  17.     background-color: #00f;   
  18.     -webkit-transform: scale(1.1) rotate(-5deg);   
  19.   }   
  20. }   
  21. @-o-keyframes pulse {   
  22.   0% {   
  23.     background-color: #f00;   
  24.     transform: scale(1) rotate(0deg);   
  25.   }   
  26.   33% {   
  27.     background-color: #00f;   
  28.     -webkit-transform: scale(1.1) rotate(-5deg);   
  29.   }   
  30. }   
  31. @keyframes pulse {   
  32.   0% {   
  33.     background-color: #f00;   
  34.     transform: scale(1) rotate(0deg);   
  35.   }   
  36.   33% {   
  37.     background-color: #00f;   
  38.     -webkit-transform: scale(1.1) rotate(-5deg);   
  39.   }   
  40. }  

CSS字面量(CSS Literal)

stylus

CSS Code复制内容到剪贴板
  1. @css {   
  2.   body {   
  3.     font: 14px;   
  4.   }   
  5. }  

编译成

CSS Code复制内容到剪贴板
  1. body {   
  2.   font: 14px;   
  3. }  
标签：
CSS,stylus
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com

评论“CSS的预处理框架stylus学习教程”

暂无CSS的预处理框架stylus学习教程的评论...
www.200059.com 相思资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/11/4

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
相思资源网 Design By www.200059.com