2020-12-24vw_rem和sass

---

一、em和rem

• em:
  相对单位，它需要一个参考属性。
  当前元素的字体大小。
• rem：
  相对单位 root em。 参考值为：HTML根标签的font-size的值。
  iPhone5 320px 上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/320 一半
  iPhoneX 375px 187.5
• rem布局的原理：
  动态修改html根标签中的font-size值。
• 实现方式：
  1.通过js
  2.通过vw。

二、vw和vh

• 百分比布局缺点：
  1.计算百分数不方便。
  2.多层嵌套时使用不方便。

• vw：
  1vw = 屏幕宽度的百分之一。

• vh:
  1vh = 屏幕高度的百分之一。

• 区别：
  百分比参照的是父盒子
  vw/vh 参照的是屏幕。
  假设：拿到的设计稿是3.75rem的。 我们有个盒子 100*50；
  使用vw表示1rem。
  26.6667vw=1rem;
  26.67vw=26.67% 1.1041rem

• 过程方法：
  1.拿到一个设计稿，假设这张设计稿是宽3.75rem。
  2.其中一个盒子30px*100px。但是因为px是绝对单位，在别的移动端设备中，显示的效果就会不同。
  3.应该使用百分比形式去表示盒子的宽高。
  4.可选方案：
  方法1 百分数 不好计算，特别是多个盒子嵌套时。
  方法2 vw ，引入rem更好计算

• 总结：
  100px/375=26.67%=26.67vw计算麻烦
  设100px相当于1rem，则100px为1rem，30px为0.3rem
  设置HTML根标签的font-size的值为26.67vm
  盒子用rem来表示

 html {
        /* 对于375的设计稿来说，100px=1rem */
        font-size: 26.67vw;
    }
    .box {
        margin: 0 auto;
        /* 30px*100px的一个盒子 */
        width: 0.3rem;
        height: 1rem;
        background-color: brown;
    }

三、sass

• css一些问题：
  1.css需要书写大量冗余的代码。
  2.不方便维护。
• sass：
  作为css的一种扩展语言。它没有减少css的功能，而是在css的基础上引入了一些css原本没有的功能（变量，Mixin,运算，函数，嵌套）。
• 使用sass优点：
  能让咱们写更少的代码，来实现更多的功能。

1.变量

格式：以$符号开头，跟变量名即可。
定义了一个变量。 变量名：变量值。
如果变量嵌套在字符串中，则必须写在#{}里面。

$bc-color:red;
$m-r:right;

2.嵌套

①在css中直接使用标签嵌套。
②有些时候需要使用父选择器，这个时候则使用 & 占位符。
③如果变量嵌套在字符串中，则必须写在#{}里面。
④属性嵌套：复合属性可以使用。

.button-group {
//直接使用标签嵌套
        button {
            font-size: 24px;
            border: none;
            border-radius: 4px;
            color: #ffffff;
            box-shadow: 0px 5px 5px black;
            padding: 10px 20px;
            //如果变量嵌套在字符串中，则必须写在#{}里面。
            margin-#{$m-r}: 40px;
            //需要使用父选择器，这个时候则使用 & 占位符。
            &:hover {
                animation: jumpjump 1s;
            }
            //属性嵌套：复合属性可以使用。
            border: {
                style: solid;
                left: {
                    width: 4px;
                    color: #888888;
                }
            }
        }
    }

3.注释

• 单行注释：
  // 不会保留到编译后的css文件中。
• 多行注释：
  /* */ 会保留到编译后的css文件，压缩文件则没有。
• 重要注释：
  /*！ */ 会保留到编译后的css文件，压缩文件也会保留，一般用于版权声明。

4.mixin和继承

定义一个 混合。
参数名:默认值
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; … }

@mixin boxStyle($bc, $fc:red) {
    background-color: $bc;
    p {
        color: $fc;
    }
}

.box,
.box2 {
    width: 200px;
    height: 200px;
    @include boxStyle(pink, salmon);
    p {
        width: 100%;
        height: 100%;
        line-height: 200px;
        text-align: center;
    }
}

5.继承

可以让一个选择器继承另一个选择器的所有样式。
@extend

.box2 {
    @extend .box;
    @include boxStyle(seagreen, tomato)
}

6.计算

div {
    padding: 2px *4;
    margin: 20px + 2px;
    font-size: 16px - 2;
    // 除法必须加小括号
    border: (10px/2);
    // 取绝对值
    margin: abs(-10px);
    // 四舍五入
    margin: round(3.6px);
    // 向上取整
    margin: ceil(3.2px);
    // 向下取整
    margin: floor(3.999px);
    width: percentage(36px/100px);
}

7.颜色

改变颜色的深浅

background-color: lighten(#cc3, 30%);
background-color: darken(#cc3, 40%);