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.