stylus学习

介绍：

stylus借鉴了sass的一些思想，变量/混合/函数/继承/扩展/插值等等特性在stylus里都有，但是在写法上，stylus追求极致的简单，花括号/冒号/分号以及一些逗号统统都可以省略，变量也不需要像less一样以@开头，或者向sass一样以$开头，看起来就像普通的字符串一样，甚至于调用混合时的参数的小括号也可以省略。这样的特性之下，使得stylus的结构看起来更加清晰。

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

//编译后：
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;
}

stylus支持现代编程语言的函数

sum(nums...)
  sum = 0
  sum += n for n in nums
  
sum(1,2,3,4)
// => 10

字符串插值。在stylus中，字符串插值不需要特殊的写法：

fonts = helvetica, arial, sans-serif

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

//编译后：
body {
  padding: 50px;
  font: 14px/1.4 helvetica, arial, sans-serif;
}

你只需要简单的将变量放到你想放到的位置就行了。而在less和sass中，你却不得不将变量包裹在@{}或者#{}中，而且，stylus还支持更加强大的选择器插值和属性插值.

安装：

使用非常简单
安装stylus，使用npm安装,stylus和stylus-loader，一个都不能少
npm install stylus stylus-loader --save-dev

使用：

介绍一种相对简单的使用方法

使用webstorm设置如图可以自动将.styl文件转成.css文件

 

接下来只需要编写.styl文件就会自动编译出.css文件。如图

vue中使用stylus, 命令行中输入cnpm i stylus --save-dev（可以使用npm）

在 .vue文件中使用, 添加使用 scoped 属性表示样式只对当前组件有效

<style scoped lang="stylus">
  html,body
    margin 0
    padding 0
    div
       color #333
</style>

后续使用再后面的blog介绍