Sass (stylesheet language)

from Wikipedia, the free encyclopedia
Sass
Sass logo
Basic data
Publishing year: 2007
Designer: Hampton Catlin
Developer: Natalie Weizenbaum , Chris Eppstein
Current  version : 3.5.4   (December 15, 2017)
Influenced by: CSS , YAML
Affected: Less , stylus
Operating system : Platform independent
License : MIT license
sass-lang.com

Sass ( S yntactically A wesome S tyle s heets ) is a stylesheet language which, as a CSS preprocessor with variables, loops and many other functions that Cascading Style Sheets (CSS) does not provide, simplifies the creation of CSS and the maintenance of large ones Style sheets made easier. It was originally influenced by the markup language YAML , designed by Hampton Catlin and developed by Natalie Weizenbaum.

After the completion of the initial version, Weizenbaum continued working on Sass together with Chris Eppstein and implemented SassScript, a simple script language for use within Sass files. In addition to the command line-based compiler software available for many platforms under MIT license , other processing programs have become established.

In addition to the original Sass syntax based on YAML, Sass also supports the newer and more widely used SCSS syntax, which is based on the classic CSS notation.

features

Nested rules

One of the key features are nested rules ( nested rules ). This makes it easy to read and write complicated nested selectors. 

#header
  background: #FFFFFF
  /* -or-  :background #FFFFFF */

  .error
    color: #FF0000

  a
    text-decoration: none
    &:hover
      text-decoration: underline

This is compiled to: 

#header {
  background: #FFFFFF;
}
#header .error {
  color: #FF0000;
}
#header a {
  text-decoration: none
}
#header a:hover {
  text-decoration: underline
}

Nested media queries

A special function is the nesting of media queries in selectors. This way, style declarations for one and the same element can be managed in the same place in the source code. 

#header{
  color: red
  @media (min-width: 400px){
    color: blue;
  }
}

This is compiled to: 

#header {
  color: red;
}
@media (min-width: 400px){
  #header {
    color: blue;
  }
}

variables

Sass allows the use of variables. This makes it easier to keep certain values ​​consistent in extensive style sheets. Maintenance tasks are considerably simplified by defining the variables at a central point. 

$link_color: #00F

a
  color: $link_color

Will be compiled to 

a {
  color: #00F
}

Mixins

Mixins allow entire sections of code to be referenced repeatedly. Based on the functions available in classic programming languages, mixins can also be passed arguments. Like normal statements, mixins can contain further nested selectors. In the following example the variable is $farbeassigned to the element as background color in the mixin. 

@mixin box($farbe){
  padding: 1rem;
  border: 2px solid gray;
  background: $farbe;
}

a
  @include box(red);

Will be compiled to 

a {
  padding: 1rem;
  border: 2px solid gray;
  background: red;
}

SCSS syntax

In addition to the Sass syntax (indented syntax) described above, Sass has the newer and more widely used SCSS syntax (Sassy CSS). The indentation of the source text is not decisive here for the nesting of the selectors, but rather the curly brackets as in the classic CSS notation. Semicolons are also required at the end of the rules.

Code comparison

Sass

$meineFarbe: #3BBFCE

.navigation
  border-color: $meineFarbe
  color: darken($meineFarbe, 9%)

SCSS

$meineFarbe: #3BBFCE;

.navigation {
  border-color: $meineFarbe;
  color: darken($meineFarbe, 9%);
}

The compiled CSS is identical in both cases. An automatic conversion between the two syntax variants is possible without any problems.

SassScript

SassScript is a scripting language that is used within Sass. SassScript extends Sass with functions such as basic arithmetic operations, methods for manipulating color values, simple loop constructs and case distinctions .

criticism

The use of a metalanguage for CSS requires the translation into CSS code by a preprocessor and thus a further step in the development process. The associated difficult debugging and the expansion of potential sources of error are criticized . The cascading concept of CSS, which is given with the allocation of classes, could also be lost.

See also

Web links

Individual evidence

  1. ↑ http://sass-lang.com/documentation/file.SASS_CHANGELOG.html
  2. ↑ About the (in) sense of CSS frameworks ( Memento from September 13, 2010 in the Internet Archive )