Stylus入门教程--实例(1)
2017-01-02 19:47
302 查看
stylus
1、安装与自动编译新建example文件夹
新建/example/dist文件夹
打开命令行界面 输入 stylus -w demo.styl -o dist
-w 是自动监视文件 -o 是将编译后的CSS文件输出到指定文件中
在demo.styl里面写内容,保存即可
2、变量( variables)
默认值
position() position: arguments z-index: 1 unless @z-index #logo z-index: 20 position: absolute #logo2 position: absolute
编译后
#logo { z-index: 20; position: absolute; } #logo2 { position: absolute; z-index: 1; }
就近原则
body color: red ul li color: blue a background-color: @color
编译后
body { color: #f00; } body ul li { color: #00f; } body ul li a { background-color: #00f; }
3、运算符(operators)
Stylus近乎一切都是true, 包括有后缀的单位,甚至0%, 0px等都被认作true.
不过,0在算术上本身是false.
表达式(或“列表”)长度大于1被认为是真。
true例子
0% 0px 1px -1 -1px hey 'hey' (0 0 0) ('' '')
false例子
0 null false ''
实例检查:is a
Stylus提供一个二元运算符叫做is a, 用做类型检查。
15 is a 'unit' // => true #fff is a 'rgba' // => true 15 is a 'rgba' // => false
类似的,我们可以使用type()这个内置函数。
type(#fff) == 'rgba' // => true
注意:color是唯一的特殊情况,当左边是RGBA或者HSLA节点时,都为true.
未完待续!!!
相关文章推荐
- Stylus入门教程--实例(2)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程(一)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- sed教程入门与实例练习(一)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- awk教程入门与实例练习(二)
- 微软 ASP.NET 快速入门实例教程
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- BPEL入门教程和应用实例(推荐)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- SOAP与AXIS2入门教程(附带实例)
- Javascript教程,javascript入门,javascript学习笔记(经典实例)
- AJAX基础入门实例教程(含代码)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- SOAP与AXIS2入门教程(附带实例)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- sed教程入门与实例练习(三)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程