SCSS总结

ps：写代码时天天用，面试时却没了思路(′⌒`)，这就是懒的下场啊，一定要多总结、多整理、多进步，进步是和收入持平的本钱。

使用$定义变量和引用变量
不一定是父套子，也可以是子套父
可以用@extend 继承一个自定义的样式

一、定义变量与引用

1.引用另一个SCSS文件的变量

在helper.scss就可以用$定义变量给其赋值

image

使用@import 导入文件后，就可以用$变量名引用

image

此外，WebStorm需设置webpack路径

image

2.在本文件中定义变量与引用

$color:#f00;
.ouput{
  color:$color; 
}

二、嵌套CSS

<div class="createTag-wrapper">
    <button class="createTag selected">
        新建标签
    </button>
    <input type="text"/>
</div>

.createTag{
    $bg:#ccc;      //这个变量全局能用
    &-wrapper{     //父元素在里面，前缀相同用&
        $h:24px;   //这个变量只有这个 &-wrapper{}里面能用 
        input{     //子元素可以省略>
           background:$bg;
           height:$h; 
        }
    }
    &.selected{    //被选中的button
        
    }
}

三、继承

%clearFix{
  &::after{
    content: '';
    clear: both;
    display: block;
  }
}
.buttons{
      @extend %clearFix;
 }

四、注释方式

有两种注释方式：

/* 这是注释 */
// 这是注释

1. /* 这个注释会出现在css中 */

image

2. //这个注释不会出现在css中

image