- 1. なんとかしたいコード
- 2. SCSS の記述
- 3. コンパイル結果
1. なんとかしたいコード
これを「クラス名の入れ子」などという言い方をしていいものかわかりませんが
table.list /* 一覧
{
text-align: left;
margin: 0px 40px;
border: 2px solid;
}
table.list td
{
line-height: $line_height_wide;
border: $border_normal;
padding: 5px 10px;
border-collapse: collapse; /* 線を重なり合わせる
}
table.list td.item /* 中央寄せ
{
text-align: center;
font-family: monospace; /* 等幅フォント
font-weight: bold; /* 太字
}
table.list td.iteml /* 左寄せ
{
text-align: left;
font-family: monospace;
font-weight: bold;
}
table.list td.itemr /* 右寄せ
{
text-align: right;
font-family: monospace;
font-weight: bold;
}
てなコードがありまして(中身が中途半端に .scss になっちゃってますが)。
これをなんとかしたいと。
2. SCSS の記述
これを .scss で
table.list // 一覧
{
text-align: left;
margin: 0px 40px;
border: 2px solid;
td
{
line-height: $line_height_wide;
border: $border_normal;
padding: 5px 10px;
border-collapse: collapse; // 線を重なり合わせる
}
td.item // 中央寄せ
{
text-align: center;
font-family: monospace; // 等幅フォント
font-weight: bold; // 太字
}
td.iteml // 左寄せ
{
text-align: left;
font-family: monospace; // 等幅フォント
font-weight: bold; // 太字
}
td.itemr // 右寄せ
{
text-align: right;
font-family: monospace; // 等幅フォント
font-weight: bold; // 太字
}
}
こう書けるようで・・・。
これは、親子関係がわかりやすい。
3. コンパイル結果
コンパイルの結果がこうなります。
table.list {
text-align: left;
margin: 0px 40px;
border: 2px solid;
}
table.list td {
line-height: 120%;
border: 1px solid #000000;
padding: 5px 10px;
border-collapse: collapse;
}
table.list td.item {
text-align: center;
font-family: monospace;
font-weight: bold;
}
table.list td.iteml {
text-align: left;
font-family: monospace;
font-weight: bold;
}
table.list td.itemr {
text-align: right;
font-family: monospace;
font-weight: bold;
}
|
|