CSS的预处理框架stylus是怎样的

生成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

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

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

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

1. body,html

2. margin:0

3. padding:0

编译成

CSS

1. body,

2. html {

3. margin: 0;

4. padding: 0;

5. }

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

CSS

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. absolute()

7. -pos('absolute', arguments)

8. fixed()

9. -pos('fixed', arguments)

10. #prompt

11. absolute: top 150px left 5px

12. width: 200px

13. margin-left: -(@width / 2)

14. #logo

15. fixed: top left

编译成

CSS

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

1. @import 'nib'

2. body

3. background: linear-gradient(20px top, white, black)

编译成

CSS

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

1. header

2. #logo

3. border:1px solid red

编译成

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

Flexible syntax(灵活的用法)

stylus

CSS

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. header

9. #logo,div

10. font-size:14px

编译成

CSS

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

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

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

1. border-radius(val)

2. -webkit-border-radius: val

3. -moz-border-radius: val

4. border-radius: val

5. button

6. border-radius(5px);

编译成

CSS

1. button {

2. -webkit-border-radius: 5px;

3. -moz-border-radius: 5px;

4. border-radius: 5px;

5. }

Transparent mixins

不带参数

stylus

CSS

1. border-radius()

2. -webkit-border-radius: arguments

3. -moz-border-radius: arguments

4. border-radius: arguments

5. button

6. border-radius: 5px 10px;

编译成

CSS

1. button {

2. -webkit-border-radius: 5px 10px;

3. -moz-border-radius: 5px 10px;

4. border-radius: 5px 10px;

5. }

默认参数

不带参数

stylus

CSS

1. add(a, b = a)

2. a + b

3. add(10, 5)

4. // => 15

5. add(10)

6. // => 20

函数体

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

CSS Code复制内容到剪贴板

1. add(a, b = a)

2. a = unit(a, px)

3. b = unit(b, px)

4. a + b

5. add(15%, 10deg)

6. // => 25

多个返回值

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

CSS

1. sizes()

2. 15px 10px

3. sizes()[0]

4. // => 15px

Variables(变量)
常用方法

CSS

1. stylus

2. font-size = 14px

3. body

4. font font-size Arial, sans-seri

编译成

CSS

1. body {

2. font: 14px Arial, sans-seri;

3. }

变量放在属性中

stylus

CSS

1. #prompt

2. position: absolute

3. top: 150px

4. left: 50%

5. width: w = 200px

6. margin-left: -(w / 2)

编译成

CSS

1. #prompt {

2. position: absolute;

3. top: 150px;

4. left: 50%;

5. width: 200px;

6. margin-left: -100px;

7. }

块属性访问引用

stylus

CSS

1. #prompt

2. position: absolute

3. width: 200px

4. margin-left: -(@width / 2)

编译成

CSS

1. #prompt {

2. position: absolute;

3. width: 200px;

4. margin-left: -100px;

5. }

属性有条件地定义属性

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

CSS

1. position()

2. position: arguments

3. z-index: 1 unless @z-index

4. #logo

5. z-index: 20

6. position: absolute

7. #logo2

8. position: absolute

编译成

CSS

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

1. body

2. color: red

3. ul

4. li

5. color: blue

6. a

7. background-color: @color

编译成

CSS

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

table

for row in 1 2 3 4 5

tr:nth-child({row})

height: 10px * row

编译

C#

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

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

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

1. @font-face

2. font-family Geo

3. font-style normal

4. src url(fonts/geo_sans_light/GensansLight.ttf)

5. .ingeo

6. font-family Geo

编译成

CSS

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

1. @media print

2. #header

3. #footer

4. display none

编译成

CSS

1. @media print {

2. #header,

3. #footer {

4. display: none;

5. }

6. }

7. @keyframes

stylus

CSS

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

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

1. @css {

2. body {

3. font: 14px;

4. }

5. }

编译成

CSS

1. body {

2. font: 14px;

3. }

看完上述内容，你们掌握CSS的预处理框架stylus是怎样的的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！