Como nomear variáveis em pré-processadores?

[neysimoes]

Qual padrão vocês utilizam? Sempre fico em dúvida de como estruturar as variáveis do projeto de uma forma legível e que fique escalável, mas sinceramente não estou muito satisfeito com a forma que tenho nomeado as variáveis.

Normalmente me baseio no padrão de algum framework CSS como bootstrap.

O que vocês fazem?

[felipefialho]

Bela issue!

Acho a nomenclatura do Boostrap muito boa (alias, se querem um exemplo de projeto bem escalável e construído, é o Bootstrap).

Porém já estive muito insatisfeito com as variáveis também, hoje estou achando elas mais sólidas.

Eu uso:

//  
// Variables
//
// 1. Colors
// 2. Spaces 
// 3. Media Queries 
// 4. Typography
//
// ===============================================================

// 
// 1. Colors
// --------------------------------------------------

// Grays
// --------------------------------------------------

$gray-darker  = #111
$gray-dark    = #444
$gray         = #777
$gray-light   = #aaa
$gray-light-2 = #ccc
$gray-lighter = #efefef
$gray-white   = #fbfbfb


// Hexas
// --------------------------------------------------

$yellow      = #876B25
$blue        = #04244a 
$blue-light  = #2188b3
$blue-clean  = #d1dfe4
$red         = #cc0000
$green       = #5cb85c
$orange      = #e07314

