Sass、Less 、Stylus 的三国演义（1）

        古往今来，生产力的发展，推动着人类社会的进步。人类社会的进步，又主导了劳动工具的革新。
        Css亦然，发展至今，Css3 已经普及，甚至Css 4 的规范，都已经在制定中。功能越来越强大，视觉越来越酷炫，但就开发者而言，开发维护的体验，却并未有明显提升。
        这个时候，css 的各种劳动工具应运而生，Sass、Less、Stylus，像写 JQuery 一样 写样式，这大大的提升了开发速度，代码优雅干净，结构层次分明，维护起来也是 so easy，这对开发者而言，简直像荒漠里，遇到的一股清流。

注释

.list {
  background: #fff;         // 注释内容,不出现在生成的 css 文件中
  border:1px solid #ddd;    /* 注释内容，出现在生成的 css 文件中 */
}

文章样式都是基于 如下 Vue.js 页面演示

<!-- List.vue -->
<template>
	<div class="list">
		<p></p>
		<div class="sass">
			<h2>sass title</h2>
			<p>sass text</p>
		</div>
		<div class="less">
			<h2>less title</h2>
			<p>less text</p>
		</div>
		<div class="stylus">
			<h2>stylus title</h2>
			<p>stylus text</p>
		</div>
	</div>	
</template>

1、引用外部样式表

<!-- Sass -->
<style lang="scss">	
	@import "../assets/css/style.scss";
</style>

<!-- Less -->
<style lang="less">
	@import "../assets/css/style.less";
</style>

<!-- stylus -->
<style lang="Stylus">
	@import "../assets/css/style.styl"
</style>

2、选择器

<!-- Sass -->
<style lang="scss">	
	.sass h2,.sass p{
		background: #ddd;
		&:hover{
			background:blue;
		}
	}	
</style>

<!-- Less -->
<style lang="less">		
	.less h2,.less p{
		background: #ddd;
		&:hover{
			background:blue;
		}
	}	
</style>

<!-- Stylus -->
<style lang="Stylus">		
	.stylus h2
	.stylus p
		background #ddd
		&:hover
			background blue	
</style>

3、变量

变量前面的标识符：

Sass 用的是跟 S 类似的美元符 $，

Less 用的 @，

Stylus 可以不用或者 $

<!-- Sass -->
<style lang="scss">		
	$tip:red;	
	.sass{
		background: #fff;
		color:$tip;	
	}
</style>

<!-- Less -->
<style lang="less">	
	@tip:blue;	
	.less{
		background: #fff;
		color:@tip;		
	}
</style>

<!-- Stylus -->
<style lang="Stylus">	
	tip = green	      /** $tip = green **/	
	.stylus
		background #fff
		color tip    /** color $tip **/			
</style>

4、继承

Sass 和 Stylus 都是:  @extend .class ( Sass：又模仿我的脸！ )；

Less 这回走极简风，直接调用：.class

<!-- Sass -->
<style lang="scss">
	.middle{
		display: table;
		margin:0 auto;
	}
	.sass{
		background: #fff;
		@extend .middle;
	}
</style>

<!-- Less -->
<style lang="less">		
	.middle{
		display: table;
		margin:0 auto;
	}
	.less{
		background: #fff;		
		.middle;
	}
</style>

<!-- Stylus -->
<style lang="Stylus">	
	.middle
		display table
		margin 0 auto
	.stylus
		background #fff		
		@extend .middle
</style>

5.方法

Sass 是比较墨迹的  @mixin + @include，且括号内的参数，需加上美元符 $；

Less 参数同样需要加上 变量标识符 @；

需要注意，当设置默认参数，Sass、Less 是 冒号：$width:3px || @width:3px，Stylus 是 等号：width=3px

<!-- Sass -->
<style lang="scss">		
	@mixin border($width,$color){ /** 默认参数值: @mixin border($width:3px,$color:#f1f1f1){ **/	
		border:$width solid $color;
	}	
	.sass{
		background: #fff;		
		@include border(2px,red)  /** @include border() **/
	}
</style>

<!-- Less -->
<style lang="less">		
	.border(@width,@color){      /** 默认参数值:.border(@width:3px,@color:#f1f1f1){ **/
		border:@width solid @color;
	}	
	.less{
		background: #fff;		
		.border(2px,red);        /** .border(); **/
	}
</style>

<!-- Stylus -->
<style lang="Stylus">	
	border(width,color)         /** 默认参数值:border(width=3px,color=#f1f1f1) **/
		border width solid color
	.stylus
		background #fff		
		border(2px,red)        /** border() **/
</style>

未完待续。。。