O Compass e o SCSS permitem que cada equipe descubra o que funciona melhor para eles. Ao longo do ano passado, a equipe do <a href=”/team/project-evolution” target=”_blank”> Project Evolution </a> criou nossa estrutura para projetos novos e antigos, conforme trazemos seu código em SCSS. Achei que seria bom compartilhar os arquivos que temos e por quê.
Nossos Partials
_base.scss= Nosso projeto configurado. Importações do Compass, variáveis de grade, valores de variáveis padrão e variáveis de esquema de cores. Exceto pelas cores, os valores permanecem os mesmos de projeto para projeto._debug.scss= Uma ótima biblioteca de estilos CSS3 para ajudar a detectar elementos vazios, código malformado ou elementos comuns que geram um erro em um validador WC3. Com base em <a href=” http://www.tomato-root.com/sandbox/holmes/ “target=”_blank”> Holmes </a>._functions.scss= Aqui colocamos as funções que gostaríamos de manter consistentes de projeto para projeto. Qualquer coisa que criarmos que possa ter um uso mais amplo vai aqui._mixins.scss= E aqui é onde colocamos as funções de mixin que são específicas para o projeto em questão. Mixins de estilo de contêiner, estilos repetíveis, etc …_fonts.scss= Gostamos de usar o Base64 em nossos arquivos de fonte sempre que possível e, como isso cria um grande pedaço de código sem sentido, o mantemos separado do resto de nossas folhas de estilo. Fontes de ícones também estão incluídas aqui, com quaisquer declarações específicas de ícones.
Nossas folhas de estilo principais
_layout.scss= Ok, eu menti. Mais uma parcial. Este, porém, é a maior parte de nosso layout de “tela grande” e consultas de mídia. Em vez de agrupar conjuntos de estilo em um bloco de consulta de mídia, porém, nós os agrupamos em um@mixinbloco. Vou explicar mais adiante.style.scss= Todas as nossas declarações mobile-first. No topo,@importbaseamos, funções e mixins, e abrimos com um@includepara nosso html5_boilerplate mxin (localizado em functions.scss). Então, o resto de nossos estilos segue. Na parte inferior, temos@importa parcial de fonts.scss.mq.scss= Todos os nossos mixins de consulta de mídia, envolvidos em declarações de consulta de mídia reais.no-mq.scss= Todo o código que desejamos entregar aos navegadores IE antigos. Como diretriz, quase qualquer conjunto de estilos contido em uma declaração é incluído aqui, já que todos eles juntos somam o layout de ~ 960px que queremos que o antigo IE exiba. Qualquer estilo definido para telas menores que ~ 960px (como ) não está incluído aqui. Também podemos incluir qualquer IE7 e 8 hacks específicos que precisam ser feitos.(min-width: XXem)max-width: 32em
O conteúdo de _layout.scss, mq.scss e no-mq.scss
Aqui está um exemplo de porque temos as coisas estruturadas desta forma. Em , envolvemos o que serão nossas consultas de mídia em a . Em um minuto ficará claro o porquê._layout.scss@mixin
_layout.scss:
@mixin max_width_640() {
// Styles here
}
@mixin min_width_800() {
// Styles here
}Para navegadores que não entendem de consultas de mídia, incluímos este conjunto de estilos dentro de nossa consulta de mídia real, assim:
mq-scss:
@media (max-width: px2em( 640px )) {
@include max_width_640();
}
@media (min-width: px2em( 800px )) {
@include min_width_800();
}Por fim, para navegadores com menos capacidade, incluímos apenas os estilos de que precisamos para criar uma experiência de área de trabalho completa de aproximadamente 960 pixels.
no-mq-scss:
@include min_width_800(); Dessa forma, é bastante fácil fornecer estilos para navegadores habilitados para consulta de mídia e não, enquanto mantemos nosso código razoavelmente organizado.
Esta é uma continuação de outra dica profissional sobre a prática recomendada atual para vincular folhas de estilo no <head>do seu documento: <a href=”/p/5nwvdg”> //coderwall.com/p/5nwvdg </a>