/ / Fundação 5 configuração de projeto personalizado sass - zurb-foundation, compass-sass, bússola, zurb-foundation-5

Foundation 5 custom sass setup de projeto - zurb-foundation, compass-sass, bússola, zurb-foundation-5

Eu tenho um projeto que gostaria de usarfundação 5 com. Eu já passei pelas etapas de criação de um novo projeto de fundação usando o CLI, mas eu não gosto. Há muitos arquivos e a estrutura não combina com o que eu quero. Então ...

Estou pretendendo adicionar apenas os arquivos necessários ao meu projeto e usar a bússola para compilar todo o CSS.

Tenho notado no projeto criado no CLI algumas coisas que me confundem e gostaria de alguma ajuda para esclarecê-las.

  • No projeto criado no CLI existem dois _settings.scss arquivos um sob o diretório de fundação em bower_components e um em MY_PROJECTscss. Eu estou supondo que por causa disso add_import_path "bower_components/foundation/scss" linha no config.rbqual desses arquivos tem preferência?

  • Porque MY_PROJECT/stylesheets não tem normalize.css (ou foundation.css) nele? E como eles não estão lá? (na minha configuração personalizada eles estão sendo gerados, embora em subdiretórios de stylesheets, também o foundation.css que está sendo gerado para mim não tem alterações de configurações aplicadas, então eu acho que não deveria estar sendo gerado)

Respostas:

0 para resposta № 1

Se você der uma olhada no interior bower_componentsfoundationscss você verá o arquivo foundation.scss. Esse arquivo importa todas as folhas de estilo de todos os componentes adicionais que vêm no pacote Foundation 5 ". Na sua raiz scss diretório, o app.scss é o que compila o SASS em stylesheetsapp.css. Então, ao invés disso:

@import "foundation";

Descomente os componentes individuais que você vai usar. Algo parecido com isto:

@import
//"foundation/components/accordion",
//"foundation/components/alert-boxes",
"foundation/components/block-grid",
//"foundation/components/breadcrumbs",
//"foundation/components/button-groups",
//"foundation/components/buttons",
"foundation/components/clearing",
"foundation/components/dropdown",
//"foundation/components/dropdown-buttons",
//"foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
//"foundation/components/inline-lists",
//"foundation/components/joyride",
//"foundation/components/keystrokes",
//"foundation/components/labels",
//"foundation/components/magellan",
//"foundation/components/orbit",
//"foundation/components/pagination",
//"foundation/components/panels",
//"foundation/components/pricing-tables",
//"foundation/components/progress-bars",
"foundation/components/reveal",
"foundation/components/side-nav",
//"foundation/components/split-buttons",
"foundation/components/sub-nav",
//"foundation/components/switches",
"foundation/components/tables",
//"foundation/components/tabs",
//"foundation/components/thumbs",
//"foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type",
"foundation/components/offcanvas",
"foundation/components/visibility";

Se você gostaria de simplificar sua estrutura de arquivos, sugiro que você remova quaisquer arquivos scss do bower_componentsfoundationscssfoundationcomponents diretório que você não irá usar. O mesmo com o js diretório. Você realmente não precisa modificar nada no bower_components diretório para fazer tudo funcionar. Não totalmente certo porque é tudo contido dentro bower_components, mas eu imagino que tem algo a ver com a possibilidade de atualizar os componentes principais mais tarde com versões futuras.

Alguém poderia, provavelmente, dar uma resposta mais educada.

p.s. - tenha certeza de compass watch na sua CLI para ver qualquer uma dessas alterações feitas nos seus arquivos SASS.


Perguntas relacionadas


Comentários (0)

Adicione um comentário