Sass

Sobre Sass
Sass é uma extensão do CSS que adiciona poder e elegância à linguagem básica. Ele permite que você use variáveis, regras aninhadas, mixins, importações em linha e muito mais, tudo com uma sintaxe totalmente compatível com CSS. O Sass ajuda a manter grandes folhas de estilo bem organizadas e a colocar pequenas folhas de estilo em execução rapidamente, principalmente com a ajuda da biblioteca de estilos Compass.

Consulte a documentação do Sass para obter mais informações sobre o Sass.

Sobre Sass Compliers e Git
Existem muitos compiladores Sass disponíveis. Portanto, você pode escolher o que preferir. No entanto, você não deve executar vários compiladores ao mesmo tempo, pois isso pode causar problemas. Cada compilador irá gerar o arquivo style.css com diferentes cores e formatos de medida. Isso pode criar inchaço desnecessário em seu repositório git. Portanto, para reduzir o tamanho do arquivo do seu repositório git, antes de enviar style.css para o git, você deve usar o compilador de PHP Scss. Por favor, inclua apenas style.css em seu último commit, isso também ajuda a reduzir o tamanho do arquivo do repositório. O compilador de PHP Scss pode ser um pouco lento. Você pode querer usar outro compilador enquanto estiver trabalhando no css. Você pode ter que desligar o observador de compilação / arquivo automático do seu compilador antes de compilar com Sccs PHP.

Fluxo de trabalho típico para projetos
– Alterar um arquivo .scss
– Confirme apenas o arquivo .scss para git
– Alterar um arquivo .scss
– Confirme apenas o arquivo .scss para git
– Compile style.scss com o compilador php
– Commit style.css

Fluxo de trabalho típico para o produto
– Alterar um arquivo .scss
– Confirme apenas o arquivo .scss para git
– Alterar um arquivo .scss
– Confirme apenas o arquivo .scss para git
– Faça uma solicitação de pull. Na seção “Como testar”, adicione “Reconstruir sass”.

Configurando um compilador
Aqui estão alguns guias sobre como configurar um compilador para Sass.

Scss PHP Compiler
O Scss PHP usado no SuiteP 7.8 ou superior garante que o SuiteCRM possa compilar o código Sass. Ele também garante que o style.css use a mesma cor e formatos de medida.

Instalar o Composer
sudo apt-get install composer

Instale Scss PHP

Abra um terminal
Execute cd / caminho / para / sua / instância
Run

composer require leafo/scssphp
composer install

Usando Scss PHP

Abra um terminal
Execute cd / caminho / para / sua / instância
Run

Pré 7,10
./vendor/bin/pscss -f compressed themes/SuiteP/css/style.scss > themes/SuiteP/css/style.css

7,10 e acima
./vendor/bin/pscss -f compressed themes/SuiteP/css/Dawn/style.scss > themes/SuiteP/css/Dawn/style.css
./vendor/bin/pscss -f compressed themes/SuiteP/css/Day/style.scss > themes/SuiteP/css/Day/style.css
./vendor/bin/pscss -f compressed themes/SuiteP/css/Dusk/style.scss > themes/SuiteP/css/Dusk/style.css
./vendor/bin/pscss -f compressed themes/SuiteP/css/Night/style.scss > themes/SuiteP/css/Night/style.css

Styling SuiteP
O estilo de cada recurso do SuiteCRM é dividido em arquivos css separados. Isso ajuda a tornar o compilador um pouco mais rápido e também ajuda a deixar o CSS mais organizado. O arquivo style.scss é o arquivo de folha de estilo principal. O que significa que importa todas as outras folhas de estilo para style.css. O variables.scss é a folha de estilo que contém todas as cores e medidas que podem ser facilmente configuradas. Certifique-se de que seu css está em conformidade com nosso guia de estilo e verifique seu código em css lint antes de confirmar.

Estrutura do Arquivo
Aqui está uma lista de cada seção usada atualmente.

variables.scss
 studio.scss
 style.scss
     tabs.scss
     sidebar.scss
     projects.scss
     panels.scss
     navbar.scss
     main.scss
     login.scss
     listview.scss
     forms.scss
     editview.scss
     detailview.scss
     dashboard.scss
     cases.scss
     campaigns.scss
     calendar.scss
     admin.scss
 yui.scss

Adicionando novos arquivos Sass
Quando você precisar adicionar um novo arquivo Sass.

– Crie o .scss no diretório themes / SuiteP / css /.
– Adicione o .css e .css.map ao .gitignore.
– Adicione o seguinte ao topo de .scss.

/**** <Feature Name> ***/
@import ‘variables’;

Tornando seu CSS configurável
Digamos que você queira estilizar a cor de fundo como um elemento de recurso no tema SuiteP.
– Crie uma classe css de prefixo para seu recurso.
– Dê ao elemento uma classe css em seu modelo.

<div class=”feature”>
<div class=”element”> </div>
</div

– Adicione a sua variável a variables.scss.
// Feature
$feature-bg: #333333;

