/ / Como alterar a largura máxima da linha no Foundation 6 com SASS - zurb-foundation, zurb-foundation-6

Como alterar a largura máxima da linha no Foundation 6 com SASS - zurb-foundation, zurb-foundation-6

Eu estou tentando alterar a largura máxima da linhade 1200px para 1560px no entanto eu estou tendo dificuldade em encontrar de qualquer maneira para fazer isso. Eu estou usando o SASS para compilar. Eu estou supondo que as configurações só precisam ser alteradas no arquivo settings.scss, no entanto, as alterações que faço parecem não ter efeito sobre a largura da linha.

Eu vi uma variável breakpoints aqui

$breakpoints: (
small: 0,
medium: 1200px,
large: 1560px,
xlarge: 1440px,
xxlarge: 1440px,
);

Lá eu mudei de tamanho: de 1200px para 1560px e mudei os outros pontos de interrupção também.

Eu também mudei a largura global $ aqui

$global-width: rem-calc(1560);

Nada disso parecia ter qualquer efeito. Eu me certifiquei de que ele foi incluído no meu arquivo main.scss.

@import "vendors/foundation/settings";
@import "base/colors";
@import "base/global";
@import "base/typography";

Minha estrutura de pastas é

-_main.scss
-base
-_colors.scss
-_global.scss
-_typography.scss
-vendors
-foundation
-_settings.scss

Também verifiquei novamente e os efeitos de todos os outros arquivos scss estão funcionando muito bem. Eu não estou recebendo erros.

ATUALIZAÇÃO: também me certifiquei de que as configurações importadas acontecessem depois que minha base básica incluísse

@import "../bower_components/foundation-sites/scss/util/util";
@import "../bower_components/foundation-sites/scss/foundation.scss";
@include foundation-global-styles;
@include foundation-grid;

Todos ocorrem antes do resto das minhas importações.

Como você altera a largura máxima ou linhas / pontos de interrupção no SASS no Foundation 6

UPDATE: também adicionei uma variável de teste

$testcolor: #523432;

e usou em outro lugar na base / cores como assim

* { border: 1px solid $testcolor;}

E isso funciona muito bem.

Respostas:

1 para resposta № 1

Acontece que tinha a ver com a ordem que eu importei. O arquivo _settings.scss precisa ser importado antes do arquivo base _foundation.scss.