Folhas de estilo sintaticamente impressionantes usando bússola no Sass
Em nosso último post, mencionamos uma vez sobre o Compass. Segundo o site oficial, é descrito como uma estrutura de autoria CSS de código aberto.
Resumindo, o Compass é uma extensão do Sass e, como o LESS Element of LESS, tem um monte de CSS3 Mixins prontos para uso, exceto que ele também adicionou várias outras coisas que fazem dele uma ferramenta complementar mais poderosa para o Sass. Vamos dar uma olhada.
Instalando Bússola
Bússola, como o Sass, precisa ser instalado em nosso sistema. Mas, se você estiver usando um aplicativo como o Scout App ou o Compass.app, isso não será necessário.
Sem eles, você precisa fazer isso “manualmente” através Terminal / prompt de comando. Para fazer isso, digite a seguinte linha de comando;
No terminal Mac / Linux
sudo gem instalar bússola
No prompt de comando do Windows
gem instalar bússola
Se a instalação for bem-sucedida, você deverá receber uma notificação conforme mostrado abaixo;
Em seguida, execute a seguinte linha de comando em seu diretório de trabalho para adicionar Arquivos de projeto da bússola.
init bússola
Leitura Adicional: Documentação de linha de comando bússola
Configuração da bússola
Se você executou este comando init bússola, Agora você deve ter um arquivo chamado config.rb no seu diretório de trabalho. Este arquivo é usado para configurar a saída do projeto. Por exemplo, podemos alterar nossos nomes de diretório preferidos.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Exclua a linha de comentário gerada pelo Compass; montamos verdade se precisarmos que os comentários sejam impressos ou falso se não tem que.
line_comments = false
Nós também podemos decidir a saída CSS. Existem quatro opções que podemos selecionar : expandido, :compactar, :comprimidoe : aninhado. Por enquanto, nós só precisamos que ele seja expandido, pois ainda estamos no estágio de desenvolvimento.
output_style =: expandido
Eu acho que essas configurações serão suficientes para a maioria dos projetos em geral, mas você sempre pode consultar esta documentação, Compass Configuration Reference se você precisar de mais preferências.
Por fim, precisamos ver cada arquivo no diretório com esta linha de comando;
relógio de bússola
Essa linha de comando, como no Sass, assiste a todas as alterações de arquivos e cria ou atualiza os arquivos CSS correspondentes. Mas lembre-se, execute esta linha depois de ter configurado o projeto em config.rb, senão ele simplesmente ignorará as mudanças no arquivo.
Mixins CSS3
Antes de percorrer o CSS3, no nosso primário .scss arquivo, precisamos importar a bússola com a seguinte linha @import "compass";, isso importará todas as extensões no Compass. Mas, se precisarmos apenas de CSS3, também podemos fazê-lo mais especificamente com essa linha @import "compass / css3".
Leitura Adicional: Compasso CSS3.
Agora vamos começar a criar algo com Saas e Compass. No documento HTML, assumindo que você também criou um, colocaremos a seguinte marcação simples:
A ideia também é simples; vamos criar uma caixa girada com cantos arredondados, e abaixo estão os nossos estilos aninhados Sass para o iniciante;
corpo background-color: # f3f3f3; seção largura: 500px; margem: 50px auto 0; div largura: 250px; altura: 250px; background-color: #ccc; margem: 0 auto;
E, para obter o nosso retângulo nos cantos arredondados, podemos incluir os Mixins da Compass CSS3 da seguinte forma;
corpo background-color: # f3f3f3; seção largura: 500px; margem: 50px auto 0; div largura: 250px; altura: 250px; background-color: #ccc; margem: 0 auto; @include border-radius;
este raio de borda Mixins irá gerar todos os prefixos do navegador e, por padrão, o raio do canto será 5 px. Mas também podemos especificar o raio para nossa necessidade dessa maneira @include border-radius (10px); .
seção div largura: 250px; altura: 250px; background-color: #ccc; margem: 0 auto; -webkit-border-radius: 10 px; -moz-border-radius: 10 px; -ms-border-radius: 10px; -o-border-radius: 10px; raio de fronteira: 10 px;
Em seguida, conforme o plano, também giraremos a caixa. É muito fácil fazê-lo com o Compass, tudo o que precisamos fazer é chamar o método de transformação, assim;
corpo background-color: # f3f3f3; seção largura: 500px; margem: 50px auto 0; div largura: 250px; altura: 250px; background-color: #ccc; margem: 0 auto; @include border-radius (10px); @include girar;
Este Mixins também irá gerar os prefixos do fornecedor tedioso e a rotação terá 45 graus por padrão. Veja o CSS gerado abaixo.
seção div largura: 250px; altura: 250px; background-color: #ccc; margem: 0 auto; -webkit-border-radius: 10 px; -moz-border-radius: 10 px; -ms-border-radius: 10px; -o-border-radius: 10px; raio de fronteira: 10 px; -webkit-transform: rotaciona (45deg); -moz-transform: rotate (45deg); -ms-transform: rotaciona (45deg); -o-transformar: girar (45deg); transformar: girar (45deg);
Assistentes da Bússola
Um dos recursos mais poderosos do Compass é o Helpers. Segundo o site oficial, Os ajudantes da bússola são funções que aumentam as funções fornecidas pelo Sass. Tudo bem, vamos dar uma olhada nos exemplos a seguir para obter uma imagem clara.
Adicionando arquivos @ font-face
Neste exemplo, vamos adicionar uma família de fontes personalizada @Tipo de letra regra. Em CSS3 simples, o código pode ser algo como este abaixo, consistindo de quatro tipos diferentes de fontes e também é difícil lembrar para algumas pessoas.
@ font-face font-family: "MyFont"; src: url ('/ fonts / font.ttf') formato ('truetype'), formato url ('/ fonts / font.otf') ('opentype'), formato url ('/ fonts / font.woff') ('woff'), formato url ('/ fonts / font.eot') ('embedded-opentype'); Com bússola podemos fazer o mesmo mais facilmente com arquivos de fonte () Ajudantes;
@include font-face ("MyFont", arquivos de fontes ("font.ttf", "font.otf", "font.woff", "font.eot")); O código acima irá gerar um resultado que é exatamente o mesmo que o primeiro trecho de código, ele também irá detectar automaticamente o tipo de fonte e adicioná-lo ao formato() sintaxe.
No entanto, se dermos uma olhada no código de perto, você verá que não adicionamos o caminho da fonte (/ fonts /). Então, como a Compass sabia onde as fontes estão localizadas? Bem, não se confunda, esse caminho é realmente derivado de config.rb com fonts_path propriedade;
fonts_dir = "fontes"
Então, digamos que mudamos para fonts_dir = "myfonts", então o código gerado será url ('/ myfonts / font.ttf'). Por padrão, quando não estamos especificando o caminho, o Compass o direcionará para stylesheets / fonts.
Adicionando Imagem
Vamos criar outro exemplo, desta vez vamos adicionar uma imagem. Adicionar imagens através de CSS é algo comum. Geralmente fazemos isso usando o imagem de fundo propriedade, como assim;
div background-image: url ('/ img / the-image.png'); Na bússola, em vez de usar o url () função, podemos substituí-lo com imagem URL() Ajudantes e similares para adicionar @Tipo de letra acima, podemos ignorar completamente o caminho e deixar o Compass lidar com o resto.
Esse código também gerará a mesma declaração de CSS do primeiro snippet.
div background-image: image-url (imagem-imagem.png);
Além disso, a Compass também possui Auxiliares de Dimensão de Imagem, ela detecta principalmente a largura e a altura da imagem, portanto, caso precisemos que ambas sejam especificadas em nosso CSS, podemos adicionar mais duas linhas, como segue;
div background-image: image-url ("images.png"); width: image-width ("images.png"); height: imagem-altura ("images.png"); A saída se tornará algo assim;
div imagem de fundo: url ('/ img / images.png? 1344774650'); largura: 80px; altura: 80px; Leitura Adicional: Funções auxiliares da bússola
Pensamento final
Tudo bem, nós discutimos bastante sobre a Compass hoje e, como você pode ver, é realmente uma ferramenta poderosa e vamos escrever CSS de uma maneira mais elegante.
E, como você já sabia, o Sass não é o único Pré-processador CSS; há também MENOS que discutimos antes. No próximo post, vamos tentar comparar, cara a cara, qual desses dois trabalhos melhor no pré-processamento de CSS.
- Fonte de download
