CSS的预处理器 Less与Sass

     CSS预处理器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
     SCSS其语法完全兼容CSS3，并且继承了SCSS的强大功能。由于SCSS是CSS的扩展，因此所有在CSS中正常工作的代码也能在SCSS中正常工作。比CSS多出好多功能如变量、嵌套、混合(Mixin)、继承等。       ----- 简书作者 A 郑家庆

下面罗列一下预处理器的特点：

• 基于 css 的另一种语言
• 通过编译工具编译生成 css
• 添加了很多 css 并不具备的特性 （EG：变量）
• 可提升 css 文件的组织
• 嵌套、反映层级和约束

下面看一个demo：

此demo包涵了 基本用法、mixin 和extend

//	less支持层级书写，  .nav和.content都是wrapper的子集元素
//  & 表示当层层级 的元素
	@fontsize:12px;		// 这两个是定义全局变量  在sass中  将 "@" 改成 "$"
	@bgcolor:red;
						// 定义一个公共class ，如果需要引用直接在牟个类名下引用即可，同时支持改变参数
	.block(@fontsize){
		fontsize:@fontsize;
		border:1px solid red;
		border-radius:4px;
	}
	.wrapper{
	   background: white;
	   .nav{
	     font-size: 12px;
	     .block(@fontsize);		// 如果需要引用，直接在此调用即可，注意结尾是分号。
	   }
	   .content{
	    .block(@fontsize+2px);	// 甚至可以增加 2px
	     font-size: 14px;
	     &:hover{
	       background: red;
	     }
	   }
		// extend	写法一
		.item:extend(.block){
			color:#333;
			// 表示.item 从.block继续扩展
		}
		// extend	写法二
		.item{
			&：extend(.block);
			color:#333;
			// 表示.item 从.block继续扩展
		}
	}

完毕后使用 lessc + less文件名 开始编译（见下图）

可直接将less文件 编译成 css文件
less index.less>index.css
这样做的好处是 直接生成文件

预编译器的loop循环使用
此方式可用于 网格系统等一系列 有规律的 布局