CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
-
Upload
andre-paulovich -
Category
Technology
-
view
1.952 -
download
0
description
Transcript of CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
![Page 1: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/1.jpg)
CSS´s Dinâmicos com SSAS
André Paulovich
Modernizando a forma como escrevemos as folhas de estilo para websites
![Page 3: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/3.jpg)
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.
![Page 4: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/4.jpg)
04/12/2023
Era uma vez...
![Page 5: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/5.jpg)
04/12/2023
Era uma vez...
![Page 6: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/6.jpg)
04/12/2023
Era uma vez...
![Page 7: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/7.jpg)
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.
![Page 8: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/8.jpg)
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.
![Page 9: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/9.jpg)
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
![Page 10: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/10.jpg)
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”/>
![Page 11: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/11.jpg)
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
![Page 12: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/12.jpg)
Dois principais tópicos sobre CSS
.info { background: #f3b500; text-align: center; border: solid 1px #f3b500;}
PropriedadesSeletores
![Page 13: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/13.jpg)
.header , .title { color: #f3b500;font-size: 10px;Background: #FF0033;
}
Regras de escrita
Lista-de-Seletores { Lista-de-Propriedades}
Seletores
![Page 14: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/14.jpg)
Mas e o CSS3?
![Page 15: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/15.jpg)
=
![Page 16: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/16.jpg)
Text shadowBox shadowFont faceMulti columnTransitions
Exemplos de CSS3
![Page 17: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/17.jpg)
Demo
![Page 18: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/18.jpg)
Prefixos experimentais
-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, Android
Navegadores
![Page 19: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/19.jpg)
Media Queries
![Page 20: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/20.jpg)
Media Queries
![Page 21: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/21.jpg)
Sass -Syntactically Awesome Stylesheets
![Page 22: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/22.jpg)
Quem programa em Ruby?
![Page 23: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/23.jpg)
Para nossa alegria... Precisamos apenas instalá-lo.
http://rubyinstaller.org
![Page 24: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/24.jpg)
![Page 25: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/25.jpg)
Passo final de instalação
gem install sass
![Page 26: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/26.jpg)
É 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
![Page 27: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/27.jpg)
Variáveis
Resultado
![Page 28: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/28.jpg)
demo
![Page 29: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/29.jpg)
“Aninhamento”
Resultado
![Page 30: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/30.jpg)
demo
![Page 31: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/31.jpg)
Combinações
Resultado
![Page 32: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/32.jpg)
demo
![Page 33: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/33.jpg)
Herança de seletores
Resultado
![Page 34: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/34.jpg)
demo
![Page 35: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/35.jpg)
Funções extras
background-color: lighten($navbar-color, 20%);}
lighten
background-color: darken($navbar-color, 20%);}
darken
![Page 36: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/36.jpg)
Perguntas?
![Page 37: CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012](https://reader035.fdocuments.net/reader035/viewer/2022062319/5560b502d8b42af93b8b499f/html5/thumbnails/37.jpg)
Obrigado!
12/05/12