Sass (stylesheet language)

Sass
Designed by Hampton Catlin
Developer Natalie Weizenbaum, Chris Eppstein
First appeared 2006
Stable release 3.4.13 / February 26, 2015 (2015-02-26)
Typing discipline dynamic
OS Cross-platform
License MIT License
Filename extensions .sass, .scss
Website sass-lang.com
Major implementations
Ruby
Influenced by
CSS, YAML, Haml
Influenced
LESS, Stylus, Tritium

Sass (Syntactically Awesome Stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[1][2] After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files.

Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.[3] It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS", uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass[4] (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved.[5] Sass is simply syntactic sugar for CSS.

The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass.[6][7] There's also a Java implementation called JSass.[8] Additionally, Vaadin has a Java implementation of Sass.[9] The indented syntax is a metalanguage. SCSS is a nested metalanguage, as valid CSS is valid SCSS with the same semantics. Sass supports integration with the Firefox extension Firebug.[10]

SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.[3]

Variables

Sass allows variables to be defined. Variables begin with a dollar sign ($). Variable assignment is done with a colon (:).[10]

SassScript supports four data types:[10]

Variables can be arguments to or results from one of several available functions.[11] During translation, the values of the variables are inserted into the output CSS document.[3]

In SCSS style

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Or SASS style

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

Would compile to:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Nesting

CSS does support logical nesting, but the code blocks themselves are not nested. Sass allows the nested code to be inserted within each other.[3]

In SASS style

table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
  
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em

or SCSS style

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

Would compile to:

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

More complicated types of nesting including namespace nesting and parent references are discussed in the Sass documentation.[10]

Mixins

CSS does not support mixins. Any repeated code must be repeated in each location. A mixin is a section of code that contains any valid Sass code. Whenever a mixin is called, the result of translating the mixin is inserted at the calling location. Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.[3]

In SCSS style

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
    padding: 2px;
  }
}

#data {
  @include table-base;
}

Or SASS style 

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

#data
  +table-base

Would compile to:

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Loops

Sass allows for iterating over variables using @for, @each and @while, which can be used to apply different styles to elements with similar classes or ids.

$squareCount: 3
@for $i from 1 through $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i

The above example would compile to:

#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}

#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}

#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

Arguments

Mixins also support arguments.[3]

=left($dist) 
  float: left
  margin-left: $dist

#data 
  +left(10px)

Would compile to:

#data {
  float: left;
  margin-left: 10px;
}

In combination 

=table-base
  th
    text-align: center
    font-weight: bold
  td, th 
    padding: 2px

=left($dist) 
  float: left
  margin-left: $dist

#data 
  +left(10px)
  +table-base

Would compile to:

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Selector inheritance

While CSS3 supports the Document Object Model (DOM) hierarchy, it does not allow selector inheritance. In Sass, inheritance is achieved by inserting a line inside of a code block that uses the @extend keyword and references another selector. The extended selector's attributes are applied to the calling selector.[3]

.error
  border: 1px #f00
  background: #fdd

.error.intrusion 
  font-size: 1.3em
  font-weight: bold

.badError 
  @extend .error
  border-width: 3px

Would compile to:

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Sass supports multiple inheritance.[10]

libSass

At the 2012 HTML5 Developer Conference, Hampton Catlin, the creator of Sass, announced version 1.0 of libSass, an open source C++ implementation of Sass developed by Catlin, Aaron Leung, and the engineering team at Moovweb.[7][12] Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well.[13]

According to Catlin, libSass can be "drop[ped] into anything and it will have Sass in it...You could drop it right into Firefox today and build Firefox and it will compile in there. We wrote our own parser from scratch to make sure that would be possible."[14]

The design goals of libSass are:

IDE integration

IDE Software website
Microsoft Visual Studio Mindscape http://www.mindscapehq.com/products/web-workbench
Microsoft Visual Studio SassyStudio http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d
Microsoft WebMatrix http://www.microsoft.com/web/
Eclipse
JetBrains IntelliJ IDEA (Ultimate Edition) https://www.jetbrains.com/idea/
JetBrains RubyMine http://www.jetbrains.com/ruby/
JetBrains PhpStorm http://www.jetbrains.com/phpstorm/
NetBeans http://plugins.netbeans.org/plugin/34929/scss-support
Emacs SCSS Mode https://github.com/antonj/scss-mode/
Vim haml.zip http://www.vim.org/scripts/script.php?script_id=1433

See also

References

  1. ↑ "Sass: Syntactically Awesome Style Sheets". sass-lang.com.
  2. ↑ "Natalie Weizenbaum's blog".
  3. 1 2 3 4 5 6 7 Media Mark (3.2.12). "Sass - Syntactically Awesome Stylesheets". Sass-lang.com. Retrieved 2014-02-23.
  4. ↑ Kataria, Saransh. "Getting started with sass development". wisdomgeek. saranshkataria.
  5. ↑ Sass - Syntactically Awesome Stylesheets Tutorial
  6. ↑ "Sass / Scss". Drupal.org. Retrieved 2014-02-23.
  7. 1 2 3 H. Catlin (2012-10-15). "Hampton's 6 Rules of Mobile Design". HTML5 Developer Conference. Retrieved 2013-07-11.
  8. ↑ "jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting". Code.google.com. Retrieved 2014-02-23.
  9. ↑ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Retrieved 2014-02-23.
  10. 1 2 3 4 5 Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  11. ↑ Module: Sass::Script::Functions Sass Functions
  12. 1 2 M. Catlin (2012-04-30). "libsass". Moovweb Blog. Retrieved 2013-07-11.
  13. ↑ C. Eppstein (2012-04-15). "Tweet". Retrieved 2013-07-11.
  14. ↑ A. Stacoviak & A. Thorp (2013-06-26). "Sass, libsass, Haml and more with Hampton Catlin". Retrieved 2013-07-30.
  15. ↑ D. Le Nouaille (2013-06-07). "Sassc and Bourbon". Retrieved 2013-07-11.

External links

This article is issued from Wikipedia - version of the Saturday, May 07, 2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.