Sass (stylesheet language)
Sass | |
---|---|
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 $farbe
assigned 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
- Official website (English)
- Sass source code repository (Git )
- Haml / Sass Google Group (English)
- German translation of the SASS Guide (German)
Individual evidence
- ↑ http://sass-lang.com/documentation/file.SASS_CHANGELOG.html
- ↑ About the (in) sense of CSS frameworks ( Memento from September 13, 2010 in the Internet Archive )