scss基本用法總結

工作的時候天天用，面試的時候卻沒了思路，這就是懶得下場。多總結，多整理，才是成長得王道啊。最近換工作，把以前該整理得工作梳理一遍。

一、定義變量與引用

$color: #f00;
$a-color: #ff0;
$b_color: #009;

.btn {
  width: 30px;
  height: 20px;
  color: $color;
  border-radius: 5px;
  border: none;
  display: inline-block;
}

二、嵌套css

• 偽類選擇器嵌套需要注意
• 群組選擇器的嵌套
• • 同層相鄰選擇器
• 子元素 >
• ~ 同層全體組合選擇器

.div {
  color: #f8f8f8;
  span {
    display: block;
    font-size: 14px;
  }
  a {
    color: #ddd;
    &:hover {
      color: #f00;
    }
  }
  h2,h3,h4 {
    font-weight: normal;
  }
}

三、注釋方式

這個注釋不會出現在css中，

//這是注釋

這個注冊會出現在css中

/* 這里是注釋 */

四、混合器

• 混合器可以傳遞參數

@mixin rounded-corners($px) {
  -moz-border-radius: $px;
  -webkit-border-radius: $px;
  border-radius: $px;
}

.div {
  @include rounded-corners;
}

五、繼承

a {
  display: block;
}
.disabled {
  color: gray;
  @extend a;
}

六、計算

計算的使用，主要用在寫移動端自適應的時候

1、首先計算移動客戶端屏幕寬度，將document的font-size設置為px

(function init(){
  var fontSize = document.documentElement.clientWidth;
  document.body.parentNode.style.fontSize = fontSize +'px';
})()

2、利用1rem為html的fontsize的大小

// 設計圖是750px的話
$basePx:750;
@function pxCount($px){
  @return $px/$basePx+rem;
}

.div {
  width: pxCount(18);
}

附：rem em px區別

rem em 常見於自適應頁面的尺寸，瀏覽器會根據頁面轉化成像素值；

1rem 為html中fontsize的值
em 它們是相對於使用em單位的元素的字體大小。由於繼承的存在，em很多時候會顯示成相對於父元素的大小。
px 物理像素