web前端面试题附答案039-css里插入js变量，scss最具创新的一个功能

前言：       

         scss对于css来说，可以说是升级更新，在原来css的基础上、写法上、功能上都有所更新，而且他不像stylus那样，其实我个人来说是比较讨厌stylus的，因为他把一些符号去掉，表现显得简洁了，创新了，其实空格键一有不对了，哪怕下载了插件也不好排查，而且没有符号，总感觉怪怪的。

        scss新增了层级写法，共有变量，全局类等实用的方法，但这些其实我感觉也不算是创新，只能算是升级，因为如果按原来的写法了来说，工作量也没有大幅减少，时间上也没有大幅缩短，只是培养了大家新的写法而已，而且久而久之，会让新入行的同学忘却了css原本的写法，这也不太好。但今天所要说的这个使用js变量，的确是很惊艳，真的是创新型的出现。

 1、动态绑定style的做法

        之前几乎js和css是不可能有很多的交互的。哪怕是出现了vue以后，也是通过动态的js变量，绑定到dom模板元素的style中，比如这样下面代码这样，通过动态的设定，改变变量的值，再利用vue的绑定原理，绑定到template模板中去。其实已经很方便了。

        1、设置模板内容

<template>
    <div>
      <div :style="{color: isColor ? '#FFF' : '#000'}"></div>
      <div :style="{width: demoWidth +'px'}"></div>
      <button @click="changeStyle">改变样式</button>
    </div>
</template>

        2、通过事件改变变量， 同时动态改变数据依赖

<script>
  export default {
    data() {
      return {
        isColor: false,
        demoWidth: 0,
      };
    },
    methods: {
        changeStyle() {
            this.isColor = true;
            this.demoWidth = 100;
        }
    },
  };
</script>

2、真实把js变量利用到css中去

        但有些时候呢，不能通过动态绑定style的形式，很不好往上写。比如我要做一个动画，点击按钮使某个div从0px在2S的时间内高度改变为200px，然后再点击闭合的按钮，从200px闭合为0px，这很显然需要利用animation的动画，但那个动画的keyframes函数却不好往动态style中去写。上一中写法就不好用了，而且这种需求如果能把js变量引入到css中来，那将会是如虎添翼遥飞远的感觉。

        1、设置模板内容，重点看 --height 特殊数据变量

// 模板中的 --height 只是一个变量，并没有太特别的意思
<template>
    <div>
      <div :class="[downClass]" 
        :style="{'--height': divHeight}"></div>
      <button @click="changeClass">
        改变动态的动画样式
      </button>
    </div>
</template>

        2、设置数据依赖，和点击事件

<script>
  export default {
    data() {
      return {
        downClass: '',
        divHeight: 0,
      };
    },
    methods: {
        changeClass() {
            let num = 10;
            this.downClass = 'gave-down';
            this.divHeight = (num * 20) + 'px';
        }
    },
  };
</script>

        3、这里重点看scss内的变量与模板内变量的匹配，与第一步动态数据的赋值 

<style>
    .gave-down {
        animation: down 2s;
        -webkit-animation: search-pulldown 500ms;
        animation-fill-mode: forwards;
    }
    @keyframes down {
        from {height: 0px;}
        to {height: var(--height);}
    }
    /*这里为了兼容，希望以后越来越好，不用写兼容了*/
    @-webkit-keyframes down {
        from {height: 0px;}
        to {height:  var(--height);}
    }
</style>

        这里的 “--height” 只是一个变量，只是这里真的是用到了高度相关的内容，其实你写一个--aa --bb应该也是没有问题的,浏览器并不会识别这个样式，但通过js事件动态给 divHeight变量 赋值，而且真的是通过计算得到的值哦。再通过style动态给变量 --height 赋值，这样这个变量就具备了把变量值，而且和css桥接了，最后再写到scss中，真的就起到了js动态插入css中。

3、总结

        其实我们做技术，无非就是做需求，改bug，换了工作，除了身边的人不一样了，但对于我们前端人员来说，可能桌子还是那种桌子，椅子还是那种椅子，电脑还是那种电脑，vscode还是那个vscode，还是做着布局，异步联调的工作，再做需求，改bug，再换工作。周而复始，日复一日，但如果真的能够有了创新的思路，创新的功能，一定是非常值得开心的，而这也是超越别人一大截的利器。