# Stylus

**Stylus** is a CSS preprocessor using SASS-like syntax with the ability to use:
* Variables
* Mixins
* Functions
* Loops
* Conditions

StartupJS supports and uses Stylus. We advise you to complete this chapter of the course and use the gained knowledge while developing StartupJS applications.

We will further discuss the features of working with Stylus within StartupJS projects.

## Selector syntax

**Stylus** has its own simple syntax for writing selectors. This style can be called python-like because styles for selectors are separated by indents (Tab or Space). Another important difference from CSS syntax is the absence of necessity to write symbols `{` `}` to wrap selector properties and `:` `;` symbols between the property and its value and after them.

Example:

**Stylus**
```css
.root
  background-color blue
```
**CSS**
```css
.root {
  background-color: blue;
}
```


You can also refer to the parent selector using the symbol `&`:

```pug
TouchableOpacity.button(styleName=[active])
```

**Stylus**
```css
.button
  background-color white
  &.active
    background-color blue
```
**CSS**
```css
.button {
  background-color: white;
}

.button .active {
  background-color: blue;
}
```

In this example, the `&` symbol indicates a kinship with the `.button` selector


## Variables

Stylus allows you to create variables and use them in your styles `variable = value`. Variable names can start with letters and symbols `_`, `$`.

Example:

***Stylus***
```css
_titleColor = #2F4F4F
_titleSize = 24px

.title
  color _titleColor
  font-size _titleSize
```

***CSS***
```css
.title {
  color: #2F4F4F;
  font-size: 24px;
}
```

Another interesting feature in Stylus is the ability to refer to specific properties that are already set in the selector without assigning their values to variables.

***Stylus***
```css
.card
  margin 8px
  padding @margin * 2
```

***CSS***
```css
.card {
  margin: 8px;
  padding: 16px;
}
```

## Mixins

Stylus has the ability to create and use mixins. For example, StartupJS/UI has its own set of the ready-made mixins that you can use in your project, such as, for example, `font()`:

***Stylus***
```css
.text
  font(h1)
```

***CSS***
```css
.text {
  font-size: 20px;
  line-height: 28px;
}
```

> You will learn more about the `font()` mixin in the next chapter of the tutorial. But, as you can see, it can take certain text dimensions and expand them to `font-size` and `line-height`. This makes your job easier.