Sass介绍

Sass是CSS拓展语言（CSS Preprocessor）

什么是CSS拓展语言

CSS拓展语言出现的原因

有哪些CSS拓展语言

• Less
• Sass
• Stylus

使用

将一个Sass文件编译成CSS

            				sass input.scss output.css
            			

命令 Sass 监视文件的改动并更新 CSS

						sass --watch input.scss:output.css
            			

如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录

            				sass --watch app/sass:public/stylesheets
            			

语法

变量

	$color: #f00;
	.color-red {
	    color: $color;
	}
            			

嵌套

	.box{
	    .box-header{
		        background-color: green;
		        &:hover{
		            background-color: red;
		        }
	    }
	}
            			

Mixin

    @mixin rounded($vert, $horz, $radius: 10px) {
        border-#{$vert}-#{$horz}-radius: $radius;
        -moz-border-radius-#{$vert}#{$horz}: $radius;
        -webkit-border-#{$vert}-#{$horz}-radius: $radius;
    }