1

みんな、同じことをする（三角形を作成する）2つの非常に単純なCSSを持っています。どちらが優れているか、あなたの提案が必要です。

例 1

.leftArrow { 
    border-right: 5px solid #000;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    height:0px;
    width: 0px;
}

上記の例では、右、下、および上に別々に境界線を定義しようとしています。問題は、境界線を 5px から 10px に変更する必要があるかどうかです。3つの宣言を変更する必要があります。

そのため、1 回の変更に対して 3 つの宣言で毎回変更を行うのは良くありません。すべて（4）方向の矢印があるとします。その場合、4 X 3 = 12 宣言を変更する必要があります。

とても時間がかかります:(

例 2

.leftArrow { 
    border: 5px solid transparent;
    border-left-width: 0px;
    border-right-color: #000;
    height:0px;
    width: 0px;
}

2 番目の例では、最初の宣言「border: 5px solid transparent;」で境界線またはすべての側面を定義しています。2 番目の宣言では、左の境界線の幅を 5px から 0px に置き換えています。3 番目の宣言では、右の境界線の色を透明から黒に置き換えます。

さて、私のオープニングでは、最初の宣言で境界線の幅を定義し、次にそれを変更することもお勧めできません。

3回目の宣言でも同じ状況。境界線の色を透明から黒に変更しています。

この種の状況について、またはより良いアイデアがあれば、ご意見をお聞かせください :)

4

5 に答える 5

2

変数でhttp://sass-lang.com/を使用します。

于 2012-04-18T13:54:50.907 に答える
1

あなたが何をしようとしているのかを視覚化するのに苦労していますが、私があなたを正しく理解していれば、コードの書き換えを減らすために次のようなことを行うことができます:

一般的な矢印のプロパティを定義する

.arrow {
    border: 5px solid;
    color: #000;
    height: 0px;
    width: 0px;
}

そして、必要に応じて境界線をオフにします

左矢印のみに左と下の境界線を表示する

.arrow.left {
    border-right-color: transparent; 
    border-top-color: transparent;
}

そうすれば、基本的なスタイルを .arrow ブロックに保持できます。

于 2012-04-18T14:07:24.847 に答える
1

私は次のようにします：

<div class="arrow arrow-left"></div>

.arrow {
    border:5px solid #000;
    width:0;
    height:0;
}
.arrow-left {
    border-left:0;
    border-bottom-color:transparent;
    border-top-color:transparent;
}

http://jsfiddle.net/pdRYE/15/

この場合、border-width 宣言は 1 つしかなく、2 番目のクラスは不要な境界線を非表示にするためだけに使用しています。

于 2012-04-18T14:11:24.453 に答える
1

私があなたを正しく理解していれば、あなたの問題は、同じことを何度も変えたくないということですか? 次に、Less CSSはあなたにとって何かになる可能性があります。たとえば、CSS をネストすることもできます。最良の方法は、Less CSS を「実際の」CSS にコンパイルするか、または を含めることができ、コンパイルするless.js必要はありません (ただし、 JS が無効になっているブラウザーでも動作するように、最初のものをお勧めします)。

于 2012-04-18T13:58:01.340 に答える
1

私は次のようにします：

border: 5px solid #000;           /* Set base style */
border-width: 5px 5px 5px 0px;    /* All 5px except left */
border-color: #000 transparent    /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;

border-最初の行は、次の 2 つのプロパティによってオーバーライドされる「基本」スタイルを設定します。とを使用して、要素の 4 つの側面のそれぞれに異なる色と幅を設定できborder-widthますborder-color。

上記のborder-colorプロパティは左の色を透明に設定しますが、左border-widthが 0 であるため、効果はありません。

変更をさらに簡単にするには、次のようにします。

border: 5px solid #000;           /* Set base style */
border-left: none;                /* Get rid of left border */
border-color: #000 transparent    /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;

変更する必要があるのは、最初のborderプロパティだけです。はborder-left: none、左の境界線が表示されないようにします。変える必要はない

これは LESS や代替と同じくらい簡単で、純粋な CSS に準拠しています。

于 2012-04-18T13:59:38.100 に答える