角が丸くなった角テーブルLESS

Question

SOを少し掘り下げたところ、テーブルの丸みを帯びたコーナーが必要なのは、thisでした。以下のCSSスニペットに私を導く

：

.greytable tr:first-child th:first-child { 
    -moz-border-radius-topleft: 5px; 
    -webkit-border-top-left-radius: 5px; 
    border-top-left-radius: 5px; 
} 

.greytable tr:first-child th:last-child { 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-right-radius: 5px; 
    border-top-right-radius: 5px; 
} 

.greytable tr:last-child td:first-child { 
    -moz-border-radius-bottomleft: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

.greytable tr:last-child td:last-child { 
    -moz-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

は今、私はLESSで、これらすべてを簡素化することができるか知りたいのです。私は、次のLESSコードを試みた：

.border-radius (@v, @h, @radius: 5px) { 
    -moz-border-radius-@v@h: @radius; 
    -webkit-border-@v-@h: @radius; 
    border-@v-@h: @radius; 
} 

をそして、（左上隅のために）それを呼び出す：

.greytable tr:first-child th:first-child { 
    .border-radius('top', 'left') 
} 

しかし、それは動作しません（LESSスニペットの2行目にエラー） 。

ありがとうございます！

Answer 1

あなたがこのしようとすると、文字列の補間構文を使用する必要があるかもしれません：

.border-radius (@v, @h, @radius: 5px) { 
    -moz-border-radius-@{v}@{h}: @radius; 
    -webkit-border-@{v}-@{h}-radius: @radius; 
    border-@{v}-@{h}-radius: @radius; 
} 

を、私はまた、WebKitのとMozillaを追加することになり、標準border-radiusプロパティを大幅にスピードアップするためであり、ベンダープレフィックスは時代遅れになっていますそれのための。

---

EDITは：

：それは、文字列の補間は、（上記のコードはコンパイルされません）このタスクのために働いていないようですので、ここで実際に使用することが容易になります回避策のmixinです

.rounded-table(@radius) { 
    tr:first-child th:first-child { 
     -moz-border-radius-topleft: @radius; 
     -webkit-border-top-left-radius: @radius; 
     border-top-left-radius: @radius; 
    } 
    tr:first-child th:last-child { 
     -moz-border-radius-topright: @radius; 
     -webkit-border-top-right-radius: @radius; 
     border-top-right-radius: @radius; 
    } 
    tr:last-child td:first-child { 
     -moz-border-radius-bottomleft: @radius; 
     -webkit-border-bottom-left-radius: @radius; 
     border-bottom-left-radius: @radius; 
    } 
    tr:last-child td:last-child { 
     -moz-border-radius-bottomright: @radius; 
     -webkit-border-bottom-right-radius: @radius; 
     border-bottom-right-radius: @radius; 
    } 
} 

使用法：

.greytable { 
    .rounded-table(10px) 
} 

出力：

.greytable tr:first-child th:first-child { 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px; 
    border-top-left-radius: 10px; 
} 
.greytable tr:first-child th:last-child { 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    border-top-right-radius: 10px; 
} 
.greytable tr:last-child td:first-child { 
    -moz-border-radius-bottomleft: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
} 
.greytable tr:last-child td:last-child { 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}