sass实战演练07 - 做一个有逼格的table(1)

1.表格结构

    <div class="container">
        <table class="table table-border">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1-1</td>
                    <td>1-2</td>
                </tr>
                <tr>
                    <td>2-1</td>
                    <td>2-2</td>
                </tr>
            </tbody>
            <tfoot>
                <td colspan="2">表格尾部</td>
            </tfoot>
        </table>
    </div>

2.首先创建一个table.scss文件（独立开来，方便我们维护）
表格宽度100%；默认有20px上边距

.table{
  width: 100%;
  margin-top: 20px;
}

.table-border{
  border: 1px solid gray;
}

/*
.table>thead>tr>th,.table>tbody>tr>td,.table>tfoot>tr>td{
  border: 1px solid gray;
}*/

$table:(
  "thead":("tr","th"),
  "tbody":("tr","td"),
  "tfoot":("tr","td")
);

// 把数组拼接为字符串
@function implode($list,$split){
  $result : "";
  @each $item in $list{
    @if $result != ''{
      $result:"#{$result}#{$split}"
    }
    $result:"#{$result}#{$item}"
  }
  @return $result;
}

@each $key,$value in $table{
  .table>#{$key}>#{implode($value,'>')}{
    // 继承样式
    @extend .table-border
  }
}

3.tables.scss“编译”为css：

.table {
  width: 100%;
  margin-top: 20px; }

.table-border, .table > thead > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td {
  border: 1px solid gray; }

4.因为HTML目标上只引入了index.css，所以我们应该在index.scss里导入tables.scss

@import "./table";