# Stylus

**Stylus** — препроцессор CSS, использующий SASS-подобный синтаксис с возможностью использовать:
* Переменные
* Миксины
* Функции
* Циклы
* Условия

В StartupJS использует и имеет в себе поддержку Stylus. Мы советуем вам пройти эту главу курса и использовать полученые знания при разработке StartupJS приложений.

Об этих особенностях работы со Stylus в рамках StartupJS проектов расскажем далее.


## Синтаксис селекторов

**Stylus** имеет свой простой синтаксис написания селекторов. Данный стиль можно назвать питоноподобных из-за того, что стили для селекторов отделяются отступами(Tab или Space).
Еще одно важное отличие от CSS синтаксиса - это возможность не писать символы `{` и `}` для обертки свойств селектора и символов `:` и `;` между свойством и его значением и после них.

Наглядный пример:

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


Также с помощью символа `&` вы можете ссылаться на родительский селектор следующим образом:

```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;
}
```

В данном примере символ `&` указывает на родство с селектором `.button`


## Переменные

Stylus позволяет вам создавать переменные и использовать их в своих стилях `переменная = значение`. Название переменной может начинаться с букв и символов `_`, `$`.

Пример:

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

.title
  color _titleColor
  font-size _titleSize
```

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

Еще одна интересная особенность в Stylus - это возможность ссылаться на определенные свойства, который уже заданы в селекторе, не присваивая их значения переменным. Пример:

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

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


## Миксины

В Stylus есть возможность создавать и использовать миксины. Например в SturtupJS/ui есть свой набор готовых миксинов, которые вы можете использовать в своём проекте, такие как, например, `font()`:

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

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

> С миксином `font()` вы познакомитесь в следующей главе туториала. Но, как вы видите, он принимает определенные размеры для текста и разворачивает их в `font-size` и `line-height`. Тем самым облегчает вам работу.