学习stylus【1】介绍

stylus介绍

stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

.styl 是 stylus 的文件扩展名，支持多样性的CSS语法。

参考文档
官方API

首先我们通过修改Hexo的LandScape模板来学习 stylus

【找到.styl文件】打开根目录下的 themes/landscape/source/css目录，在这里我们可以看到很多的后缀名为.styl的文件。这就是stylus编写的CSS文件了。
【试着修改.styl文件】可以使用任意一款文本编辑器来修改 .styl 文件

body
  background: color-background
  font: font-size font-sans
  -webkit-text-size-adjust: 100%

stylus选择器
例1

body
  background: color-background

  /* -- 相当于--
这里面省略了{花括号}，省略了最后的;分号，一些场合冒号也可以省略如 color red 相当于color: red;
   */
body{background: color-background;}

我们做个试验，将所有文本设置为红色，为了不影响原有样式，我们在下面追加一行。

1 2	/background: color-background 好在这个注释符号一直好用/ background red

返回到页面会看到以下状态

例2
我们修改文章内连接鼠标放置时的颜色改变，默认是颜色无改变，加下划线

我们打开themes/landscape/source/css/_partial 目录下的article.styl文件找到a 并添加color red

a
  color: color-link
  text-decoration: none
  &:hover
    text-decoration: underline
    color red /*添加hover颜色*/

从上面的代码结构我们能够分析出以下几点

缩进，代替了以前的花括号
分组，选择器分组还是使用 , 号也可以使用换行
继承，使用&为伪类添加属性