> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/css/sass.md).

# Sass

Natively, CSS is **verbose**, has **factorization limitations** and can be **hard to maintain**.

These issues are solved using **preprocessors like SASS**.

<http://sass-lang.com/>

{% embed url="<http://sass-lang.com/>" %}

Preprocessors allow writing CSS in a language with the following features:

* Variables.
* Nesting.
* Mixins.
* Inheritance.

Preprocessors generate standard CSS.

```css
$wt-transition-duration: 0.5s;
$wt-user-list-background-color: blue;

.wt-user-list {

    background-color: $wt-user-list-background-color;

    >li {
        @include transition(transform @wt-transition-duration);
    }
        
}
```

Preprocessors can generate vendor prefixed CSS using modules like Bourbon.

​<http://bourbon.io/>

{% embed url="<http://bourbon.io/>" %}