Preprocessor CSS: visão geral, seleção, aplicação

Absolutamente todos os web designers experientes usar o pré-processador. Não há exceções. Se você quiser ter sucesso nesta atividade, não se esqueça sobre estes programas. À primeira vista, eles podem causar um horror tranquila novato – que é muito semelhante à programação! Na verdade, você pode lidar com todos os recursos do pré-processador CSS por cerca de um dia, e se você tentar, em seguida, um par de horas. No futuro, eles vão simplificar significativamente a sua vida.

Como fez CSS pré-processador

Para entender melhor as características desta tecnologia, aprofundar brevemente sobre a história da apresentação visual das páginas Web.

Quando apenas começando a utilização massiva da Internet, há folhas de estilo não existia. Execução de documentos dependia inteiramente do browser. Cada um deles tinha seus próprios estilos, que têm sido utilizados para o tratamento de certos tags. Assim, as páginas parecer diferente dependendo da ordem em que o navegador que você abri-los. O resultado – o caos, confusão, problemas para os desenvolvedores.

Em 1994, o cientista norueguês Håkon Lie desenvolveu uma folha de estilo que poderia ser usado para a aparência das páginas separadamente do HTML-documento. A ideia priglanulas membros do W3C, que partiu imediatamente para a conclusão. Alguns anos depois, ele publicou uma primeira versão da especificação CSS. Em seguida, ela foi constantemente melhorado, sendo finalizado … Mas o conceito permaneceu todos iguais: cada estilo definir determinadas propriedades.

Usando tabelas CSS sempre foi problemático. Por exemplo, os web designers muitas vezes teve problemas com a classificação e agrupamento de recursos e herança não é tão simples.

E então veio a dois mil. Marcas estão cada vez mais começou a se envolver em desenvolvedores front-end profissional, o que é importante estar estilos de trabalho flexíveis e dinâmicos. Existia na colocação de tempo exigiu CSS prefixos e acompanhamento de apoio as novas capacidades do browser. Então, por JavaScript, e especialistas de Ruby foi direto ao assunto, criando um pré-processador – superestrutura para CSS, novos recursos são adicionados a ele.

CSS para iniciantes: características pré-processador

Eles têm várias funções:

• unificar prefixos navegador e cáqui;

• simplificar sintaxe;

• dar a oportunidade de trabalhar com seletores aninhados sem erros;

• melhorar styling lógica.

Em suma: o pré-processador adiciona capacidades de lógica de programação CSS. Agora, estilo não é realizada na lista de costume de estilos e com algumas técnicas simples e abordagens: variáveis, funções, hagfish, ciclos condições. Além disso, a capacidade de usar a matemática.

Vendo a popularidade destes add-ins, o W3C já começaram a adicionar gradualmente a possibilidade de eles no código CSS. Por exemplo, na especificação de modo função não calc (), que é suportado por muitos navegadores. Espera-se que em breve será possível definir variáveis e criar um hagfish. No entanto, isso vai acontecer no futuro distante, e preprocessors já está aqui e já funcionam bem.

preprocessors CSS popular. insolência

Projetado em 2007. Originalmente um Haml componente – um HTML modelo. Novos recursos para elementos CSS controlar desenvolvedores saboreado no Ruby on Rails, que começou a se espalhar por toda a parte. O Sass um grande número de recursos que são agora incluídos em qualquer pré-processador: variáveis, a incorporação de seletores, (então, no entanto, não pode ser adicionado estes argumentos) hagfish.

Declarando variáveis em Sass

Variáveis declaradas com o sinal $. Eles podem manter as suas propriedades e conjuntos, por exemplo: "$ borderSolid: 1px vermelho sólido;". Neste exemplo, nós declaramos uma variável chamada borderSolid e salva-lo valorizar vermelho 1px solid. Agora, se no CSS, precisamos criar uma largura de borda vermelha de 1px, simplesmente indica que variável após o nome da propriedade. Após o anúncio das variáveis não pode ser alterado. Existem várias funções embutidas. Por exemplo, declarar uma variável com um valor de US $ redcolor # FF5050. Agora, no código CSS nas propriedades de qualquer elemento, usá-lo para definir a cor da fonte: p {color: $ RedColor; }. Você quer experimentar com a cor? Use a função escurecer ou clarear. Isso é feito para: p {color: escurecer ($ RedColor, 20%); }. Como resultado, o RedColor cor será 20% mais leve.

