sass

参考-sass入门

1、增加了变量、循环、分支，编译器转回css
2、分局部变量跟全局变量

使用方法

//sass style
//定义一个全局变量
$w: 18px;
.box{
  font-size: $w;
}
//css style
.box{
  font-size: 18px;
}

特殊变量

//sass style
$side: bottom;
.box{
  border-#{$side}: 1px solid #cccccc;
}
//css style
.box{
  border-bottom: 1px solid #cccccc;      
}

嵌套

//sass style
#main p{
  color: #ffffff;
  width: 100%;
  .redbox{
    background-color: #ff0000;
  }
  // &可以代替父容器
  &:hover{
    display: none;
  }
}
//css style
#main p{
  color: #ffffff;
  width: 100%;
}
#main p .redbox{
background-color: #ff0000;
}
#main p:hover{
    display: none;
}