大讲台浅谈sass与compass特性及使用

       1、sass与compass特性
　　sass是CSS扩展的语言，所以sass支持css语法，除此之外，sass还有支持定义变量变量、嵌套、继承等特性。
　　Compass是基于Sass开发的框架，里面集成了很多功能，比如说css3前缀、合成sprites等。
　　sass文件最终要被编译成css文件才能引入到页面中

　　sass与compass结合使用，可以解决书写css时遇到的痛点，首先执行compasswatch来监听sass文件的变化，sass文件一旦有变化，compass会自动执行将sass文件编译成css文件。可以通过ctrl+c退出。

　　@import"compass/reset";

　　打开sass文件夹下面的screen.scss会看到@import"compass/reset";

　　在stylesheets/screen.css文件中会添加reset.css的样式

　　2、变量
　　screen.scss代码
　　$error-color:"red";
　　.error{
　　color:$error-color;
　　font-size:14px;
　　}
　　.danger-error{
　　color:$error-color;
　　font-size:14px;
　　font-weight:bold;
　　}
　　screen.css对应的代码
　　.error{
　　color:"red";
　　font-size:14px;
　　}
　　.danger-error{
　　color:"red";
　　font-size:14px;
　　font-weight:bold;
　　}
　　3、局部文件

　　我们在sass文件夹下新建_variable.scss，把$error-color:"red";放进去。

　　screen.scss代码
　　@import"_variable";
　　.error{
　　color:$error-color;
　　font-size:14px;
　　}
　　.danger-error{
　　color:$error-color;
　　font-size:14px;
　　font-weight:bold;
　　}
　　screen.css对应的代码
　　.error{
　　color:"red";
　　font-size:14px;
　　}
　　.danger-error{
　　color:"red";
　　font-size:14px;
　　font-weight:bold;
　　}
　　4、嵌套
　　嵌套有两种选择器嵌套，样式嵌套
　　screen.scss代码
　　.nav{
　　height:50px;
　　li{
　　height:50px;
　　font:{
　　weight:bold;
　　size:14px;
　　}
　　a{
　　color:#000;
　　&:hover{
　　color:#ccc;
　　};
　　}
　　}
　　}
　　screen.css对应的代码
　　.nav{
　　height:50px;
　　}
　　.navli{
　　height:50px;
　　font-weight:bold;
　　font-size:14px;
　　}
　　.navlia{
　　color:#000;
　　}
　　.navlia:hover{
　　color:#ccc;
　　}
　　5、继承
　　screen.scss代码
　　.error{
　　color:$error-color;
　　font-size:14px;
　　}
　　.danger-error{
　　@extend.error;
　　font-weight:bold;
　　}
　　screen.css对应的代码
　　.error,.danger-error{
　　color:"red";
　　font-size:14px;
　　}
　　.danger-error{
　　font-weight:bold;
　　}
　　6、css3前缀
　　我们需要引入compass提供的css3模块
　　screen.scss代码
　　@import"compass/css3";
　　.rounded{
　　@includeborder-radius(5px);
　　}
　　screen.css对应的代码
　　.rounded{
　　-moz-border-radius:5px;
　　-webkit-border-radius:5px;
　　border-radius:5px;
　　}
　　7、合成sprites
　　首先ctrl+c退出compasswatch

　　在hello-sass-compass项目中新建images/icon,在icon文件夹下添加两张png图片

　　screen.scss代码
　　@import"compass/utilities/sprites";
　　@import"icon/*.png";
　　@includeall-icon-sprites;

　　执行compasscompile，再次打开images文件夹发现，多了一张合并后的sprite。

　　screen.css也生成了对应的代码
　　.icon-sprite,.icon-goTop2,.icon-gotop{
　　background-image:url('/images/icon-s9edae6be74.png');
　　background-repeat:no-repeat;
　　}
　　.icon-goTop2{
　　background-position:00;
　　}
　　background-position:0-64px;
　　}
　　8、config.rb
　　相对地址：从上面我们看到背景图片的url为绝对路径，很多时候我们需要设为相对路径，只需要把config.rb中的
　　http_path="/"
　　改成
　　http_path="../"

　　然后重新执行一次compasscompile即可

　　修改资源存放目录

　　css_dir：css目录
　　sass_dir：sass目录
　　images_dir：images存放目录
　　javascripts_dir：js存放目录

　　修改对应的值，然后重新执行一次compasscompile即可

　　9、压缩css

　　设置output_style=compressed，并把本行注释去掉，然后重新执行一次compasscompile即可