Susy: Definindo uma largura de calha fixa?

Você só pode obter uma calha de largura fixa em um layout fluido se usar preenchimento para as calhas. Isso requer box-sizing: border-box que você pode aplicar globalmente em Susy com o mixin de border-box-sizing . Então você deseja usar inside-static para sua posição na calha e algum valor para column-width que pode ser usado para calcular suas calhas.

Eu percebo que a linguagem aqui é um pouco confusa. Você deve definir a largura da coluna, a fim de obter a largura da calha, e então alterar a configuração do recipiente se ainda quiser um recipiente de fluido.

http://sassmeister.com/gist/7da95c41fff076dd7266

As calhas entre os itens sempre serão duas vezes maiores que o acolchoamento da borda - mas você pode adicionar acolchoamento extra ao contêiner sem machucar nada.

Obrigado, isso é muito útil! BTW, eu estava certo em minha suposição de que gutter-position: before está quebrado conforme ilustrado por isso? http://sassmeister.com/gist/94eeb234fc0965dc89c7

Não. Você precisa usar first vez de last se você tiver calhas antes.

Estrondo! Meu modelo mental sobre isso está melhorando. Obrigado novamente, encerrando este problema.

Abrindo este tópico novamente, desculpe, mas isso realmente me incomoda.

Vamos supor que eu queira uma grade de largura total de doze colunas. Eu escreveria o seguinte:

...
matemática: fluido,
colunas: 12,
...

Isso é exatamente o que eu quero e gostaria de não ter que mudar esse comportamento / opções.

Considerando isso, gostaria agora de definir uma margem de 20px. Nem um pixel a mais ou a menos. Como posso fazer isso? É possível conseguir sem ter que definir a largura da coluna em pixels? Como isso é exatamente o que eu não quero fazer (definir uma largura em px) ... Só os pixels que eu quero são para as calhas.

Além disso, isso se torna um pouco mais complicado se eu gostaria de adicionar pontos de interrupção (10px para dispositivos pequenos e 20px para dispositivos maiores). Como eu teria que fazer? Eu simplesmente não consigo entender isso, desculpe se parece estúpido.

Obrigado

Sim, este é um problema de nomenclatura mais do que qualquer coisa, e uma das primeiras coisas que quero corrigir na v3. Sim, você deve definir um column-width , mas porque você tem math:fluid que _não definirá realmente a largura de suas colunas_. Susy apenas usa a largura da coluna definida para calcular medianizes, mesmo quando não está usando essa largura para calcular colunas. Você terá que usar gutter-position: inside-static se quiser calhas estáticas. Caso contrário, não há como fazer a matemática certa. Você simplesmente não pode fazer um layout flutuante fluido em CSS com margens estáticas. Não funciona. (Você pode fazer isso com o flexbox, e eu recomendo se você puder).

Essas configurações fornecerão grades fluidas com calhas de 20 px (preenchimento):

math: fluid,
columns: 12,
column-width: 200px, // it really doesn't matter what number this is...
gutters: 20px/200px, // as long as you get this ratio right...
gutter-position: inside-static,

Desculpe, é meio feio, estou trabalhando em uma maneira melhor.

Entendo. Obrigado por essas explicações! Faz sentido, vejo para onde você está indo. Suponho que você chegue a este tipo de resultado: http://codepen.io/roydukkey/pen/eudsn

(encontrado nesta ameaça muito interessante sobre esse tópico em css: http://stackoverflow.com/questions/7190768/css-fluid-columns-fixed-margins-the-holy-grail-of-holy-grails)

Além disso, embora eu goste da sua sugestão sobre o flexbox, sempre fico um pouco desconfortável em usá-lo para layouts. A propriedade CSS da grade seria perfeita nesse caso, mas seu suporte não é bom o suficiente no momento, infelizmente. Talvez eu experimente o flexbox de qualquer maneira!

Muito obrigado!

Já que você mencionou o flexbox, há planos de oferecer suporte a grades de layout usando-o em um futuro próximo?

Lembro-me em outro tópico a questão de "por que flexbox?" é trazido. Esta é uma razão muito boa, IMO.

Para flexbox, consulte # 583 (entre vários)

$susy: ( math: fluid, columns: 12, columns-width: 200px, gutter: 16px ('convert-units': 'rem') )

Olá, Miriam. Posso converter o valor da calha em unidades rem / em? Em caso afirmativo, você poderia demonstrar por exemplo como isso pode ser feito? Caso contrário, você pode adicionar esse recurso às versões atuais ou futuras, semelhante à escala de acessórios. O exemplo de código mostrado acima. Agradeço antecipadamente.

@maxinakenty Não acho que esse recurso faça sentido no escopo deste projeto. Existem muitas ferramentas (incluindo escala de acessórios) que farão isso por você, e usá-las juntas é simples:

$scale: (
  'gutter': 16px ('convert-units': 'rem'),
);

$susy: (
  'gutter': size('gutter'),
);

Miriam, obrigado pela resposta rápida. Provavelmente eu formulou a pergunta de maneira incorreta.
Agora que estou tentando instalar calhas: 1rem. Susy dá um erro.
Como posso definir uma calha fixa, cujas unidades de medida serão em unidades rem / em?

Peço desculpas. Tentei fazer isso em Susy 3. Tudo funciona bem.

Olá @mirisuzanne !

Obrigado por sua experiência! Consigo usar uma calha fixa de 50px com isso:

$susy : (
  math: fluid,
  columns: 12,
  column-width: 500px, // it really doesn't matter what number this is...
  gutters: 50px/500px, // as long as you get this ratio right...
  gutter-position: inside-static,
);

O problema aqui é que o primeiro elemento tem uma calha de 25px à esquerda e o último elemento tem uma calha de 25px à direita. Eu gostaria de remover isso porque todos os meus elementos (aqueles que levam 100%, por exemplo) não têm uma calha esquerda e direita de 25 px, então isso muda 25 px entre os blocos. E é o mesmo se eu criar uma grade dentro de outro elemento de grade, terei 2x25px à esquerda para o primeiro elemento e 2x25px à direita para o último elemento ... Se eu simplesmente remover o preenchimento esquerdo / direito com primeiro / último pseudo-elemento, a primeira e a última coluna serão mais largas, pois usam box-sizing:border-box ...

Podes ajudar-me, por favor ?
Agradeço antecipadamente !

Olá @ cedriccharles4 - Não consigo pensar em uma boa maneira de fazer isso acontecer em Susy, ou mesmo em CSS. Seriam necessários calc() valores para corresponder os tamanhos de conteúdo interno, então você teria que fazer isso manualmente. De improviso, nem mesmo está claro para mim como essa matemática funcionaria.

Se você deseja apenas o alinhamento com os elementos de largura total, pode adicionar medianizes a eles, em vez de removê-los dos elementos Susy:

.full-width {
  <strong i="9">@include</strong> gutters();
}

Também vale a pena notar que calhas inside (fluidas ou estáticas) tornam a sua matemática em grade simples, se você quiser se livrar de Susy completamente. A abrangência de 3 of 12 ficaria assim:

.no-susy {
  float: left;
  width: percentage(3/12); // span 3 columns out of 12
  padding: 0 1em; // any gutters you want
}

Como eu disse, porém - isso não resolve totalmente o seu problema.