Stylus入门教程--实例（1）

stylus

1、安装与自动编译

新建example文件夹
新建/example/dist文件夹
打开命令行界面输入 stylus -w demo.styl -o dist
-w 是自动监视文件 -o 是将编译后的CSS文件输出到指定文件中
在demo.styl里面写内容，保存即可

2、变量（ variables）

默认值

position()position: argumentsz-index: 1 unless @z-index#logoz-index: 20position: absolute#logo2position: absolute

编译后

#logo {z-index: 20;position: absolute;
}
#logo2 {position: absolute;z-index: 1;
}

就近原则

bodycolor: redullicolor: blueabackground-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'
// => true15 is a 'rgba'
// => false

类似的，我们可以使用type()这个内置函数。

 type(#fff) == 'rgba'
// => true

注意：color是唯一的特殊情况，当左边是RGBA或者HSLA节点时，都为true.

未完待续！！！

Stylus入门教程--实例（1）相关推荐

Linux shell 脚本入门教程+实例
原文:http://www.wiquan.com/article/136 为什么要进行shell编程在Linux系统中,虽然有各种各样的图形化接口工具,但是shell仍然是一个非常灵活的工具.She ...
入门前端-《JavaScript 语言入门教程-实例对象和New对象》
new 命令的原理使用new命令时,它后面的函数依次执行下面的步骤. 创建一个空对象,作为将要返回的对象实例. 将这个空对象的原型,指向构造函数的prototype属性. 将这个空对象赋值给函数内部 ...
Scrapy入门教程实例
Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. scrapy的整体框架如下所示: Scrapy主要 ...
80篇各ajax框架入门教程
AJAX经典入门教程,入门实例,入门代码收藏. *VS2008 Ajax.NET快速入门教程* (2008-3-25) [本站原创]Ajax!?!入门教程之道 (2008-4-13) [本站原创]Aj ...
单片机独立式按键c语言程序,(原创)51单片机C语言程序设计--速学教程实例(入门篇)之独立按键(查询)...
(原创)51单片机C语言程序设计--速学教程实例(入门篇)之独立按键(查询) /************************************************************ ...
wxpython中文教程_wxPython中文教程简单入门加实例
wxPython中文教程简单入门加实例博客分类: Python 2 / Wxpython wxPythonPython编程浏览器脚本 wx.Window 是一个基类,许多构件从它继承.包括 wx.F ...
java编程输出平行四边形_JAVA语言入门教程之打印图形实例——打印平行四边形...
本文主要向大家介绍了JAVA语言入门教程之打印图形实例--打印平行四边形,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 输出平行四边形: public class Parallelo ...
python全栈工程师 pdf_python全栈工程师项目开发实例实战入门教程百度云
python全栈工程师项目开发实例实战入门教程百度云课程目录: 开学典礼 pycharm的基本使用 Python基本语法数值类型数据及运算字符串的基本操作字符串的常用方法列表的基本使用列表 ...
矩阵键盘逐行扫描C语言,(原创)51单片机C语言程序设计--速学教程实例(入门篇)之矩阵键盘(逐行扫描法).pdf...
(原创)51单片机C语言程序设计--速学教程实例(入门篇)之矩阵键盘(逐行扫描法).pdf /***************************************************** ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...

Stylus入门教程--实例（1）

stylus

Stylus入门教程--实例（1）相关推荐

最新文章

热门文章