sass学习入门

导入打包：

代码：

$color    :blue;
$font-size:14px;

body {
    background-color: $color;
    height          : 300px;

    button {
        font-size: $font-size;
    }
    a {
        text-decoration: none;
        color          : #000;
        //    &代替父元素
        &:hover {
            color: red;
        }
    }}
/*   ~  该元素后面所有元素
     >   选择一个元素的直接子元素
     +   选则该元素后紧跟的相邻元素
*/

函数混合： 函数1（被引用的函数）

@mixin  border-radi {
    -webkit-border-radius:50% ;         //兼容
    -moz-border-radius:50% ;            //兼容
    border-radius:50% ;
}

引用（调用函数）：

导出函数 @mixin name{} 引用函数 @include name;

带参数的嵌套：

1、

2、

继承：

//   ======继承
  div{
      border: 1px solid red;
  }
  span{
       @extend div;    //继承div样式
       font-size: 20px;
  }