$white-alpha = alpha(#fff, 80%)
$gray-alpha  = alpha(#cfcfcf, 95%) 


// Brands
// --------------------------------------------------

$text-color    = #232323

$brand-primary = $gray
$brand-success = #5cb85c
$brand-info    = #5bc0de
$brand-warning = #f0ad4e
$brand-danger  = #d9534f


// 
// 2. Spaces 
// --------------------------------------------------

$space       = 20px                 // Regular space margin 
$space-xs   = ($space / 4)         // Extra small space margin
$space-sm  = ($space / 2)         // Small space margin
$space-md  = ($space + $space-sm) // Medium space margin
$space-lg  = ($space * 2)         // Large space margin
$space-xlg = ($space * 4)         // Extra Large space margin

// 
// 3. Media Queries 
// --------------------------------------------------

$screen-xs   = 520px  // Extra small screen / phone   
$screen-sm   = 768px  // Small screen / tablet   
$screen-md   = 992px  // Medium screen / desktop   
$screen-lg   = 1200px // Large screen / wide desktop  
$screen-xlg  = 1400px // Extra Large screen / wide desktop 
$screen-xxlg = 1900px // Extra Large screen / wide desktop 

$screen-height = '(min-height: $screen-md) and (min-width: $screen-lg)'


// Rupture Settings
rupture.mobile-cutoff  = $screen-sm
rupture.tablet-cutoff  = $screen-md
rupture.desktop-cutoff = $screen-lg
rupture.hd-cutoff      = $screen-xlg  

rupture.scale        = 0 $screen-xs $screen-sm $screen-md $screen-lg $screen-xlg $screen-xxlg
rupture.scale-names  = '0' 'xs' 'sm' 'md' 'lg' 'xlg' 'hd'
rupture.anti-overlap = -1px


// 
// 4. Typography
// --------------------------------------------------

$text-size = 24

Observem que uso nomes para as cores, porém também uso brands, acho essa a melhor saída. Assim sabemos exatamente qual a paleta utilizada no projeto, mas não perdemos a questão da escalabilidade.

Os espaçamentos é sem segredo.

Media queries, eu uso uma base com variáveis e depois defino tudo no Rupture.

[neysimoes]

Curti muito dessa forma, mas ainda acho que dá para colocar mais coisas. 👍
Uma dúvida, pq vc usa '$' nas variáveis do Stylus? Só para não se confundir?

[lnfnunes]

Uso parecido com o @lfeh, inclusive o format "dashed".
Curti a organização!

[felipefialho]

Isso @neysimoes, curto usar o $ para separar melhor o que é variável (e mixins/helpers).

[fernandofleury]

Acho que o contexto da variável define o nome dela. E depende do rumo do projeto né?

No Garden, que queríamos uma abordagem bem genérica pra não impor contexto específico (e nem acho que poderíamos) ficou assim:

{
  "color-text": "#333333",
  "color-neutral": "#ffffff",
  "color-warning": "#fae800",
  "color-danger": "#ed1c24",
  "color-success": "#72bf44",

  "color-default": "#a6a6a6",
  "color-default-dark": "#666666",
  "color-default-darker": "#333333",
  "color-default-light": "#e5e5e5",
  "color-default-lighter": "#f8f8f8",

  "color-primary": "#72bf44",
  "color-primary-dark": "#397615",
  "color-primary-light": "#cae4b8",
  "color-primary-lighter": "#f1f8ec",

  "color-secondary": "#bada2e",

  "default-font-size": "16px",
  "default-font-family": "Helvetica, Arial, sans-serif"
}

Mas em projetos específicos, acho que essas variáveis podem ser bem mais expressivas.

Um ganho pra mim no ponto das cores, em não estabelecer "nomes", é que fica indolor fazer a substituição de uma delas. Acho que fica claro, mas o exemplo é tipo:

Tenho a $color-green, que utilizo como cor principal dentro de toda a minha aplicação.

Por algum motivo de negócios, precisamos trocar esse verde pra um verde água, deixa de ser verde né? Não é super doloroso. Dá pra fazer um replace bem simples, principalmente com os editores que usamos hoje. Mas com essa abordagem abstrata, isso nunca aconteceria.

Temos pontos negativos, que é a suposta legibilidade daquela variável, o que ela vai representar quando o cara ler ela. Mas acho que é pra isso que documentação serve né?

[felipefialho]

Concordo @fernandofleury, mas mantenho a ideia das variáveis com o nome da cor, para criar uma paleta de cores e utilizar nos brands (aqui sim é genérico).

Assim acredito que fica mais fácil eu determinar por exemplos, três tons de azul (light, normal, darker) e modificar conforme necessário.

[neysimoes]

Olha ai como ficou no projeto que estou hoje. Nem preciso falar que copiei metade do que o @lfeh colocou auhauhauhauha

// Brand colors
// --------------------------------------------------
$primary   = #54c0ef
$dark-gray = #333333

$ultra-dark  = #283553
$dark        = #374a74
$light       = #8493a8
$ultra-light = #cad3df

$category-body        = #8dc63f
$category-performance = #ff7800
$category-face        = #23bfeb
$category-hair        = #fcc31e

// Spaces
// --------------------------------------------------
$space     = 20px                 // Regular space margin
$space-xs  = ($space / 4)         // Extra small space margin
$space-sm  = ($space / 2)         // Small space margin
$space-md  = ($space + $space-sm) // Medium space margin
$space-lg  = ($space * 2)         // Large space margin
$space-xlg = ($space * 4)         // Extra Large space margin


//
// Typography
// --------------------------------------------------
$rem-base          = 16px
$font-size-default = rem(16px)

//
// Media Queries
// --------------------------------------------------

$screen-xs   = 520px  // Extra small screen / phone
$screen-sm   = 768px  // Small screen / tablet
$screen-md   = 992px  // Medium screen / desktop
$screen-lg   = 1200px // Large screen / wide desktop
$screen-xlg  = 1400px // Extra Large screen / wide desktop
$screen-xxlg = 1900px // Extra Large screen / wide desktop

$screen-height = '(min-height: $screen-md) and (min-width: $screen-lg)'


// Rupture Settings
rupture.mobile-cutoff  = $screen-sm
rupture.tablet-cutoff  = $screen-md
rupture.desktop-cutoff = $screen-lg
rupture.hd-cutoff      = $screen-xlg

rupture.scale        = 0 $screen-xs $screen-sm $screen-md $screen-lg $screen-xlg $screen-xxlg
rupture.scale-names  = '0' 'xs' 'sm' 'md' 'lg' 'xlg' 'hd'
rupture.anti-overlap = -1px

//
// Border Radius
// --------------------------------------------------
$border-radius-base  = 4px
$border-radius-large = 6px
$border-radius-small = 3px


//
// Form
// --------------------------------------------------
$form-bg-default       = #eceff4
$form-border-default   = $ultra-light
$form-color-default    = $ultra-light
$form-disabled-opacity = 0.8


//
// Buttons
// --------------------------------------------------
$btn-font-weight           = normal

$btn-default-color         = #333
$btn-default-bg            = #fff
$btn-default-border        = #ccc

$btn-primary-color         = #fff
$btn-primary-bg            = $primary
$btn-primary-border        = darken($btn-primary-bg, 5)

$btn-link-disabled-color   = $gray-light
$btn-border-radius-base    = $border-radius-base

[lnfnunes]

Curiosidade: em que momento vcs utilizam isso ?
$screen-height = '(min-height: $screen-md) and (min-width: $screen-lg)'

[vitor-mendrone-deel]

@neysimoes @lfeh até pra nomear variáveis nossos workflows são semelhantes hahahaha

[neysimoes]

@lnfnunes cara nem tinha pensado nisso, copiei o bloco todo o joguei lá. To montando a base do sistema ainda não vi para que servia, talvez no contexto dele faça sentido. Vou tirar se não for usar.

[felipefialho]

@lnfnunes haha, cara, peguei de um projeto que estava aberto.

Esse pedaço de código é especifico desse projeto. Precisava que em uma altura e um width minimo, ele tivesse uma configuração especifica e achei melhor criar uma variável.

Normalmente não uso.

[felipefialho]

Muito bom @neysimoes, essa é minha base, mas também costumo incluir variáveis de botão quando preciso \o

Gostou desse esquema de usar $ para variáveis?

[grvcoelho]

Eu discordo de ter os estilos de botões no arquivo de variáveis!

Para mim, o que está num variables.scss deve ser variáveis que são compartilhadas por mais de um componente.

Eu colocaria as variáveis de botão no arquivo que estiliza os botões (buttons.scss).

[grvcoelho]

De resto, eu nomeio bem parecido com vocês! Sempre procuro utilizar a seguinte abordagem: property-value. Ex: $color-primary, $border-radius-lg, etc.

[felipefialho]

@grvcoelho Concordo com você, as variáveis especificas de componentes coloco dentro do arquivo delas.

Isso só muda se essas variáveis precisarem ser utilizadas em mais de um componente, ai vai para o variables.styl

[felipefialho]

Usar nomes de cores é uma boa ideia, mas como você define esses nomes?

[jhonnymoreira]

@lfeh Eu costumo utilizar esse serviço aqui: http://chir.ag/projects/name-that-color/

De início é um pouco mais trabalhoso, pq tem que ir, verificar a cor e etc, mas vejo ganho nessa questão de evitar duplicatas e nomes fáceis de serem sobrescritos.

[felipefialho]

Do carario!

Adicionei no meu useful-tools

[jhonnymoreira]

@lfeh fico feliz que tenha gostado [=

[williamcosta]

Mas nomear as cores com o nome próprio não gera um retrabalho de trocar no nome dela caso queira em um futuro mudar a cor da variável? Ai teria que subistituir em todos os arquivos que chamo a variável?

[felipefialho]

Não exatamente, a ideia de criar variável de cor é só pra fazer a paleta de cores, ai é só usar ela nos 'brands' depois.

[jhonnymoreira]

@williamcosta é isso que o @lfeh falou. Quando digo sobre aliases, é isso. O teu _settings.scss ainda vai existir e teu trabalho seria em 1 arquivo apenas.

[williamcosta]

Entendi @lfeh e @jhonnymoreira

[tayanevalls]

E quando o cliente possui uma paleta com 10 tons de vermelho ? por exemplo: vermelho, vermelho claro, vermelho escuro, vermelho sangue, vermelho xpto rs como dar nome para essas variáveis? e se lá na frente o brand dele não for mais vermelho?

Tenho essa dificuldade em definir as nomenclaturas, alguma sugestão? devo usar $color-red-dark, $color-red-light, enfim...

[laurindo]

Estou passando por essa duvida tambem de nomear nome das variaveis para uma paleta de cores @tayanevalls . Quem puder sugerir eu tbm agradeço.

[vinicius-franca]

@tayanevalls @laurindo há algum tempo vi isso no variables do materialize e achei interessante, acho que vale a referência:
$materialize-red: (
"base": #e51c23,
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);

[laurindo]

Obrigado @vinicius-franca . Achava que usar a numeração poderia não ser uma boa prática.

[eduardojmatos]

@neysimoes no Gaiden, styleguide do GetNinjas, a gente fez o seguinte, para cores:

$colors: (
  air: (base: #fff),
  blackNeutral: (base: #333, lighter: rgba(0, 0, 0, .6), darker: rgba(0, 0, 0, 1)),
  breeze: (base: #eff4fa, darker: #c9d7e8),
  punch: (base: #1393f6, lighter: #21c1ff),
  serious: (base: #1272d5, darker: #004183),
  warning: (base: #ffd600, darker: #e7ab0c),
  reward: (base: #40d879, darker: #26a656),
  rewardType: (base: #2abf62, darker: #097632),
  bloody: (base: #b24141, darker: #6d0909),
  rastaGray: (base: #536e7b, darker: #36474e),
  recusaGray: (base: #e7e7e7),
  offWhite: (base: #eceff1),
  sand: (base: #e2d7ad),
  wall: (base: #f9f9f9),
);

Daí criamos functions pra pegar o valor. Como é Sass, usamos map-get:

@function get-color($color, $key: base, $opacity: 1, $palette: $colors) {
  @if type-of($color) == 'map' {
    @return get-color($color...);
  }

  $colorFromPalette: map-deep-get($palette, $color, $key);
  @return if($opacity < 1, rgba($colorFromPalette, $opacity), $colorFromPalette);
};

Assim a gente consegue fazer variações dentro da cor, assumindo que a chave default é a base.

https://github.com/getninjas/gaiden/blob/master/src/scss/settings/_colors.scss#L35-L50

[tayanevalls]

Legal! valeu gente.

[kvnol]

Essa discussão é antiga, mas hoje em dia estou usando em todos os projetos o esquema de variáveis do Ionic: https://ionicframework.com/docs/theming/color-generator