/* -*- coding: utf-8; -*- = dynamo.scss{scss,css} dynamo.scss を sass で comppile することで dynamo.css を生成する. dynamo.css は常に上書きされる可能性のあることに注意されたい. */ @mixin bgimg($image){ background: url($image); color: #000; } @mixin border ($radius){ border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; box-shadow: 0 1px 2px #ccc; -webkit-box-shadow: 0 1px 2px #ccc; -moz-box-shadow: 0 1px 2px #ccc; } @mixin link_no_decoration($color){ color: $color; text-decoration: none; &:hover { color: $color; text-decoration: none; } &:active { color: $color; text-decoration: none; } &:link { color: $color; text-decoration: none; } &:visited{ color: $color; text-decoration: none; } } body { @include bgimg("/html/htmltool/wall_d.gif"); } div.main { @include border(8px); background-color: rgba(255, 255, 255, 0.6); margin: 12px auto; } a { color: #00f; text-decoration: none; &:link{ color: #00f; text-decoration: none; } &:visited{ color: #00f; text-decoration: none; } &:hover{ color: #f00; text-decoration: underline; } &:active{ color: #0ff; text-decoration: underline; } } $h1_color: #FFFFFF; h1 { @include border(8px); background: #9999FF; color: $h1_color; border-top: #9999FF 4px solid; border-bottom: #9999FF 4px solid; line-height: 100%; padding: 10px 14px; a { @include link_no_decoration($h1_color); } } $h2_color: #000; h2 { @include border(4px); color: $h2_color; border-left: #9999ff 0.5em solid; border-bottom: #0099ff 4px solid; padding-left: 10px; a{ @include link_no_decoration($h2_color); } } h3 { color: #003366; border-bottom: #000066 1px solid; padding-left: 10px; a{ @include link_no_decoration(#003366); } }