12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- @import "compass/reset";
- // variables
- $colorGreen: #008000;
- $colorGreenDark: darken($colorGreen, 10);
- @mixin container {
- max-width: 980px;
- }
- // mixins with parameters
- @mixin button($color:green) {
- @if ($color == green) {
- background-color: #008000;
- }
- @else if ($color == red) {
- background-color: #B22222;
- }
- }
- button {
- @include button(red);
- }
- div,
- .navbar,
- #header,
- input[type="input"] {
- font-family: "Helvetica Neue", Arial, sans-serif;
- width: auto;
- margin: 0 auto;
- display: block;
- }
- .row-12 > [class*="spans"] {
- border-left: 1px solid #B5C583;
- }
- // nested definitions
- ul {
- width: 100%;
- padding: {
- left: 5px; right: 5px;
- }
- li {
- float: left; margin-right: 10px;
- .home {
- background: url('http://placehold.it/20') scroll no-repeat 0 0;
- }
- }
- }
- .banner {
- @extend .container;
- }
- a {
- color: $colorGreen;
- &:hover { color: $colorGreenDark; }
- &:visited { color: #c458cb; }
- }
- @for $i from 1 through 5 {
- .span#{$i} {
- width: 20px*$i;
- }
- }
- @mixin mobile {
- @media screen and (max-width : 600px) {
- @content;
- }
- }
|