Escondendo Elementos

A classe hidden é utilizada para ocultar um elemento na página. Ela aplica a propriedade display: none!important;, que faz com que o elemento não seja exibido no layout da página, mesmo que ele ainda exista no código HTML. O !important garante que essa regra de estilo tenha prioridade sobre outras regras de estilo que possam estar definidas para o mesmo elemento.

Você também pode decidir exibir/esconder elementos baseado no tamanho geral da sua janela de trabalho, ou tamanho do dispositivo.  A classe desktop exibirá o conteúdo apenas em computadores enquanto a classe mobile só renderizará o conteúdo em dispositivos móveis.

É possível também utilizar mob:hidden como alternativa. É uma versão responsiva da classe hidden, aplicando também display: none!important;. Ela é projetada para ocultar um elemento em dispositivos móveis. Essa classe será aplicada somente em telas de tamanho menor, como celulares ou tablets, por exemplo, mantendo o elemento visível em telas maiores.

Esse código SCSS fornece uma maneira simples e eficaz de ocultar elementos em diferentes contextos de layout, seja de forma geral ou especificamente em dispositivos móveis.