Os Sass muitos built-in funções. Worth pelo menos lê-los, mas melhor – para aprender.

nidificação

Anteriormente, para indicar assentamento teve de usar um design longo e desconfortável. Imagine que temos um div, que é p, e nele, por sua vez, ajustada. Para o div, precisamos definir a cor de fonte vermelha, para p – amarelo, para o período – rosa. Em um CSS típico seria feito da seguinte forma:

div {

color: red;

}

div p {

cor: amarelo;

}

div p intervalo {

Cor: Rosa;

}

Com pré-processador CSS tudo se torna mais fácil e mais compacta:

div {

color: red;

p {

cor: amarelo;

.span {

Cor: Rosa;

}

}

}

Elementos literalmente "investido" um ao outro.

directivas de pré-processador

Usando diretrizes @import pode importar arquivos. Por exemplo, temos ficheiro fonts.sass que declara os estilos para fontes. Conecte-o à principal style.sass file: 'fontes' @import. Feito! Em vez de um único arquivo grande com os estilos que temos alguns que podem ser usados para acesso rápido e fácil às propriedades necessárias.

hagfish

Uma das idéias mais interessantes. Ele permite que uma linha para pedir um conjunto de propriedades. Operar como segue:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

A linha-altura: 80px;

font-weight: bold;

}

Hagfish para aplicar ao elemento na página, use o @include directiva. Por exemplo, queremos aplicá-lo para o cabeçalho h1. Nós temos a seguinte estrutura: h1 {@include: largeFont; }

Todas as propriedades de hagfish são atribuídos um elemento h1.

pré-processador Menos

Sintaxe Sass lembra programação. Se você está procurando uma opção que é mais adequado para iniciantes estudando CSS, olhar para Menos. Ela foi criada em 2009. A principal característica – suporte para CSS sintaxe nativa, tão familiarizado com Imposer programação será mais fácil de aprender.

As variáveis são declaradas usando o símbolo @. Por exemplo: @fontSize: 14 px;. obras do assentamento sobre os mesmos princípios que nos Sass. Hagfish são anunciados como segue: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; A linha-altura: 80px; font-weight: bold; }. Para ligá-lo não é necessário o uso de directivas de pré-processador – basta adicionar o hagfish recém-criado nas propriedades do elemento selecionado. Por exemplo: h1 {.largeFont; }.

estilete

Outro pré-processador. Criado em 2011 pelo mesmo autor, que deu ao mundo o Jade, Express e outros produtos úteis.

As variáveis podem ser declaradas em duas maneiras – explícita ou implicitamente. Por exemplo: font = 'Times New Roman'; – uma opção implícita. Mas $ font = 'Times New Roman' – clara. Hagfish são declarados e conectado de forma implícita. A sintaxe é como se segue: RedColor () cor vermelha. Agora nós podemos adicionar o item, por exemplo: RedColor h1 ();.

Stylus à primeira vista pode parecer incompreensível. Onde está os suportes e ponto e vírgula "nativos"? Mas é necessário para mergulhar-lo, tudo se torna muito mais clara. Lembre-se, no entanto, que o desenvolvimento a longo prazo desse pré-processador pode "desmamar" você usa a sintaxe CSS clássico. Isso às vezes causa problemas ao ter que trabalhar com um estilo "puro".

O pré-processador escolher?

Na verdade, é … não importa. Todas as versões oferecem sobre os mesmos recursos apenas a sintaxe de cada um é diferente. Recomendamos proceder da seguinte maneira:

• se você – programador e quer trabalhar com estilos tanto em código, use o Sass;
• se você – um codificador e quer trabalhar com estilos como com o esquema convencional, prestar atenção ao menos;
• se você gosta de minimalismo, use a caneta.

Para todas as variantes de um número infinito de bibliotecas interessantes que podem simplificar ainda mais o desenvolvimento. Usuários Sass recomendados para prestar atenção ao Compass – uma ferramenta poderosa com muitos recursos embutidos. Por exemplo, após a instalação você nunca terá que se preocupar com a versão fornecedor prefixo. Simplifica trabalhar com grades. Existem ferramentas para trabalhar com flores, sprites. A gama já anunciou hagfish. Dê esta ferramenta um par de dias – assim, você vai economizar muito tempo e esforço no futuro.