Como instalar e começar com SASS?

Fazenda de Styles (SASS) sintaticamente impressionante, uma extensão de CSS que pré-processos CSS e funciona bem com todas as suas versões e aprimora a capacidade da linguagem básica. Economiza muito tempo e esforço, impedindo que seus usuários usem valores redundantes de CSS. Além disso, você pode baixar e usar SASS gratuitamente. Neste artigo, vamos lhe dizer como instalar e começar com SASS.

Como instalar e começar com SASS

O procedimento de instalação do SASS pode ser realizado de várias maneiras, como o uso de alguns aplicativos de código aberto, instalando SASS usando a linha de comando, instalando-o nos editores de código desejados, como vs código, sublime, átomo, etc. ou instalando-o em qualquer lugar Do repositório do GitHub.

Vamos discutir esses procedimentos de instalação em detalhes.

Instale o SASS usando aplicativos

Existem inúmeras aplicações disponíveis (pagas e gratuitas) que ajudarão você a instalar e executar o SASS em nenhum tempo para Windows, Mac OS e Linux. Algumas aplicações estão listadas abaixo.

1. Prepopas (pago) para Windows, Mac e Linux.
2. Codekit (pago) para Mac.
3. Hammer (pago) para Mac.
4. Koala (grátis) para Mac, Linux e Windows.
5. Scout-App (gratuito) para Linux, Mac e Windows.

Observação: Não há necessidade de usar os pedidos pagos para as fases de desenvolvimento inicial, porque as livres são totalmente funcionais.

Instale o SASS usando a linha de comando

Abaixo, discutimos como você pode instalar SASS usando a linha de comando em várias plataformas.

Instalando em qualquer lugar (independente)

Você pode, com grande facilidade. Depois de baixado, inclua o pacote em seu caminho. Essa instalação não requer nenhuma dependência, portanto, é a abordagem mais fácil.

Instalando através do NPM

Se você é um nó.Usuário JS então você pode usar o seguinte comando npm e instalar o pacote de sass.

npm install -g sass

O comando acima instala uma implementação JS pura do SASS, que é um pouco mais lenta do que outras opções de instalação disponíveis. No entanto, se você deseja aumentar sua velocidade, poderá alterar sua implementação para qualquer outra, pois a implementação do JS tem a mesma interface como outras implementações.

Instalando através do chocolate

Se você possui um sistema operacional Windows e também um gerenciador de pacotes de chocolate instalado, usa o seguinte comando para instalar o Dart Sass.

Choco Instale Sass

Instalando através do homebrew

Os usuários do Mac OS X e Linux podem instalar o pacote SASS usando o gerenciador de pacotes Homebrew através do seguinte comando.

Brew Install Sass/Sass/Sass

Instale o SASS nos editores de código

Como já mencionado, você pode usar o SASS em vários editores de código, como vs código, sublime, atom etc. Essa pode ser uma opção preferida para muitos, já que a maioria de nós já está familiarizada com muitos editores de código populares. Por exemplo, por uma questão de entendimento, aqui demonstraremos como você pode usar o SASS no código VS.

Passo 1

Visite o compilador SASS ao vivo e pressione Instale para baixar a extensão.

Passo 2

Assim que você pressionar o botão Instalar, a extensão será aberta no seu editor de código VS.

Agora pressione o botão de instalação destacado e a extensão será instalada no editor de código.

Extensão instalada com sucesso!

Observação: Quando a extensão é instalada, você pode usar Ctrl + Shift + X Para abrir a extensão sempre que quiser.

etapa 3

Agora você pode abrir o .Arquivo SCSS e comece a escrever sua folha de estilo. Depois de fazer isso, você notará uma opção dizendo "Assista Sass" no editor.

Clique nesta opção para gerar o arquivo de mapa CSS e o arquivo CSS automaticamente. Mais tarde, você pode vincular este arquivo CSS ao seu documento HTML.

Siga as etapas acima mencionadas para instalar facilmente o SASS no seu editor de código VS.

Conclusão

Você pode instalar e começar com SASS usando várias maneiras, como usar alguns aplicativos de código aberto, instalá-lo usando a linha de comando, instalando-o nos editores de código desejados, como código VS, sublime, átomo, etc. ou instalando-o em qualquer lugar a partir de O repositório do GitHub. Você pode selecionar qualquer uma das opções, dependendo da sua facilidade e desejo. Todas essas opções foram explicadas em profundidade neste post.