sass学习

scss

1. SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能
2. sass是一种css开发工具，它可以自定义变量，可以有if语句，可以嵌套
3. 可以在屏幕上显示.scss文件转化的css代码sass test.scss
4. 将显示结果保存成文件sass test.scss test.css
5. SASS允许使用变量，所有变量以$开头，代码如下

        $blue : #1875e7;　
        div {
            color : $blue;
        }

sass

1. sass用ruby去编译
2. sass是css的预处理器
3. 后缀名 sass使用缩进来代替大括号 scss类似 css语法
4. 加监听写完scss之后会自动编译
5. sass提供四种语法规则
   nested嵌套缩进的css代码，默认值
   expanded没有缩进的、扩展的css代码
   compact简洁格式的css代码
   compressed压缩后的css代码

sass变量

1. 变量名中不区别-和_
2. 变量也可以多值定义 $global-color::1px soild red;
3. 变量中也可以嵌套变量 $color:blue;$global-color:1px soild $color;

sass嵌套规则

1. 嵌套规则可以优化选择器,$引用符号

 #header{
         .box{
            color:red;
            p &{
                background-color;yellow;
             }  
             /*p $引用了p标签的所有父元素
             编译p .header .box{}
             */
             a{
                color:blue;
                /**
                *群组选择器
                */
                h1,h2,h3{
                    color:blue;
                }
                &:hover{
                     color:red;
                }
            }
            /**
            *子组合选择器
            */
                       footer{
                  >p{
                color:red;
                  }
            }
        }
}
/**
*属性组合
*/
nav{
  border:{
      style: solid;
      width: 100px;
      color: red;
    }
}
nav{
  border: 1px solid red {
    left: 0px;
     top: 10px;
    }
}

sass导入

1. 导入_header.scss文件 @import "header";
   _header.scss表示文件私有，不单独生成.css文件

sass注释

1. //静默注释 不编译到css文件中
2. /**/ 会编译到文件中

sass使用变量

sass为css引入了变量,sass使用$符号来标识变量，因为它好认、更具有美感，且在css中并无其他用，不会导致与现存或未来的css语法冲突

sass变量声明

sass变量的声明和css属性的声明很像

$highlight-color: #F90;        
$basic-border: 1px solid black;

与css属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在规则块内使用。

$nav-color: #F90;
nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
}
//编译后
nav {
    width: 100px;
    color: #F90;
}

sass默认变量值

$color: red!default;

sass混合器(mixin)

混合器要处理重复用的样式的代码

@mixin border-radius{
  -moz-border-radius: 10px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
header{
  &-nav{
    @include border-radius;
  }
  @include border-radius;
}

编译完成后

header {                         
  -moz-border-radius: 10px;      
  -webkit-border-radius: 5px;    
  -ms-border-radius: 5px;        
  -o-border-radius: 5px;         
  border-radius: 5px; 
  }          
header-nav {                     
  -moz-border-radius: 10px;      
  -webkit-border-radius: 5px;    
  -ms-border-radius: 5px;        
  -o-border-radius: 5px;         
  border-radius: 5px; 
  }          

混合器传入参数

@mixin color($bg_color){
  color: $bg_color;
}
header{
  @include color(red);
}

编译完成后

header {           
  color: red;
}    

sass继承

继承不能传递参数，也不能继承.center下的子标签

.center{
  color: red;
}
.nav{
  @extend .center;
}

编译后

.center, .nav {     
  color: red; 
}

+-+占位符

占位符只保留用到的地方，没有使用的地方不会被编译出来

%center{
  margin: 0 auto;
}
.min{
  @extend %center;
}

编译后

.min {                     
  margin: 0 auto; 
}        

总结

合理使用继承，占位，混合器