3

Eu uso o twitter bootstrap para algumas coisas, e me deparei com a facilidade de utilizar o less, como posso fazer, para utilizar as variáveis less do bootstrap num segundo arquivo css?

Por exemplo, chamar as media querys com os valores do bootstrap:

@media (max-width: @screen-xs-max) {
    #test{
        background-color: #285e8e!important;
    }
}

É possível fazer isso em um segundo arquivo, sem modificar o bootstrap.min.css?

2

1 Resposta 1

4

Primeiro você deve utilizar o arquivo Less do Bootstrap ao invés do bootstrap.min.css e no lugar de adicionar o bootstrap no seu HTML você importa no seu arquivo .less com @import '../caminho-do-seu-bootstrap/bootstrap/less/bootstrap.less'; antes das suas definições. Dessa forma o código acima já vai funcionar e você não precisa nem do !important já que pela hierarquia o seu CSS ficará por cima.

Aqui na documentação do Bootstrap tem as variáveis que você pode customizar. Com isso você customiza e usa as variáveis no seu arquivo mesmo, depois de fazer o @import. Por exemplo, no seu Less ficaria algo assim:

@import '../bootstrap/less/bootstrap.less';

@media (max-width: @screen-xs-max) {
    #test{
        background-color: #285e8e;
    }
}

Apenas como observação, é importante nunca alterar códigos de terceiros, pois pode lhe trazer muitos problemas futuros. Tratando-se de CSS, mesmo que não saiba como, assuma que sempre será possível sobrescrever o código de terceiros ao invés de modificá-los, e aí você tenta descobrir como fazer. Na maioria das vezes basta só inserir seu CSS depois e usar as mesmas classes/variáveis para sobrescrever as propriedades.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .