css´s dinâmicos com less e sass - semcomp 2012

CSS´s Dinâmicos com SSAS

André Paulovich

Modernizando a forma como escrevemos as folhas de estilo para websites

paulovich@100loop.com@andrepaulovich

André Paulovich

www.100loop.com

www.raptors.com.br

04/12/2023

Era uma vez...

• A internet surgiu com objetivo de compartilhar textos científicos .

• Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação.

04/12/2023

Era uma vez...

04/12/2023

Era uma vez...

04/12/2023

Era uma vez...

04/12/2023

Era uma vez...

Håkon Wium Lie

Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets…

Isso lá em 1994.

Convidou, Bert Bos – que naquele tempo estava trabalhando em um browser chamado Argo – começou a trabalhar no projeto.

Os dois então, trabalharam juntamente no começo do desenvolvimento do CSS.

04/12/2023

Era uma vez...

Cascading HTML Style Sheets (proposta / CERN) - 1994CSS 1 - 1996CSS 2 - 1998CSS 2.1 (revisão) - 2003 <<CSS 3 - em desenvolvimento

Só a partir de 2001 começam a ser realmente usadas devido à falta de suporte por parte dos browsers mais antigos.

O que é CSS?

• Permite separar a formatação visual do conteúdo

• Podemos especificar a formatação para:– Todos os elementos de um determinado tipo– Para um elemento com um determinado id– Todos os elementos com uma determinada

classe– E combinações destas três formas acima

Três formas de especificar o CSS

1) HTML Inline style<div style=“color: red; font-size: 18px”>Texto</div>

2) Style dentro do Head<style type=“text/css”>Configurações de CSS</style>

3) Usando a tag link <link rel=“stylesheet” type=“text/css” href=“arquivo.css”/>

Nome do elemento

div, p, td, table {}

Definição por Id

#logo, #special {}

Nome de classes

.header, .title {}

Combinação dos 3 tipos

table #logo .special {}

Seletores

Dois principais tópicos sobre CSS

.info { background: #f3b500; text-align: center; border: solid 1px #f3b500;}

PropriedadesSeletores

.header , .title { color: #f3b500;font-size: 10px;Background: #FF0033;

}

Regras de escrita

Lista-de-Seletores { Lista-de-Propriedades}

Seletores

Mas e o CSS3?

=

Text shadowBox shadowFont faceMulti columnTransitions

Exemplos de CSS3

Demo

Prefixos experimentais

-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, Android

Navegadores

Media Queries

Media Queries

Sass -Syntactically Awesome Stylesheets

Quem programa em Ruby?

Para nossa alegria... Precisamos apenas instalá-lo.

http://rubyinstaller.org

Passo final de instalação

gem install sass

É uma extensão do CSS3

Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS.

CSS

Regras aninhad

as

Variáveis

Combinações

Herança de

seletores

Variáveis

Resultado

demo

“Aninhamento”

Resultado

demo

Combinações

Resultado

demo

Herança de seletores

Resultado

demo

Funções extras

background-color: lighten($navbar-color, 20%);}

lighten

background-color: darken($navbar-color, 20%);}

darken

Perguntas?

Obrigado!

12/05/12