《数字盘样式问题》

数字盘一共由14个button组成，一开始的想法是采用flex布局：

.buttons{
            display:flex;
            flex-wrap:wrap;
            > button{
                width:25%;   //一行占四个
                height:64px;
                &.ok{
                    height:128px;
            }
}

可是把ok的按钮设完高度是其他按钮的2倍后，最下边两个按钮被顶到了下边。

换成float布局：

.buttons{
        &::after{
                content:'';
                display:block;
                clear:both;
        }
        > button{
                float:left;   //add
                width:25%;
                height:64px;
                &.ok{
                    height:128px;
                    float:right;   //add
        }
}

所有button都是左浮，只有ok按钮右浮，效果正常了。因为右浮的不会影响左浮的。

但是float布局需要在父元素上加一个 class='clearfix'，然后给这个class的after伪元素添加一些样式。

在scss文件里，可以直接在父元素里使用&::after ，& 表示当前元素。可以不用在html的父元素标签里写clearfix类了。

但是如果还有其他元素需要添加clearfix，就要写很多遍，重复。

scss的placeholder %语法

把重复的选择器及样式放到一个scss文件里，使用%语法：

//helper.scss
%x{
  &::after{
    content:'';
    display:block;
    clear:both;
  }
}

表示%x这个选择器现在还不知道，但是内容已经写好了，先占位（placeholder）

想使用这个样式的，就可以引入。

.buttons{
            @extend %x;

            > button{
                float:left;
                width:25%;
                height:64px;
                &.ok{
                    height:128px;
                    float:right;
                }
                &.zero{
                    width:50%;
            }
}

通过 @extend %x; 继承这个x。做的事情是：把.buttons 这个选择器复制到了 %x 的位置，这样使用extend的选择器就拥有了写好的样式。

如果还有其他选择器也想使用，还是extend就可以，该选择器也会复制到%x的位置。