Improving Front-End Workflow with CSS Preprocessing
@import
"Utilities/_vars.scss",
"Utilities/_mixins.scss",
"Base/_reset.scss";
.module {
&-title {
color: red;
&:before {
content: "hi";
}
}
&-desc {
color: blue;
}
}
<div class="module">
<p class="module-title"></p>
<span class="module-desc"></p>
</div>
Declare a variable
$accent-color: #000;
$column-gutter: 30px;
Use a variable
right: ($max-width - $column-gutter);
width: calc(100vh - #{$column-gutter});
%lt-sans-serif {
font-family: $sans-serif-lt-font;
font-size: .9em;
line-height: 1.5em;
}
.paragraph {
@extend %lt-sans-serif;
}
%fixed-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: map-get($zindex, z-index-1);
svg {
fill: #fff;
pointer-events: none;
}
}
.previous-arrow {
@extend %fixed-arrow;
left: 0;
}
.right-arrow {
@extend %fixed-arrow;
right: 0;
}
@mixin multiline-ellipsis($number) {
display: -webkit-box;
-webkit-line-clamp: $number;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
}
Mixin declaration
.class {
@include multiline-ellipsis(5);
}
Mixin usage
@mixin transition($time, $property: all, $easing: ease-in) {
transition: $property $time $easing;
-webkit-transition: $property $time $easing;
-moz-transition: $property $time $easing;
-o-transition: $property $time $easing;
}
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
* html #logo {
background-image: url(/logo.gif);
}
Compiles to:
Z-index map
$zindex: (
z-index-0 : -1,
z-index-00 : 0,
z-index-1 : 10,
z-index-2 : 20,
z-index-3 : 30
);
.class {
z-index: map-get($zindex, z-index-1);
position: relative;
}
Z-index usage
$audioHex: (
1930s : #909195,
1940s : #e60d64,
1950s : #8cc63e,
1960s : #d15238,
1970s : #fdb813,
1980s : #00bbe4,
1990s : #810055,
2000s : #083a81,
2010s : #4c854e
);
@each $key, $value in $audioHex {
.promo-audio .audio-#{$key} {
background-color: $value;
}
}
Decade/Hex Code map
Used in @each loop
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
.sidebar { width: grid-width(5); }
$boolean: true !default
@mixin simple-mixin
@if $boolean
@debug "$boolean is #{$boolean}"
display: block
@else
@debug "$boolean is #{$boolean}"
display: none
.some-selector
@include simple-mixin
Used on Shedd Aquarium/Ticket Philly
$colorPrimary: #6e7998;
$colorSecondary: #3c1d6d;
$colorTertiary: rgba($colorPrimary, .1);
$colorTint: #d3d6e0;
Each theme has partial file defining these variables:
Import partial; include mixin with name and color variables
@import 'themes/_themeAbout.scss';
@include theme("theme-about", $colorPrimary,
$colorSecondary, $colorTertiary, $colorTint);
@mixin theme($name, $colorPrimary, $colorSecondary, $colorTertiary, $colorTint){
body[data-theme="#{$name}"] {
body:after { background: $colorPrimary; }
h1 { color: $colorPrimary;}
}
@if $name == theme-about {
> div:before { background-image: url(/Global/bg/dropdowns/about-top.gif); }
}
@if $name == theme-animals {
> div:before { background-image: url(/Global/bg/dropdowns/animals-top.gif); }
}
}
Mixin declaration
Animate polyhedral expansion:
http://codepen.io/thebabydino/pen/qDziw
Rotating icosidodecahedron:
http://codepen.io/thebabydino/pen/kpCyx
(Relies on Compass - Sass extension that adds helpers)