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 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 commented Jan 6, 2016

@rohitkharsan Thx for the hint! Fixed it.

@fedwatch

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.