Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS Cheatsheet

SCSS

Global Setup

Install on OS X: sudo gem install sass

CLI Usage

Version info: sass -v

Compile: sass styles.scss styles.css

Auto-Compile for single files: sass --watch styles.scss:styles.css

Auto-Compile for folders: sass --watch .

Notes

  • There is no difference between underscores and dashes in variables: $my_var === $my-var
  • Skip default spaces with a leading ampersand: &:hover
  • Skip default nesting with an ending ampersand body.blog &
  • Prevent compiling for @import with a leading underscore: _normalize.scss

Functions

Docs: http://sass-lang.com/documentation/Sass/Script/Functions.html

// Useful Mixins
@mixin shadow( $x, $y, $blur, $color ) {
-webkit-box-shadow: $x $y $blur $color;
-moz-box-shadow: $x $y $blur $color;
box-shadow: $x $y $blur $color;
}
@mixin animate( $property: all, $duration: 1s, $easing: ease ) {
-webkit-transition: $property $duration $easing;
-moz-transition: $property $duration $easing;
-o-transition: $property $duration $easing;
transition: $property $duration $easing;
}
@mixin links( $normal, $visited, $hover ) {
&:visited {
color: $visited;
}
&:hover, &:active, &:focus {
color: $hover;
}
}
.clearfix {
&:before,
&:after {
content: "";
display: table;
}
&:after { clear: both; }
}
// SCSS comments (not visible in CSS)
/* CSS comments (visible in CSS) */
// Variables
$color: black;
p {
color: $color;
}
// Nesting & Abbreviation
aside {
border: {
width: 1px;
style: solid;
color: $color;
}
}
nav {
background: none;
ul {
list-style-type: none;
a {
color: $color;
&:hover, &:focus, &:active { // Skip default space: `a:hover` instead of `a :hover`
color: red;
}
}
}
body.blog & { // Skip default nesting: `body.blog nav` instead of `nav body.blog`
background: green;
}
}
// Extend/Inheritance
.infobox {
border: 1px solid #ccc;
padding: 10px;
color: $color;
}
.success {
@extend .infobox;
border-color: green;
}
// The % prefix creates rules that never get used on their own.
// Theses classes are solely for the purpose of extending.
%info {
position: absolute;
}
.notice {
@extend %info;
}
// Mixins
@mixin outline {
border: 1px solid black;
}
@mixin animate( $property, $duration, $easing ) {
transition: $property $duration $easing;
}
@mixin default_animate( $property: all, $duration: 1s, $easing: ease ) { // Mixin with defaults
transition: $property $duration $easing;
}
aside {
border-radius: 10px;
@include outline;
}
a {
@include animate( all, 1s, linear );
}
nav a {
@include default_animate( $duration: 3s ); // Use defaults with custom $duration
}
// Operators: +, -, *, /, and %
.container {
width: 600px / 960px * 100%;
}
// Functions
$highlight: green;
p {
color: lighten( $highlight, 20% );
}
p {
color: darken( $highlight, 10% );
}
p {
color: fade-out( $highlight, 0.5 );
}
p {
color: adjust-hue( $highlight, 90 ); // Usually between -360 degrees and 360 degrees.
}
p {
color: red + blue; // Compiles to magenta.
}
// Loops
$list: (orange, purple, teal);
@each $item in $list {
.#{$item} {
background: $item;
}
}
$total: 10;
$step: 360deg / $total;
@for $i from 1 through $total {
.ray:nth-child(#{$i}){
background: adjust-hue( blue, $i * $step );
}
}
// If/Else
p {
margin-left: if( $i % 2 == 0, 0px, 50px );
}
// Import/Embed (.scss files only)
@import 'normalize' // Prevent separate compiling with a leading underscore: `_normalize.scss`
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Dec 19, 2015

On line 2 of styles.scss

/* CSS commnets (visible in CSS) */

Probably should be

/* CSS comments (visible in CSS) */
@hofmannsven

This comment has been minimized.

Copy link
Owner Author

@hofmannsven hofmannsven commented Jan 6, 2016

@rohitkharsan Thx for the hint! Fixed it.

@fedwatch

This comment has been minimized.

Copy link

@fedwatch fedwatch commented Oct 31, 2016

@rohitkharsan Thx for the hint! Fixed it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment