# Recursos Sass

Temos também disponível utilidades feitas usando Sass (opens new window), que permitem mais flexibilidade na hora de usar o que o Design System fornece.

Para usar basta importar nosso arquivo Sass:

<style lang="scss">
  @import '~@estrategiahq/coruja-web-ui/dist/sass/utils.scss';

  body {
    // Usa nosso mixin de media-query
    @include c-mq(lg) {
      background-color: red;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10

Para configurar Sass na sua aplicação:

# API

API das utilidades da Sass como variáveis e mixins.

# Mixins

# Media Query

Temos nosso mixin de media query, sendo necessário apenas importa-lo e usá-lo passando como argumento o tamanho da tela e a direcao da media-query (por default mobile first).

@mixin c-mq ($breakpoint (xs, sm, md, lg ou xl), $dir ([min-width] ou max-width)) {

Exemplo:


@import '~@estrategiahq/coruja-web-ui/dist/sass/utils.scss';

.header {
  // Header inicia com 30px de altura no mobile
  height: 30px;

  // Muda para 40px de altura em tablet
  @include c-mq (sm) {
    height: 40px;
  }

  // Muda para 80px de altura em desktop
  @include c-mq (md) {
    height: 80px;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Para mais informações sobre os tamanhos de tela e breakpoints consulte a documentação do nosso Grid. (opens new window).