sacc和less

sass 是一个预编译css扩展语言。
css具备可编程属性。
sass 文件不能直接运行，需要借助工具，编译成 css文件才能运行。
安装 sass ： npm install -g sass
验证安装是否成功：sass --version
怎么使用 sass 编译 sass scss规范文件
sass: 没有括号{} 没有分号;
scss: 有{} ；比较符合我们使用习惯。
sass sass文件目录:css文件目录
使用sass 命令会完成编译 生成一个后缀为.map文件 ，map 是一个css映射文件。 sass 是通过其他scss sass文件编译后生成的， 生成css文件里面如果出现问题，map就会告诉你代码问题出在 那个sass文件中 方便你去改sass文件。
sass中需要掌握的东西：
1 变量 通过 $定义 $变量名: 变量值;
2 嵌套
父类css结构中 直接 写你的子元素的css

	.nav{
		width:1200px;
		height: 30px;
		ul{
			list-style: none;
			li {
				float: left;
				padding: 5px 10px;
				list-style: none;
				a {
					text-decoration: none;
					&:link, &:visited{
						color:#333;
					}
				}
			}
		}
	}

&引用父对象 &:link, &:visited
sass命令 命令如何实现监控。监控 sass文件更新 自动生成css
sass --watch sass文件 css文件
开启sass文件更新监控 自动生成css
sass sass目录 css目录
sass --watch sass目录 css目录
属性嵌套： 一个长属性 分开来写：方便于把变量放进去。
3 混合 (继承)
mixin 混合： 变量只能封装一个值。
想封装多个值，一块被使用。js中的 function () {}
混合成为公共样式。
把封装好的css代码和我当前css代码混成成为新的css代码

				1 没有参数
				定义:
				@mixin button () {
					width:100px;
					height: 48px;
					text-align: center;
					color: #333;
				}
				调用:
				.buttton-primary {
					@include button();
				}
				2 传参数
				定义
				@mixin button ($color:#333, $bgcolor:#eee) {
					width:100px;
					height: 48px;
					text-align: center;
					color:$color;
					background: $bgcolor;
					border: {
						width: 1px;
						color: #f60;
						style: solid;
					}
				}
				调用:
				.button-primary {
					@include button(#fff, green);
				}
				.button-warning {
					@include button(#fff, #f60);
				}
				继承: 	
				可以别的样式的样式代码。
				@extend 其他选择器
				.box{
					width:100px;
					height: 200px;
					text-align: center;
					border: 1px solid #f60;
				}
				.box2 {
					@extend .box;
					border: 2px solid #f40;
				}

4 导入
实现了模块化。
@import “模块的名字” //不用写后缀 写也行
sass文件可以采用模块的方式去写 不同部分
最后由import 导入到一个合成文件中。
由这个合成文件 编译 得到完整css
1 如果你的各个部分sass文件被编译 需要加上_前缀 sass命令 就不编译了
2 import时候 文件名不用加_
--------less（新）–和sass 想干的工作 解决问题是一样的------------------------
less 不存在批量监控更新编译 的原因是
他没有区分编译谁和不编译谁的符号(sass 中_去区分)
也是css 预编译语言。
变量： @定义
嵌套： 和sass 一样
混合: 不一样
1 不带参数
2 带参数

.container(@width:200px) {  //不是类样式
    width: @width;
    height: 200px;;
}
.box2 {
    .container(300px);
}

导入: （基本一样） @import ‘文件名’ 不用写后缀
安装： npm install -g less
要使用的命令并不是 less 而是 lessc
基本使用： lessc less文件 css文件