scss使用总结

scss使用总结

前言

less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，都能使用 变量、运算符、判断、方法等等。
先有的 sass 后有的 scss， scss 比 sass 写法更严谨

scss中的& 代指父类， 其样式的优先级和不用&的优先级一样，

.icon {
    &:hover {
    /* :hover 样式 */
    }
    & .icon-text {
    
    }
}

一. ccss中的变量： $

$变量名： 变量值

在scss中的变量是以$开头的，可以自定义相应的颜色， 长度等。
但是， csss定义的变量也是有作用域的， 内部声明的变量只能在内部使用。
在变量后添加 !global 就可以使内部的变量在外部使用

<style lang="scss" scoped>
  $white: #FFFFFF;
  $green: #5A8DF7;
  //$blake: #444444;
  .test-container {
    height: 10px;
    width: 20px;
    /*background-color: red;*/
    & .text {
      /*background-color: #79C431;*/
      $blake: #444444 !global;
    }
    .text {
      width: 100%;
      height: 100%;