stylus 介绍

什么是stylus

Stylus是一个CSS的预处理框架，Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。作用和less sass 一样 语法更为简洁

什么是CSS预处理技术？CSS预处理技术，是指用一种新语言用来为CSS 增加可编程的的特性，无需考虑浏览器的兼容性问题。你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强。

Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

基本语法

• 缩排

 /* 编译前 */
body
  h1
    color: #f00
/* 编译后 */
body h1 {
    color: #f00
}

• 变量声明

/* 编译前 */
font-size = 30px
font = font-size "微软雅黑" 
body
  h1
    color: #f00
    font font-size "宋体"
  h2 
    font font  
/* 编译后 */
body h1 {
  color: #f00;
  font: 30px "宋体";
}
body h2 {
    font: 30px "微软雅黑";
}

• mixin 函数

border-1px($color)
   position:absolute 
   color: $color
 
.tab 
  border-1px(rgb(12,22,6))

// 编译后
.tab 
  position: absolute
  color: rgb(12,22,6)