"Also, what's with the goats?"
...whatever "awesome CSS" means.
Preprocessor
Postprocessor
Food Processor
S
A
S
S
yntactically
wesome
tylesheets
( tupid)
gem install sass
sudo gem install sass
alias yolo='sudo $(history -p \!\!)'
gem install sass
You don't have write permissions
for the /Library/Ruby/Gems/2.0.0 directory.
yolo
Successfully installed sass-3.4.12
Parsing documentation for sass-3.4.12
1 gem installed
sass input.scss output.css
sass --watch input.scss output.css
Because IT hates you.
// Shamelessly copied from
// https://www.npmjs.com/package/gulp-sass
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// Lexical scope
$girl-basic-color: white !default;
.girl:not(:nth-child(even)) {
color: $girl-basic-color;
}
// Strings
.country-music-concert {
$wrapping: nowrap;
white-space: $wrapping;
}
// Maps
$colors: (
smurf: blue,
pacman: yellow,
chucknorris: #BADA55
);
// Lists
$animations: (barrel-roll, roundhouse-kick);
.karate-starfox {
animation-name: $animations;
}
// @if ... @else block
$girlfriend-right: 100%;
.girlfriend {
@if $girlfriend-right > 90% {
right: $girlfriend-right;
margin: 0%;
} @else {
visibility: hidden;
}
}
// @each for lists
$goats: ('alpine', 'black', 'angora', 'mountain');
@each $goat in $goats {
.goat-#{$goat} {
// ...
}
}
// @each for maps
$fractions: (
'half': 1/2,
'third': 1/3,
'quarter': 1/4
);
@each $name, $value in $fractions {
.column-#{$name} {
width: $value;
// Wow, something actually useful
}
}
// Interpolation in selectors
$oprah-color: purple;
.the-color-#{$oprah-color} {
color: $oprah-color;
}
// Interpolation in rule values
$box-sizing-preference: border;
* {
box-sizing: #{$box-sizing-preference}-box;
}
// Interpolation in property keys
$chacha-spacing: padding;
.chacha-slide + .to-the-left {
#{$chacha-spacing}-left: 10rem;
}
.ancestor {
.descendant {
// ...
}
}
// .ancestor .descendant { ... }
.mother {
> .child {
// ...
}
}
// .mother > .child
.mother {
&-trucker {
// ...
}
}
// .mother-trucker { ... }
.son {
.father > & {
// ...
}
}
// .father > .son { ... }
No idea what it's really called.
// SCSS
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
// CSS
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
"Parent selector reference interpolatable pseudo-variable thing?"
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
// Mixins with @content
@mixin hug-me() {
.hug {
@content;
}
}
@include hug-me {
.needs-a-hug {
// ...
}
}
Defines styles that can be
reused and even customized
wherever you @include them
%crazy-transition {
transition-property: all;
transition-duration: 0.5s;
transition-delay: 1.7s;
transform: translateX(-19939px);
}
a:hover {
@extend %crazy-transition;
}
button:hover {
@extend %crazy-transition;
}
The documentation sucks for @extend.
Allows sharing of relationships and rules between selectors.
Use primarily with
%placeholder selectors, which are not output in the compiled CSS.
@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';
@import 'utils/variables';
@import 'utils/functions';
@import 'utils/mixins';
@import 'utils/placeholders';
@import 'base/reset';
@import 'base/typography';
@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';
@import 'components/buttons';
@import 'components/carousel';
@import 'components/cover';
@import 'components/dropdown';
@import 'pages/home';
@import 'pages/contact';
@import 'themes/theme';
@import 'themes/admin';
7 folders, 1 file. I know; real creative.