All notes
Scss

Command line

scss


sass input.scss output.css

# watch folders
sass --watch app/sass:public/stylesheets

Syntax

sass-lang.com: guide.

sass-lang.com: documentation. wcfNote: this reference is complete, so use it more.

Sass (Syntactically Awesome StyleSheets).

comment

When the first letter of a multiline comment is !, the comment will always rendered into css output even in compressed output modes. This is useful for adding Copyright notices to your generated CSS.

Since multiline comments become part of the resulting CSS, interpolation within them is resolved. For example:


$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
// is compiled to:
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

variable



//----------
// You can assign to variables if they aren't already assigned by adding the !default flag to the end of the value.

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

// is compiled to:

#main {
  content: "First content";
  new-content: "First time reference"; }

interpolation, #{}



$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

// is compiled to:

p.foo {
  border-color: blue; }

division, /



p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}

// is compiled to:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

Control Directives and Expressions

if(), @if



if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
// is compiled to:
p {
  border: 1px solid; }

@for



@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//is compiled to:
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

extend, inheritance



//---------- Import and extend other classes

// In your styles.scss file you would have to first import _bootstrap.scss:
@import "_bootstrap.scss";
// Then below the import:
button { @extend .btn; }

//---------- Best practice from sass-lang

// This CSS won't print because %equal-heights is never extended.
// Placeholder Selectors: %foo. These look like class and id selectors, except the # or . is replaced by %. They're meant to be used with the @extend directive. On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

// This CSS will print because %message-shared is extended.
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

!optional flag

Normally when you extend a selector, it's an error if that @extend doesn't work. For example, if you write a.important {@extend .notice}, it's an error if there are no selectors that contain .notice.

Sometimes, though, you want to allow an @extend not to produce any new selectors. To do so, just add the !optional flag after the selector. For example:


a.important {
  @extend .notice !optional;
}

mixin, include



//---------- 
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

// is compiled to:
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

//---------- clearfix

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

//---------- Mixins may also be included outside of any rule (that is, at the root of the document)

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

// is compiled to:

a {
  color: blue;
  background-color: red; }

//---------- Mixins include other mixins

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

//---------- With arguments

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
// Or keyword Arguments:
p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

//---------- Variable Arguments

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// Another example: Variable arguments can also be used when calling a mixin.

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

@content



@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

// Generates:

* html #logo {
  background-image: url(/logo.gif);
}

//---------- Variable scope

// The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin.

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

// Compiles to:

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

partial, import

A partial is simply a Sass file named with a leading underscore. You might name it something like "_partial.scss". The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the "@import" directive.

function



$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

// Becomes:

#sidebar {
  width: 240px; }

ampersand

css-tricks.com: the SASS ampersand.



.btn {
  &-primary {}
  &-secondary {}
}
// Compiled CSS:
.btn-primary {}
.btn-secondary {}

.button {
  &:visited { }
  &:hover { }
  &:active { }
}
// This compiles to:
.button:visited { }
.button:hover { }
.button:active { }

//---------- The default &
.some-class {
  &.another-class {}
}
// Compiles to:
// Match an element that has *both* of two classes.
.some-class.another-class { }

.parent {
  .child {}
}
// This compiles to:
.parent .child {}
// It is the same as
.parent {
  // Note the space behind '&'.
  & .child {}
}

//---------- Change the position of &
.button {
  body.page-about & { }
}
// Compiles to
body.page-about .button {}

Functions

Defined in: ruby-sass/lib/sass/script/functions.rb

bi-app-sass, ltr

anasnakawa.github.io: bi-app-sass.



// create three Sass files
// app-ltr.scss    // ltr interface to be compiled
// app-rtl.scss    // rtl interface
// _app.scss       // private file where you will write your styles (won't be compiled)

// in the app-ltr.scss only include the following
@import 'bi-app-ltr';
@import 'app';

// same for app-rtl.scss
@import 'bi-app-rtl';
@import 'app';

// now you can write your styles in _app.scss, using bi-app mixins, as you were styling for only ltr layouts, and the rtl styles will be compiled automatically!
.foo {
  display: block;
  @include float(left);
  @include border-left(1px solid white);
}

//----- The result will be

// in app-ltr.css
.foo {
  display: block;
  float: left;
  border-left: 1px solid white;
}

// in app-rtl.css
.foo {
  display: block;
  float: right;
  border-right: 1px solid white;
}