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;
  }
}