这几天又在完善主题(你又开始了¿),感觉差不多了,然后突然看到了那一团css揉在一起,缠在一起,就跟一坨谢特一样¿。然后就想起来了默认主题(Landscape)似乎是用过什么手段能整理css的。
然后就过去翻了下,后缀名都是.styl,查了一下是用了Stylus
Stylus

感觉还可以就开始转换了,先参考Landscape,把结构给明确了。
明确结构
主要根据layout里的结构来写,这样也比较方便。

接下来就是创建各个文件然后开始转换。但是直接手动转换肯定是不现实的,前一篇文章有讲到管理Sublime包的工具,里面应该会有相关的包吧,顺便安装下高亮。然后还真找到了,转换工具。复制css然后Ctrl+V粘贴就能自动转换了。不一会就搞定了,分别将各个结构的css放到对应的文件里,有点小问题就是自适应的@media转换识别有点毛病,自己手动改改就可以。

丢上去后本地预览,有点问题就是这个转换的顺序会出现问题,哪个先转完了哪个就先输入,所以会出现某些地方样式错乱。也没什么大影响,但总归是bug,修还是要的。
这里的工具不靠谱就换一个,在线生成什么的还是很好的。CSS TO Stylus
有个同样的小问题也是@media,依然手动改,最后预览是没有问题了,顺序没问题,也没有报错,就丢上去了。

后来发现可以加上几个变量方便自定义,具体大概是这样的。应该很容易看懂,注意变量要位于引用变量之前的地方,跟js一样。
设置变量
引用变量

需要注意的

缩进很严格,同一个文件内只能使用一种缩进方式,比如用空格缩进就不能使用Tab。
冒号可有可无,分号可有可无,逗号可有可无,括号可有可无。

官方介绍

1
2
3
4
5
6
7
8
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

省略掉花括号怎么样?

1
2
3
4
5
6
7
body
font: 12px Helvetica, Arial, sans-serif;

a.button
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

再把分号省略掉呢?

1
2
3
4
5
6
7
body
font: 12px Helvetica, Arial, sans-serif

a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px

保持整洁

1
2
3
4
5
6
7
8
9
10
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments

body
font: 12px Helvetica, Arial, sans-serif

a.button
border-radius(5px)

让混合(mixin)变得透明怎么样?

1
2
3
4
5
6
7
8
9
10
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments

body
font: 12px Helvetica, Arial, sans-serif

a.button
border-radius: 5px

创建与分享

1
2
3
4
5
6
7
@import 'vendor'

body
font: 12px Helvetica, Arial, sans-serif

a.button
border-radius: 5px

甚至是语法内函数!

1
2
3
4
5
6
sum(nums...)
sum = 0
sum += n for n in nums

sum(1 2 3 4)
// => 10

如果所有这些都是可选的又将怎样?

1
2
3
4
5
6
fonts = Helvetica, Arial, sans-serif

body {
padding: 50px;
font: 14px/1.4 fonts;
}