Upload
edgar-parada
View
433
Download
11
Tags:
Embed Size (px)
DESCRIPTION
Una presentación sobre los fundamentos de Sass y sus posibilidades para ampliar las características de CSS en nuestros sitios y aplicaciones web.
Citation preview
CSS con superpoderes
Edgar Parada | @edgarparada
Hoy ya no soy yo…• Business Development
Manager
• Developer Evangelist
• Community Professional
• User Group - Team
• Emprendedor & Líder
• Instructor & Speaker
• Melómano y fan del Rock Nacional
Agenda del día• Plataforma Web
• Fundamentos de HTML & CSS
• Flujo de Trabajo
• Pre-procesadores CSS (Less, Sass, Stylus)
• Sass 101
• Q & A
Plataforma WebWebPlatform.org
–Molly Holzschlag (www.molly.com)
“Everyone has something to contribute to the World Wide Web. Why? Because the Web is of us…”
Fundamentos• Hyper Text Markup Language
• Tags (encabezados, párrafos, links, imágenes, etc.)
• Formato y Estructura
• Browsers
• Editores
• HTML5
Fundamentos
• Cascading Style Sheets
• Selectors (elementos, id, clases, avanzados, etc.)
• Propiedades (fondos, texto, bordes, links, etc.)
• Modelo de Caja
• CSS3
Flujo de Trabajo
Pre-procesadores (Sass)
CSS por si mismo puede ser divertido, pero las hojas de estilos cada vez se vuelven más largas, complejas y difíciles de mantener. Es aquí donde un pre-procesador puede ayudar.
Sass permite usar características que no existen en CSS y al final cuando guardas tu archivo Sass se convertirá en un archivo CSS normal.
Syntactically Awesome Stylesheets
Código SASS (Sintaxis SCSS) !!$font-stack: Helvetica, sans-serif; $primary-color: #333; !body { font: 100% $font-stack; color: $primary-color; } !
Resultado en CSS!!body { font: 100% Helvetica, sans-serif; color: #333; }
Instalación Sass
$ gem install sass
Configuración• Simple comando (Archivo / Carpeta)
$ sass --watchestilo.scss:estilo.css
$ sass --watchestilos/sass:estilos
• Aplicación de Escritorio (Scout, Codekit, Compass)
Sintaxis Original de Sass
Código SASS (Sintaxis Original) !!$font-stack: Helvetica, sans-serif $primary-color: #333 !body font: 100% $font-stack color: $primary-color !
Resultado en CSS!!body { font: 100% Helvetica, sans-serif; color: #333; }
Estilos del Código• Nested (default) - Código anidado para reflejar estructura
de HTML
$ sass --style nested
• Expanded - Formato típico de CSS, ideal para aprendizaje
• Compact - Estilo de línea para acceder más rápido a los selectores
• Compressed - Pensado para optimización en sitios con mucho tráfico
Nesting
Código SASS!!$nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; } ! a { display: block; padding: 6px 12px; text-decoration: none; } }
Resultado en CSS!!nav ul { margin: 0; padding: 0; list-style: none; } !nav li { display: inline-block; } !nav a { display: block; padding: 6px 12px; text-decoration: none; }
Import
Código SASS!!// _reset.scss !html, body, ul, ol { margin: 0; padding: 0; } !/* base.scss */ !@import 'reset'; !body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
Resultado en CSS!!html, body, ul, ol { margin: 0; padding: 0; } !body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
Mixins
Código SASS!!@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } !.box { @include border-radius(10px); }
Resultado en CSS!!.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
Extend/Inheritance
Código SASS!!.message { border: 1px solid #ccc; padding: 10px; color: #333; } !.success { @extend .message; border-color: green; } !.error { @extend .message; border-color: red; } !.warning { @extend .message; border-color: yellow; }
Resultado en CSS!!.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } !.success { border-color: green; } !.error { border-color: red; } !.warning { border-color: yellow; }
Operators
Código SASS!!.container { width: 100%; } !article[role="main"] { float: left; width: 600px / 960px * 100%; } !aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
Resultado en CSS!!.container { width: 100%; } !article[role="main"] { float: left; width: 62.5%; } !aside[role="complimentary"] { float: right; width: 31.25%; }
¿Preguntas?
CSS con superpoderes
Edgar Parada | @edgarparada