Sass入门-基本特性

四、基本特性

• 声明变量
  使用$开头：

  

  在值后面加！default表示默认值。eg：
  $btn-primary-color : #fff !default;
  在默认变量之前重新声明后即可覆盖它：

      $baseLineHeight: 2;    $baseLineHeight: 1.5 !default;    body{        line-height: $baseLineHeight;     }    编译后的css代码：    body{        line-height:2;    }

• 局部变量和全局变量

  //SCSS$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).block {  color: $color;//调用全局变量}em {  $color: red;//定义局部变量  a {    color: $color;//调用局部变量  }}span {  color: $color;//调用全局变量}

• 嵌套
  1.选择器嵌套

  <header><nav>    <a href=“##”>Home</a>    <a href=“##”>About</a>    <a href=“##”>Blog</a></nav><header>如果我们想选中header中的a标签，在css中这样写：nav a{    color:red;}header nav a{    color:green;}那么在Sass中可以这样写：nav{    a{        color:red;        header &{            color:green;        }    }}

  2.属性嵌套

  .box {    border-top: 1px solid red;    border-bottom: 1px solid green;}那么在Sass中可以这样写：.box {  border: {   top: 1px solid red;   bottom: 1px solid green;  }}

  3.伪类嵌套

  .clearfix{&:before,&:after {    content:"";    display: table;  }&:after {    clear:both;    overflow: hidden;  }}编译后：clearfix:before, .clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;  overflow: hidden;}

  注意：避免选择器嵌套！