sass

SASS（Syntactically Awesome Stylesheet）语法，敬畏，样式表

是一个CSS预处理器，有助于减少CSS的重复，节省时间。它是更稳定和强大的CSS扩展语言，描述文档的样式干净和结构

• 它是预处理语言，它为CSS提供缩进语法（它自己的语法）
• 它允许更有效地编写代码和易于维护
• 它使用可重复使用的方法，逻辑语句和一些内置函数
• 它提供了比平面CSS好的结构格式的文档样式

注意：

sass需要编译（将代码变成.css文件），所以sass不能直接用于页面，但是它可以极大地提高编程css样式效率

sass要编译，可以用考拉（koala）

sass有两种后缀名文件：.sass .scss（两种语法）

• .sass不能使用大括号和分号
• .scss可以使用

//.sass语法
#sidebar
  width: 30%
  background-color: #faa

只需添加花括号和分号就能转换为 SCSS 语法：

//.scss语法
#sidebar {
  width: 30%;
  background-color: #faa;
}

除了sass，还有less (.less) stylus（.styl）

---

1. 安装考拉koala
2. sass语法

//1.注释

//sass编译无法识别//双斜杠注释
/*sass可以识别带星号的注释，并编译到css文件中去 */


//*************************************************************
//2.编码格式
@charset "UTF-8";


//*************************************************************
//3.定义变量
$size:20px;


//*************************************************************
//4.使用变量
div{
    width:$size;
}


//*************************************************************
//5.层级嵌套

#nav{
    width:100%;
    height:30px;
    ul{
        margin-left:30px;
        li{
            float:left;
            a{
                color:black;
                &:hover{
                    color:red;
                }
            }
        }
    }
}
//5.1符合属性嵌套
div{
    border : {
        color:red;
        width:1px;
        style:solid;
    }
}

//6继承父级标签
a{
    color:black;
    &:hover{
        color:red;
    }
}
//*************************************************************
//7代码重用
//7.1    @extend 扩展继承方式 无参数
.public{
    width:1000px;
    height:300px;
}
#nav{
    @extend .public;
}
#nav2{
    @extend .public;
}

//7.2   @mixin 混合方式  可使用参数
//7.2.1  不使用参数
@mixin kk{         //他没有前缀  类似于元素
    width:30px;
}

div{
    @include kk;          //使用@mixin模式的时候   @mixin 跟 @include
}
//7.2.2  使用参数
@mixin kk2($w){
    width:$w;
    height:30px;
}
span{
    @include kk2(100px);
}
//7.2.3  带默认值的参数
@mixin kk3($w:200px){
    width:$w;
    height:30px;
}
p{
    @include kk3; //给参数，使用参数，不给，使用默认值
}


//*************************************************************
//8  导入   @import     将多个scss文件合并成一个css文件
@import "style2.scss";   //需要注意  要把其他文件导入到koala监听的主文件中



//*************************************************************
//9  @if @else   判断
$theme:white;

div{
   @if($theme==white){
    color:white;
	} 
    @else{
        color:black;
    }
}

//*************************************************************
//10  @for   循环
@for $i from 1 through 3{      //$i是变量     from 1 through 3   是从1到3
                               //from 1 to 3    是从1到2
    .a#{$i}     //.a1   .a2   .a3       #是分割符
    {
        width:100px;
    }
}
//*************************************************************
//11  运算！！！！！！！！加减乘除
.container{
    width:100%;
}
.left{
    width:200px/1366px*100%;
}
.right{
    width:(1366px-200px)/1366px*100%;
}