– Em seguida, adicione a variável em sua folha de estilo.
/**** <Feature Name> ***/
@import ‘variables’
.feature .element {
background-color: $feature-bg;
}

Dicas rápidas para escrever CSS melhor
Antes de usar o css lint, aqui estão algumas coisas que você pode fazer para evitar problemas em primeiro lugar:

Nunca use estilos embutidos
Os estilos embutidos são impossíveis de mudar usando CSS bem escrito. Por favor, use classes.
<div class=”feature”></div> em vez de <div style=”color: white”></div>

Sempre use classess sobre id’s
Mesmo quando você deseja selecionar um único elemento no DOM, use apenas uma classe única em vez de um id. Os IDs tendem a ter uma especificidade maior do que as classes e as classes permitem que a mesma funcionalidade seja reutilizada. Quando possível, tente ter uma aula para o recurso e depois uma classe para cada sub-recurso.
.feature .sub-feature-1> .sub-feature-2 {} <div class=”feature”> <div class=”sub-feature-1″> <div class=”sub-feature-2″> </div> </div> </div>

Solicite suas propriedades em ordem numérica alfa
Ajuda outras pessoas a encontrar propriedades quando elas são classificadas em ordem alfanumérica. Principalmente quando há muitas propriedades em um seletor.
.feature .element { background-color: $feature-bg; bottom: auto; left: auto; position: absolute; right: auto; top: 0; width: 66.7%; z-index: 100;}

NÃO empilhe seletores
Isso ajuda no desempenho do navegador e ajuda a tornar seu CSS mais legível. Embora possa parecer contra-intuitivo para os programadores que estão tentando evitar a duplicação de código ou se você precisa obter o mesmo resultado para vários elementos. Considere o uso de variáveis ou mixins. Dessa forma, você ainda pode ter as propriedades em um local.
@mixin subnav() {
padding: 0;
width: auto;
}
.selectLinkTop > .sugar_action_button > .subnav {
@include subnav();
}
.selectLinkBottom > .sugar_action_button > .subnav {
@include subnav();
}

em vez de

.selectLinkTop > .sugar_action_button > .subnav, .selectLinkBottom > .sugar_action_button > .subnav { padding: 0; width: auto; }

Escolha os seletores mais específicos
CSS usa o que é conhecido como especificidade para escolher o seletor de estilo de um elemento. Portanto, tente selecionar itens tão específicos quanto possível, mas com um pouco de espaço para que outros substituam suas alterações. Isso ajuda a reduzir erros nas folhas de estilo.
.button > .unique-class-name {}

em vez de

.button span {}

Tabela 1-1. Exemplo de especificidade

Seletor	Especificidade	Especificidade em base 10
Style=””	1,0,0,0	1000
#wrapper #content {}	0,2,0,0	200
#content .datePosted {}	0,1,1,0	110
div#content {}	0,1,0,1	101
#content {}	0,1,0,0	100
p.comment .dateposted {}	0,0,2,1	21
p.comment{}	0,0,1,1	11
div p {}	0,0,0,2	2
p {}	0,0,0,1	1

NÃO use curingas
Os curingas são realmente ruins para o desempenho e, às vezes, causam um comportamento indefinido no CSS. Use um seletor específico.

NUNCA FAÇA ISSO:

table * {
   background-color: $list-view-action-menu-link-bg !important;
 }
 ul id^=subpanel {
   background-color: $list-view-action-menu-link-bg !important;
 }

NÃO combine elementos com nomes de classe 0
Tente usar os nomes de classe existentes ou dê ao elemento um nome de classe exclusivo.

.unique-class-name {}
/* or */
li > button {}
/* or */
li > .btn-default {}

em vez de

button.btn-default {}

NÃO use !importante
Nunca use! Important, pois evita que outros substituam um estilo em um projeto. Se você está tendo problemas para estilizar um elemento, provavelmente é porque você precisa usar um seletor mais específico ou precisa alterar algum javascript para usar classes css em vez de um estilo embutido.
.selectLinkTop > .sugar_action_button > .subnav a:hover { background-color: $list-view-action-menu-link-bg; }

em vez de

ul li a:hover { background-color: $list-view-action-menu-link-bg !important; }

A única exceção a esta regra é quando você precisa forçar um estilo em um elemento que está usando um estilo embutido. Sempre que possível, altere o javascript para suportar uma classe css.

Observe a ordem de seus seletores
Lembre-se de que os seletores e propriedades são aplicados na ordem em que são carregados no navegador. Portanto, você pode querer mudar a ordem de alguns seletores para obter o resultado correto. Também esteja ciente de que seletores mais específicos substituirão essa regra.
.unique-class { background-color: $page-bg; } .unique-class { background-color: $other-bg; /* this is the color now unless something more specific has been selected */ }

Guia do Usuário

Guia do Administrador

Guia do Desenvolvedor

SuiteCRM Analytics

Sass

Sass

Compartilhar este artigo:

Como podemos ajudar?