Les James
UX Developer at Republic Wireless
@import 'my-file';
// Silent comments rule!
$link-color: #090;
a { color: $link-color; }
.widget { color: pink; }
.component { @extend .widget; }
.heading {
color: gray;
.title { color: red; }
}
a {
color: pink;
&:hover { color: hotpink; }
}
a { color: #F00 - #111; }
a {
color: red;
&:hover {
color: darken(red, 10%);
}
}
@function em($px, $base: 16px) {
@return ($px / $base) * 1em;
}
a { font-size: em(14px); }
@mixin my-background($color) {
background: $color
linear-gradient(
to bottom,
lighten($color, 10%),
darken($color, 10%)
);
}
a { @include my-background($link-color); }
@mixin shadow($x: 1px, $y: 1px, $size: 1px) { box-shadow: $x $y $size black; }
// ordered arguments // @include shadow(2px, 3px, 4px);
// keyword arguments //
@include shadow($size: 5px);
$prefix = foo;
.#{$prefix}-widget { color: blue; }
@for $i from 1 through 8 { .column-#{$i} { width: 80px * $i; } }
$social-icons: twitter, facebook, linkedin
@each $icon in $social-icons {
.#{$icon}-icon {
background-image: url('/images/#{$icon}.png');
}
}
@mixin text-background($color) {
color: $color;
@if lightness($color) > 50% {
background: black;
} @else {
background: white;
}
}
@mixin mq($size) { @media (min-width: $size) { @content; } }
@include mq(600px) { p { background: green; } }
By Les James