Home

See also

[Other features] Maps

$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)

[Other features] Lists

$list: (a b c);

nth($list, 1)  // starts with 1
length($list)

@each $item in $list { ... }

[Other features] Interpolation

.#{$klass} { ... }      // Class
call($function-name)    // Functions

@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")

[Other features] Conditionals

@if $position == 'left' {
   position: absolute;
   left: 0;
}
@else if $position == 'right' {
   position: absolute;
   right: 0;
}
@else {
   position: static;
}

[Loops] While loops

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

[Loops] Each loops (nested)

$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

[Loops] Each loops (simple)

$menu-items: home about services contact;

@each $item in $menu-items {
  .photo-#{$item} {
    background: url('images/#{$item}.jpg');
  }
}

[Loops] For loops

@for $i from 1 through 4 {
  .item-#{$i} { left: 20px * $i; }
}

[Feature checks] Features

  • global-variable-shadowing
  • extend-selector-pseudoclass
  • units-level-3
  • at-error

[Feature checks] Feature check

feature-exists(global-variable-shadowing)

[Other functions] Misc

variable-exists(red)    // checks for $red
mixin-exists(red-text)  // checks for @mixin red-text
function-exists(redify)
global-variable-exists(red)
selector-append('.menu', 'li', 'a')   // .menu li a
selector-nest('.menu', '&:hover li')  // .menu:hover li
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)

[Other functions] Numbers

floor(3.5)
ceil(3.5)
round(3.5)
abs(3.5)
min(1, 2, 3)
max(1, 2, 3)
percentage(.5)   // 50%
random(3)        // 0..3

[Other functions] Units

unit(3em)        // 'em'
unitless(100px)  // false

[Other functions] Strings

unquote('hello')
quote(hello)
to-upper-case(hello)
to-lower-case(hello)
str-length(hello world)
str-slice(hello, 2, 5)      // "ello" - it's 1-based, not 0-based
str-insert("abcd", "X", 1)  // "Xabcd"

[Color functions] Adjustments

// Changes by fixed amounts
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%)   // like darken(_, 30%)
adjust-color($color, $alpha: -0.4)       // like fade-out(_, .4)
adjust-color($color, $hue: 30deg)        // like adjust-hue(_, 15deg)
// Changes via percentage
scale-color($color, $lightness: 50%)
// Changes one property completely
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)

Supported: $red $green $blue $hue $saturation $lightness $alpha

[Color functions] Getting individual values

HSLA

hue($color)         // → 0deg..360deg
saturation($color)  // → 0%..100%
lightness($color)   // → 0%..100%
alpha($color)       // → 0..1 (aka opacity())

RGB

red($color)         // → 0..255
green($color)
blue($color)

See: hue(), red()

[Color functions] Modifying HSLA

darken($color, 5%)
lighten($color, 5%)
saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)
adjust-hue($color, 15deg)
complement($color)    // like adjust-hue(_, 180deg)
invert($color)
fade-in($color, .5)   // aka opacify()
fade-out($color, .5)  // aka transparentize() - halves the opacity
rgba($color, .5)      // sets alpha to .5

[Color functions] Mixing

mix($a, $b, 10%)   // 10% a, 90% b

[Color functions] rgba

rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)

[Basics] Composing

@import './other_sass_file';

The .scss or .sass extension is optional.

[Basics] Extend

.button {
  ···
}
.push-button {
  @extend .button;
}

[Basics] Mixins

@mixin heading-font {
  font-family: sans-serif;
  font-weight: bold;
}
h1 {
  @include heading-font;
}

with parameters

@mixin font-size($n) {
  font-size: $n * 1.2em;
}
body {
  @include font-size(2);
}

with default values

@mixin pad($n: 10px) {
  padding: $n;
}
body {
  @include pad(15px);
}

with a default variable

// Set a default value
$default-padding: 10px;
@mixin pad($n: $default-padding) {
  padding: $n;
}
body {
  @include pad(15px);
}

[Basics] Comments

/* Block comments */
// Line comments

[Basics] Nesting

.markdown-body {
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

to properties

text: {
  align: center;          // like text-align: center
  transform: uppercase;   // like text-transform: uppercase
}

[Basics] Variables

$red: #833;
body {
  color: $red;
}

[Basics] Introduction

This is a quick reference to Sass stylesheets.

Basics

{: .-three-column}

More

Dplyr

dplyr cheat sheet is a quick reference for dplyr that is a grammar of data manipulation, providing a consistent set of verbs that help you solve the most common data manipulation challenges.

Regex

A regular expression is a sequence of characters that specifies a search pattern.

PySpark

PySpark is an interface for Apache Spark in Python. It not only allows you to write Spark applications using Python APIs

Golang

Go is a statically typed, compiled programming language designed at Google by Robert Griesemer, Rob Pike, and Ken Thompson.

Watchman

Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change.

Rollup.Js

Rollup Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Bluebird.Js

Bluebird is a fully-featured Promise library for JavaScript. The strongest feature of Bluebird is that it allows you to "promisify" other Node modules in order to use them asynchronously. Promisify is a concept applied to callback functions.

Flow

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

Node.Js Api

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

C Preprocessor

Quick reference for the C macro preprocessor, which can be used independent of C/C++.

Sass

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself. Sass consists of two syntaxes.

Activeadmin

Active Admin is a Ruby on Rails plugin for generating administration style interfaces. It abstracts common business application patterns to make it simple for developers to implement beautiful and elegant interfaces with very little effort.

Fetch

The Fetch standard defines requests, responses, and the process that binds them: fetching.

Httpie

$ http POST http://example.com name="John" Host:example.com — JSON, cookies, files, auth, and other httpie examples.

Rspec

RSpec is a computer domain-specific language testing tool written in the programming language Ruby to test Ruby code. It is a behavior-driven development framework which is extensively used in production applications.

Saucelabs

Sauce Labs allows users to run tests in the cloud on more than 700 different browser platforms, operating systems, and device combinations.

Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code.

Sequelize

Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server.

Ubuntu

Ubuntu is a Linux distribution based on Debian and composed mostly of free and open-source software. Ubuntu is officially released in three editions: Desktop, Server, and Core for Internet of things devices and robots.

Rails Models

Ruby on Rails, or Rails, is a server-side web application framework written in Ruby under the MIT License. Rail is a model–view–controller framework, providing default structures for a database, a web service, and web pages.

Git Log

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

Controllers

Ruby on Rails, or Rails, is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller framework, providing default structures for a database, a web service, and web pages.

Ansible Examples

Ansible is an open-source software provisioning, configuration management, and application-deployment tool enabling infrastructure as code.

Bolt Quickstart

A quick guide to getting started writing Bolt tasks

Rspec-Rails

RSpec Rails defines ten different types of specs for testing different parts of a typical Rails application.

Rsync

rsync is a utility for efficiently transferring and synchronizing files between a computer and an external hard drive and across networked computers by comparing the modification times and sizes of files.

Ledger Cli

Ledger is a command-line based double-entry bookkeeping application. Accounting data is stored in a plain text file, using a simple format, which the users prepare themselves using other tools.

Homebrew

Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple's operating system macOS as well as Linux.

Bundler

Bundler provides a consistent environment for Ruby projects by tracking and installing the exact gems and versions that are needed.