CSSからless + 2デザインの問題でパラメータを渡す

私はページを設計しています。私は3つの問題があります.2つは純粋な.cssに関連し、もう1つはlessに関連しています。CSSからless + 2デザインの問題でパラメータを渡す

私の最初の問題はbodyタグにmargin: autoとを設定していて、中央に合わせていない（コードは最後に共有されています）、2番目の問題、h1タグがあり、css真ん中に垂直方向の配置を設定しようとしていますが、動作しません。

私の3番目の主な問題は、複数のdivがあり、それぞれが特定の背景色を持ち、div間でプロパティを共有するため、色のみが異なることです。私はテンプレートエンジンとしてハンドルバーを使用しているので、HTMLから背景色の名前を渡す方法はありますか？

私はdivの各クラスを.itemで持っており、このクラスをhtmlの色で渡したいと思います。私のコードは以下のようになります。

CSS：

<!DOCTYPE html> 
<html> 

    <head> 

    <link rel="stylesheet/less" href="style.less" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 

    <div class="flex"> 
     <div class="item red"> 
     <h3> 
     Project 1 
     </h3> 
     <span>Time: 10:30AM</span> 
     </div> 
     <div class="item green"> 
     <h3> 
     Project 2 
     </h3> 
     <span>Time: 10:30AM</span> 
     </div> 

     <div class="item blue"> 
     <h3> 
     Project 3 
     </h3> 
     <span>Time: 10:30AM</span> 
     </div> 

     <div class="item yellow"> 
     <h3> 
     Project 4 
     </h3> 
     <span>Time: 10:30AM</span> 
     </div> 

     <div class="item navy"> 
     <h3> 
     Project 5 
     </h3> 
     <span>Time: 10:30AM</span> 
     </div> 

    </div> 
    </body> 

</html>

私のコードの作業例がここで見つけることができます： https://plnkr.co/edit/ROp2tLBKeSNYJVBCYwUL?p=preview

html{ 
    font-size: 12px; 
    font-family: Arial, sans-serif; 
} 

body{ 
    margin: auto; 
    padding: auto; 
    /* Why the page isn't centered in the middle */ 
} 

h1{ 
    background-color: red; 
    text-align: center; 
    height: 50px; 
    vertical-align: /*What to put here to make it centered? */ ; 
} 
.flex{ 
     display: flex; 
    } 
/* How do I pass variables from Html to my mixin so I don't repeat for each color the following code 

.red{ 
    background-color: red; 
} 
.green{ 
    background-color: green; 
} 
etc.. 

How do I do this below? 
*/ 

.item(@fontColor){ 
.item{ 
    width: 30%; 

    h3{ 
    color: grey; 
    } 
    span{ 
    font-style: italic; 
    } 

} 
}

を私のHTMLは次のようになります

この3つのクイズで私を手伝ってくれてありがとうestions。

出典

2016-12-02 Jacky

今後、問題ごとに1つの質問をすれば、より簡単に回答を得ることができるので、1つの投稿で多くの質問をしないことをお勧めします。

は、今の私は、以下のご質問に答えている、下部に更新plunker：あなたのbodyタグ内のdivを使用する必要があり、それを一定の幅を与えるボディを中心に関しては

。これにより、div3をmargin:0 autoを使用して体の中心に合わせることができます。 H1に関しては

<body> 
    <div id="page-wrap"> 
    <!-- all websites HTML here --> 
    </div> 
</body> 

body{ 
    /*Your element requires a fixed width to center it in relation to the body*/ 
    #pagewrap{ 
    width:800px; 
    margin:0 auto; 
} 
}

：

それはtableへdisplayだ設定とそれに高さを与えるH1の周りに座って要素を作成します。

あなたのHTMLは次のようになります：そして、H1に次のCSSを使用し

<div class="header-container"> 
    <h1>Hello Plunker!</h1> 
</div>

あなた少ない：

：あなたは、このためのミックスインを必要としない色に関しては

.header-container{ 
     background-color: red; 
     height: 50px; 
     display:table; 
     width:100%; 
     h1{ 
     vertical-align: middle; 
     text-align: center; 
     display:table-cell; 
     } 
    }

lessの方法は次のようになります。

.item{ 
    width: 30%; 

    h3{ 
    color: grey; 
    } 
    span{ 
    font-style: italic; 
    } 
    &.red{ 
    background-color: red; 
    } 
    &.green{ 
    background-color: green; 
    } 
} 
}

これは、次のCSSを生成します。

.item.red { 
background-color: red; 
}

など

これは、クラスitem redを持つ要素は、他の色の赤い背景色などでレンダリングすることを意味します。

Plunker：https://plnkr.co/edit/WU2pQfwtq6dkLy124tLD?p=preview

出典

2016-12-02 01:49:39 JanR

詳細な説明はありがとうございます。大変感謝しています。 – Jacky

コンテンツが幅を必要とするセンタリングコンテンツのセクションを作成します。 JanRによって提案されているように、何らかの種類のラッパーを使用して、幅（または反応/流動性のビットの場合は最大幅）を設定し、次にmargin：0 auto;を設定します。パディング：オートは何もしません。

あなたのH1には、正確に何をしようとしていますか？あなたはテーブルのトリックをすることができますが、実際には少しの利益のために余分なマークアップが必要です。高さをH1に設定し、線の高さを同じに設定することができます。 Ie：h1（高さ：30px;行の高さ：30ピクセル;}要素にはデフォルトマージンもあることを覚えておいてください。 Flexboxで実現することもできます。あなたのHTMLサンプルを考えると、私はあなたがそれを垂直方向に集中させようとしているのか見ていません。

最後に、色の問題では：いいえ、HTMLクラスをCSSに渡すことはできません。クラス名以外のものは必要ありません。それを過度に複雑にしないでください。 :)

出典

2016-12-02 02:20:50 tjameswhite

CSSからless + 2デザインの問題でパラメータを渡す

答えて

関連する問題