scss基本用法總結

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

1、定義變量與引用

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

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

2、嵌套css

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

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

3、註釋方式

這個註釋不會出如今css中，

//這是註釋

這個註冊會出如今css中

/* 這裏是註釋 */

4、混合器

• 混合器能夠傳遞參數

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

.div {
  @include rounded-corners;
}

5、繼承

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

6、計算

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

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

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

二、利用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 物理像素