HAML SASS introducción CSS HTML

HTML y CSS dietéticos
+
David Grilli
@djGrill

Agenda
temas = ['HAML', 'SASS']
temas.each do |tema|
print 'Introducción a ', tema
print ‘Contenido estático en ', tema
print ‘Contenido dinámico en ', tema

Introducción a HAML
<h1>Joincic 5</h1>
<p>
Texto en latín cuyo significado es un
misterio para algunos de nosotros
</p>
<% código ruby %>

Introducción a HAML
> HTML Abstraction Markup Language
> DRY
> Identación

Contenido estático en HAML
%h1 elementos HTML
.clase clases CSS
#id IDs
{:atr} atributos

%h1 Joincic 5
%p
Texto en latín cuyo significado es un
misterio para algunos de nosotros

!!! Strict
%html
%head
%body
%h1 Hola, mundo!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<h1>Hola, mundo!</h1>
</body>
</html>

!!! Strict
%html
%head
%body
%h1 Frutas famosas
%div
%ul
%li Manzana
%li Mora
%li Ninja

<html>
<head></head>
<body>
<h1>Frutas famosas</h1>
<div>
<ul>
<li>Manzana</li>
<li>Mora</li>
<li>Ninja</li>
</ul>
</div>
</body>
</html>

!!! Strict
%html
%head
%body
%h1 Frutas famosas
%div.list#lista_1
%ul
%li Manzana
%li Mora
%li Ninja

!!! Strict
%html
%head
%body
%h1 Frutas famosas
.list#lista_1
%ul
%li Manzana
%li Mora
%li Ninja

<html>
<head></head>
<body>
<div class="list" id="lista_1">
<ul>
<li>Manzana</li>
<li>Mora</li>
<li>Ninja</li>
</ul>
</div>
</body>
</html>

!!! Strict
%html
%head
%body
%h1 Frutas famosas
.list#lista_1
%ul
%li
%a{:href => "http://apple.com"}
Manzana
%li Mora
%li Ninja

<html>
<head></head>
<body>
<div class="list" id="lista_1">
<ul>
<li><a href="http://apple.com">Manzana</a></li>
<li>Mora</li>
<li>Ninja</li>
</ul>
</div>
</body>
</html>

Contenido dinámico en HAML
= out lógica con output
- logic lógica sin output
-#com comentarios

- @clase = "principal"
!!! Strict
%html
%head
%body
%h1 Frutas famosas
%ul
%li
%a{:href => "http://apple.com", :class => @clase}
Manzana
%li Mora
%li Ninja

- @clase = "principal"
!!! Strict
%html
%head
%body
%h1 Frutas famosas
%ul
%li
%a{:href => "http://apple.com", :class => @clase}
Manzana
= @clase
%li Mora
%li Ninja

Introducción a SASS
> Syntactically Awesome StyleSheets
> CSS estático a partir de una plantilla dinámica
> Identación

Contenido estático en SASS
h1 elementos HTML
.clase clases CSS
#id IDs
:atr atributos

body
h1
:blackground-color #f5f6f7
a
:color #444

body h1 {
blackground-color: #f5f6f7; }
body h1 a {
color: #444; }

body
h1
a.primero
:color #444
a #id_1
:color #777

body h1 {
blackground-color: #f5f6f7; }
body h1 a.primero {
color: #444; }
body h1 a #id_1 {
color: #777; }

Contenido dinámico en SASS
!var variables
+out comportamiento con output
=comp comportamiento sin output

!naranja = #ff7f00
body
h1
:blackground-color = !naranja
a
:color #444

body h1 {
blackground-color: #ff7f00; }
body h1 a {
color: #444; }

=texto
:margin-bottom 0.7em
:color #abc
body
h1
+texto

body h1 {
blackground-color: #f5f6f7;
margin-bottom: 0.7em;
color: #abc; }

http://haml.info
http://sass-lang.com
http://peepcode.com
Más información Contacto
http://twitter.com/djGrill
http://davidgrilli.com

HAML SASS introducción CSS HTML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie HAML SASS introducción CSS HTML

Ähnlich wie HAML SASS introducción CSS HTML (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

HAML SASS introducción CSS HTML