CSS的预处理框架stylus学习好代码教程

互联网
人生从来没有真正的绝境。无论遭受多少艰辛，无论经历多少苦难，只要一个人的心中还怀着一粒信念的种子，那么总有一天，他就能走出困境，让生命重新开花结果。

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]isa'unit'?args[i+=1]:0
  5. {args[i+=1]}:args[i+1]isa'unit'?args[i+=1]:0
  7. absolute()
  8. -pos('absolute',arguments)
  10. fixed()
  11. -pos('fixed',arguments)
  13. #prompt
  14. absolute:top150pxleft5px
  15. width:200px
  16. margin-left:-(@width/2)
  18. #logo
  19. fixed:topleft

编译成

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(20pxtop,white,black)

编译成

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

Nesting(嵌套)

stylus

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

编译成

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

Flexible syntax(灵活的用法)

stylus

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

编译成

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

Flexible &(灵活&)

stylus

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

编译成

CSS Code复制内容到剪贴板
  1. ullia{
  2. display:block;
  3. color:#00f;
  4. padding:5px;
  5. }
  6. html.ieullia{
  7. padding:6px;
  8. }
  9. ullia: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
  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
  6. button
  7. border-radius:5px10px;

编译成

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

默认参数

不带参数

stylus

CSS Code复制内容到剪贴板
  1. add(a,b=a)
  2. a+b
  4. add(10,5)
  5. //=>15
  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
  6. add(15%,10deg)
  7. //=>25

多个返回值

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

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

Variables(变量)
常用方法

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

编译成

CSS Code复制内容到剪贴板
  1. body{
  2. font:14pxArial,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:1unless@z-index
  5. #logo
  6. z-index:20
  7. position:absolute
  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. bodyulli{
  5. color:#00f;
  6. }
  7. bodyullia{
  8. background-color:#00f;
  9. }

Iteration(迭代)

stylus

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

编译成

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

Interpolation(插值)

stylus

CSS Code复制内容到剪贴板
  1. vendors=webkitmozomsofficial
  2. border-radius()
  3. forvendorinvendors
  4. ifvendor==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-familyGeo
  3. font-stylenormal
  4. srcurl(fonts/geo_sans_light/GensansLight.ttf)
  6. .ingeo
  7. font-familyGeo

编译成

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. @mediaprint
  2. #header
  3. #footer
  4. displaynone

编译成

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

stylus

CSS Code复制内容到剪贴板
  1. @keyframespulse
  2. 0%
  3. background-colorred
  4. transformscale(1.0)rotate(0deg)
  5. 33%
  6. background-colorblue
  7. -webkit-transformscale(1.1)rotate(-5deg)

编译成

CSS Code复制内容到剪贴板
  1. @-moz-keyframespulse{
  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-keyframespulse{
  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-keyframespulse{
  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. @keyframespulse{
  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学习好代码教程就介绍到这了。人不是生来被打败的——海明威更多相关CSS的预处理框架stylus学习好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题