scss 初学笔记一变量声明默认的样式嵌套

$width: 300px !default;

$: 变量声明符号;

width: 变量名称;

300px: 赋予变量的值;

!default 代表默认样式

!default:

$primary-size : 26px;

$primary-size : 45px;

$primary-size : 12px !default;

以上css样式代表 12px为默认的样式上面可以从写默认样式的值（即被覆盖）上面两个样式一次由上到下被覆盖跟css的样式规则相同

$color: #000;

header{

 $color: red;

 h1{

  color: $color;  //red;

 }

}

footer{

 color: $color; //#000;

}

css定义可以分为全局变量和局部变量定义的规则: 是否在选择器函数混合宏...的外面定义

scss嵌套分为三种

选择器嵌套

属性嵌套

伪类嵌套

//选择器嵌套
<nav>

  <span>haha</span>

</nav>

nav{

   span{

       color:$color;

   }

}

// 属性嵌套

<div class="box"><div>

.box{

  .border{

    top:1px solid #ccc;

    bottom: 1px solid #000;

  }

}
border-top
magin-top
font-size

//伪类嵌套

.clearfix{

&:before,

&:after {

    content:"";

    display: table;

  }

&:after {

    clear:both;

    overflow: hidden;

  }

}

巴特西