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 物理像素