sass基礎

1、sass的安裝和啓用

　　1. 安裝ruby和sass  sass -v  能夠顯示版本號便可；

　　2. 命令行cd到指定的sass文件所在的文件夾目錄下，而後sass --watch main.scss；

　 　　sass生成的css會有四種不一樣的樣式

　　　 --style nested

　　　 --style expanded

　 　　--style compact

　 　　--style compressed

　　　 使用時；在命令行輸入sass --watch main.scss --style compressed這種格式便可。嘗試一下十分容易理解。

2、變量

　　1. 普通變量和默認變量的聲明和調用　

//普通變量
$fontSize: 12px; //聲明
body{
    font-size:$fontSize; //調用
}

//默認變量：默認變量的價值在進行組件化開發的時候會很是有用。
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

　　2. 全局變量和局部變量

$color: orange !default;//定義全局變量(在選擇器、函數、混合宏...的外面定義的變量爲全局變量)

.block {
  color: $color;//調用全局變量
}
em {
  $color: red;//定義局部變量
  a {
    color: $color;//調用局部變量
  }
}
span {
  color: $color;//調用全局變量
}

3、嵌套

 　　1. 選擇器嵌套

//HTML結構：
<header>
<nav>
    <a href=「##」>Home</a>
    <a href=「##」>About</a>
    <a href=「##」>Blog</a>
</nav>
<header>

//Sass: 
nav {
  a {
    color: red;
    //&：上一級選擇器
    header & {
      color:green;
    }
  }  
}

　　2. 屬性嵌套

//屬性嵌套
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

　　3.僞類嵌套

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

 

 4、混合

　　1.  無參混合宏

//不帶參數的混合宏
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
//調用：
.box {
  @include border-radius;
}

　　2.無默認值帶參混合宏

//無默認值的帶參混合宏
@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
//調用：
.box {
  @include border-radius(3px);
}

　　3.有默認值帶參混合宏

//帶默認值
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
//調用
.box {
  @include border-radius(50%);//或者@include border-radius;
}

 　　4. 多個參數帶參混合宏

//帶多個參數（例如經典居中）
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
//調用
.box-center {
  @include center(500px,300px);
}

//參數過多時的複雜混合宏：
@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}
//當 $shadow 的參數數量值大於或等於「 1 」時，表示有多個陰影值，反之調用默認的參數值「 0 0 4px rgba(0,0,0,.3) 」。

//調用聲明的混合宏：
.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}