I saw a sassy CSS for a rails app like this:
$std-margin: 30px;
@mixin solid-bg($color: #EEEEEE) {
background: none repeat scroll 0 0 $color;
}
@mixin solid-border($direction, $width: 1px, $color: black) {
@if $direction == "" {
border: {
color: $color ;
width: $width;
style: solid;
}
} @else {
border-#{$direction}: {
color: $color ;
width: $width;
style: solid;
}
}
}
html {
font: 90%/1.3 arial,sans-serif;
body {
margin: $std-margin;
.top-nav {
text-align: center;
width: 100%;
.login {
float: right;
padding-right: 63px;
clear: both;
}
a {
text-decoration: none;
}
}
.content {
@include solid-border("");
clear: both;
padding: 15px;
}
h2 {
margin: $std-margin;
margin-left: 0px;
}
h3, .detail {
margin: $std-margin;
}
#header {
ul {
list-style: none outside none;
padding: 0;
li {
float: left;
a {
@include solid-bg();
color: #0000CC;
display: block;
padding: 0.24em 1em;
text-decoration: none;
}
}
}
#selected a {
@include solid-bg(white);
color: black;
font-weight: bold;
position: relative;
top: 1px;
@include solid-border("");
@include solid-border('bottom', 0px);
}
}
label {
float: left;
margin-right: 1em;
text-align: right;
width: 10em;
}
input {
@include solid-bg(#FAFAFA);
-moz-border-radius: 0.4em 0.4em 0.4em 0.4em;
@include solid-border("", 1px, #DDDDDD);
font: bold 0.95em arial,sans-serif;
padding: 0.15em;
width: 10em;
}
.field {
padding: 5px;
clear: both;
input {
width:12em;
@include solid-border("", 1px, #006);
@include solid-bg(#ffc);
&:hover {
@include solid-border("");
@include solid-bg(#ff6);
}
}
.fieldWithErrors {
float: left;
padding: 3px;
input {
@extend .field.input;
@include solid-border("", 2px, red);
}
}
.create {
width:5em;
}
.submit {
@include solid-bg(#D0DAFD);
border: 0 none;
cursor: pointer !important;
display: block;
height: 26px;
margin: 1em;
overflow: hidden;
width: 69px;
}
}
table {
border-collapse: collapse;
margin: 20px;
text-align: left;
width: 480px;
font {
family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
size: 12px;
}
th {
@include solid-bg(#B9C9FE);
@include solid-border('bottom', 1px, #FFFFFF);
@include solid-border('top', 4px, #AABCFE);
color: #003399;
font-size: 13px;
font-weight: normal;
padding: 8px;
}
tr {
@include solid-bg(#E8EDFF);
&:hover td {
@include solid-bg(#D0DAFD);
color: #333399;
}
td.title {
color: #333399;
}
}
td {
@include solid-border('bottom', 1px, #FFFFFF);
@include solid-border('top', 1px, transparent);
color: #666699;
padding: 8px;
}
}
.activities {
padding: 10px;
a{
margin: 10px;
}
}
.flash {
font-family:'Trebuchet MS';
color:#FF0000;
font-size:14px;
}
.calendar_date_select table {
width: 78px;
td {
padding: 5px;
}
}
.main-content {
clear: both;
float: left;
width: 100%;
}
.clear {
clear: both;
}
#errorExplanation {
@include solid-bg();
margin: 10px;
padding: 5px 0 5px 20px;
}
}
}
Using best practice how this can be optimized?
background-color
andborder
directly? \$\endgroup\$