表单是大家css美化中头疼的地方 我们通常说前端是没有这个编程思想的 我经常看到一些年轻的前端 出了事就只会不停的写选择器 .table { .thead { .tr { }
表单是大家css美化中头疼的地方
我们通常说前端是没有这个编程思想的
我经常看到一些年轻的前端 出了事就只会不停的写选择器
.table { .thead { .tr { } }}纳闷 这个有点low啊
其实对于sass来说 是可以这样写的
@include com-zlui-register-element("table") { > #{com-zlui-css-element(thead)} { @include register-hook("ele-table__thead"); > #{com-zlui-css-element(tr)} { @include register-hook("ele-table__thead ele-table__tr"); > #{com-zlui-css-element(th)} { @include register-hook("ele-table__thead ele-table__tr ele-table__th"); } } #{com-zlui-css-element(th)} { @include register-hook("ele-table__thead ele-table__th"); } } > #{com-zlui-css-element(tbody)} { @include register-hook("ele-table__tbody"); > #{com-zlui-css-element(tr)} { @include register-hook("ele-table__tbody ele-table__tr"); > #{com-zlui-css-element(th)} { @include register-hook("ele-table__tbody ele-table__tr ele-table__td"); } } #{com-zlui-css-element(td)} { @include register-hook("ele-table__tbody ele-table__td"); } } #{com-zlui-css-element(tr)} { @debug ele-tr #{&}; @include register-hook("ele-table__tr"); } #{com-zlui-css-element(td)} { @include register-hook("ele-table__td"); }}这些selector 可以预先捕捉下来
这时候 我们开始设置接口
@mixin __com-zlui-elements-table-nth($nums...) { @include com-zlui-list-nth-child($nums...) { @content; }}@mixin com-zlui-elements-table-tr-th() { > #{com-zlui-css-element(th)} { @content; }}@mixin com-zlui-elements-table-tr-td() { > #{com-zlui-css-element(td)} { @content; }}@mixin com-zlui-elements-table-nth-tr() { @include com-zlui-use-implement("ele-table__tr", com-zlui-super-class-selector) { @content; }}@mixin com-zlui-elements-table-thead() { @include com-zlui-use-implement("ele-table__thead", com-zlui-super-class-selector) { @content; }}@mixin com-zlui-elements-table-thead-nth-tr($num: 1) { @include com-zlui-use-implement("ele-table__thead ele-table__tr", com-zlui-super-class-selector) { @include com-zlui-list-nth-child($num) { @content; } }}@mixin com-zlui-elements-table-nth-thead-column($num) { @include com-zlui-use-implement("ele-table__thead ele-table__th", com-zlui-super-class-selector) { @include __com-zlui-elements-table-nth($num) { @content; } }}@mixin com-zlui-elements-table-nth-thead-th($num) { @include com-zlui-use-implement("ele-table__thead ele-table__tr ele-table__th", com-zlui-super-class-selector) { @include __com-zlui-elements-table-nth($num) { @content; } }}@mixin com-zlui-elements-table-nth-thead-row-and-column($row, $column) { @include com-zlui-use-implement("ele-table__thead", com-zlui-super-class-selector) { > #{com-zlui-css-element(tr)}:nth-child(#{$row}) { > #{com-zlui-css-element(th)}:nth-child(#{$column}) { @content; } } }}@mixin com-zlui-elements-table-tbody-nth-tr($num: 1) { @include com-zlui-use-implement("ele-table__tbody ele-table__tr", com-zlui-super-class-selector) { @include com-zlui-list-nth-child($num) { @content; } }}@mixin com-zlui-elements-table-nth-tbody-column($num) { @include com-zlui-use-implement("ele-table__tbody table__td", com-zlui-super-class-selector) { @include __com-zlui-elements-table-nth($num) { @content; } }}@mixin com-zlui-elements-table-nth-tbody-row-and-column($row, $column) { @include com-zlui-use-implement("ele-table__tbody", com-zlui-super-class-selector) { > #{com-zlui-css-element(tr)}:nth-child(#{$row}) { > #{com-zlui-css-element(td)}:nth-child(#{$column}) { @content; } } }}这样一个接口编写完成 就可以调用了
@include com-zlui-register-class("goods-plain-table", $element: unquote("table")) { @include com-zlui-utils-css-table-reset(); @include com-zlui-elements-table-nth-tr() { @debug hihi #{&}; display: flex; } // thead @include com-zlui-elements-table-thead-nth-tr() { height: 30px; border-bottom:1px solid #121312; @include com-zlui-elements-table-tr-th() { @include com-zlui-mixins-css-quantity-queries-exactly(5) { @debug test #{&}; &:after { content: '5列'; } } @include com-zlui-mixins-horizontal-frame-set-item("60,60,*,60,60"); } } //@include com-zlui-elements-table-nth-thead-column(unquote("n+1")) { // width:60px; //} // tbody @include com-zlui-elements-table-tbody-nth-tr(unquote("n+1")) { border-bottom:1px solid #121312; @include com-zlui-elements-table-tr-td() { @include com-zlui-mixins-horizontal-frame-set-item("60,60,*,60,60"); } } //@include com-zlui-elements-table-nth-tbody-column(unquote("n+1")) { // width:60px; //} // cell @include com-zlui-elements-table-nth-thead-row-and-column(1, 1) { background-color: #00c853; } @include com-zlui-elements-table-nth-tbody-row-and-column(1, 1) { background-color: #1a237e; }}table 中选择器怎么用
选择 thead 中 tr
@include com-zlui-elements-table-thead-nth-tr() {}选择 thead 中 tr 中的某一个 th
@include com-zlui-elements-table-thead-nth-tr() { @include com-zlui-elements-table-tr-th() { }}选择 tbody 中 tr
@include com-zlui-elements-table-tbody-nth-tr(unquote("n+1")) {}其实还有很多快速接口
代码是否可以写的更快 有时也是要有一些编程思想的
