sass 语法

Posted 2020-08-29 jishuzhainv

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

/*定义变量*/
$fontStack: Helvetica,sans-serif;
$primaryColor:#333;
body{
  font-family: $fontStack;
  color: $primaryColor;
}
/*嵌套表示层级*/
nav{
  ul{margin: 0;padding: 0;list-style: none;}
  li{display: inline-block;}
  a{display: block;padding: 6px 12px;text-decoration: none;}
}
/*导入*/
@import ‘reset‘;
body{
  font-size: 100%; Helvetica,sans-serif;
  background-color: #ec971f;
}

/*mixin 定义一些代码片段且可传参，方便日后调用*/
@mixin box-sizing($sizing){
  -webkit-box-sizing: $sizing;
  -moz-box-sizing: $sizing;
  box-sizing: $sizing;
}
.box-border{
  border:1px solid #ccc;
  @include box-sizing(border-box);
}
/*扩展/继承*/
.message{
  border: 1px solid darkblue;
  padding: 10px;
  color: #333;
}
.success{
  @extend  .message;
  border-color: red;
}
.error{
  @extend .message;
  border-color:red;
}
.warning{
  @extend .message;
  border-color:yellow;
}
/*sass 中集成了大量的颜色函数，让变换颜色更加简单*/
$linkColor:#08c;
a{
  text-decoration: none;
  color:$linkColor;
  &:hover{
    color:darken($linkColor,10%);
  }
}