Sassサス(SCSS)で全体の幅＋ナビゲーションを自動計算_01

カテゴリー︎： Sassサス(SCSS)

Sassサス(SCSS)で全体の幅＋ナビゲーションのコピペ

変数を使い、全体とメインエリアの幅を指定して
サイドバーを計算する。
（マージン分の値を引く設定している。）

↓HTMLソース

    <div class="wrap_all">
            <div class="main">
                左側のコンテンツ
            </div>
            <div class="side">
                <ul class="list">
                    <li class="list__item"><a href="">リスト１</a></li>
                    <li class="list__item"><a href="">リスト２</a></li>
                    <li class="list__item"><a href="">リスト３</a></li>
                    <li class="list__item"><a href="">リスト４</a></li>
                    <li class="list__item"><a href="">リスト５</a></li>
                </ul>
            </div>
    </div>
    <!-- wrap_all -->

↓SCSS　※コンパイル前のソース

//全体の幅
$wrap_all:1000px;

//メインエリアの幅
$main:640px;

//サイドバーの幅を計算
$side: $wrap_all - $main - 10;//マージン分を引く

.wrap_all{
	width:$wrap_all;
	background:gray;
	margin:0px auto;
	overflow:hidden;

	
	.main{
		float: left;
		width:$main;
		height: 100px;
		background:red;
	}

	.side{
		float: right;
		width:$side;
		background:green;
	}


	.list{
    margin:5px;
    overflow: hidden;
    border-radius:8px;
    background: pink;
    border:1px solid #999;
    }
    .list__item{
    padding: 1em;
    background:#ddd;
    }
    .list__item > a{
    display: block;
    margin:-1em;/* paddingで膨らみを相殺 */
    padding:1em;/*余分な余白をとる*/
    text-decoration: none;
    }
    .list__item + .list__item{
    border-top:1px solid red;
    }
}

↓CSS　 ※上記SCSSをコンパイル後のソース

.wrap_all {
  width: 1000px;
  background: gray;
  margin: 0px auto;
  overflow: hidden;
}

.wrap_all .main {
  float: left;
  width: 640px;
  height: 100px;
  background: red;
}

.wrap_all .side {
  float: right;
  width: 350px;
  background: green;
}

.wrap_all .list {
  margin: 5px;
  overflow: hidden;
  border-radius: 8px;
  background: pink;
  border: 1px solid #999;
}

.wrap_all .list__item {
  padding: 1em;
  background: #ddd;
}

.wrap_all .list__item > a {
  display: block;
  margin: -1em;
  /* paddingで膨らみを相殺 */
  padding: 1em;
  /*余分な余白をとる*/
  text-decoration: none;
}

.wrap_all .list__item + .list__item {
  border-top: 1px solid red;
}

サンプル画面⇒Sassサス(SCSS)で全体の幅＋ナビゲーションを自動計算

PAGE TOP