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

前一篇我们的表格还有很多问题，这里我们继续优化。

td直接有难看的间距
常规的方法可以加：

<table class="table table-border" cellspacing="0">

css里怎么实现呢？

border-spaceing:0

今天的需求

定义一个样式，鼠标移动到表格行上会变色
原生实现很简单：

.table-hover-gray>tbody>tr:hover{  background-color: #dddddd;}

scss的写法：

// 定义数组$table-hover-gray:();@each $key,$value in $table {  // 追加到数组  $table-hover-gray:append($table-hover-gray,".table-hover-gray>#{$key}>#{nth($value,1)}:hover",comma)}#{$table-hover-gray} {  background-color: #dddddd;}

编译成css的代码：

.table-hover-gray > thead > tr:hover, .table-hover-gray > tbody > tr:hover, .table-hover-gray > tfoot > tr:hover {  background-color: #dddddd; }

当然到现在我们这个表格还是很low，很难看的，我们应该美化一下td

 .table tr th, .table tr td {            padding: 12px;            line-height: 24px;            border-top: 1px solid #dddddd;        }

我们在scss里编写代码实现这个效果：

$table-padding:();@each $key,$value in $table {  $table-padding:append($table-padding,".table>#{$key}>#{nth($value,1)}>#{nth($value,2)}",comma)}#{$table-padding}{  padding: 12px;  line-height: 24px;  border-top: 1px solid #dddddd;}

编译成css如下：

.table > thead > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td {  padding: 12px;  line-height: 24px;  border-top: 1px solid #dddddd; }

至此，完整的table.scss如下：

.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-border>#{$key}>#{implode($value,'>')}{    // 继承样式    @extend .table-border  }}// 定义数组$table-hover-gray:();@each $key,$value in $table {  // 追加到数组  $table-hover-gray:append($table-hover-gray,".table-hover-gray>#{$key}>#{nth($value,1)}:hover",comma)}#{$table-hover-gray} {  background-color: #dddddd;}$table-padding:();@each $key,$value in $table {  $table-padding:append($table-padding,".table>#{$key}>#{nth($value,1)}>#{nth($value,2)}",comma)}#{$table-padding}{  padding: 12px;  line-height: 24px;  border-top: 1px solid #dddddd;}