SlideShare a Scribd company logo
1 of 14
Download to read offline
SASS
Preprocesador CSS
Ejemplo de SASS
/* Definir variables */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Usar variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
Características
Syntactically Awesome Stylesheet
Preprocesador CSS libre y gratuito
Compatible con todas las versiones de CSS
Diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006.
Reduce la repetición de código: ahorra tiempo.
Funcionamiento
Es necesario un preprocesador (transpilador) para convertir código Sass en CSS estándar.
1. Descargar aplicación para crear código SASS (https://sass-lang.com/install)
2. Crear el código .scss.
3. Transpilar el código para obtener el .css resultante.
Transpilar: tomar un código escrito en un lenguaje y traducirlo a otro.
Elementos SASS
Variables
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Ámbito de variables
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
h1 {
color: green;
}
p {
color: red;
}
Ámbito: una variable definida dentro de una regla
solo se aplica en esa regla.
Variables globales (!global)
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
h1 {
color: green;
}
p {
color: green;
}
Ámbito: una variable definida como globals se
aplica a un ámbito global.
Anidamiento de reglas
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Anidamiento de propiedades
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
Importar ficheros parciales (comienzo con _)
//_colors.scss
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
//main.scss
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: #4169E1;
}
Mixins
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
.danger {
@include important-text;
background-color: green;
}
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
Mixins con variables y valores por defecto
//Mixin con dos argumentos
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); }
.myNotes {
@include bordered(red, 2px); }
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
.myTips {
@include bordered($color: orange);
}
Herencia (@extend)
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}

More Related Content

What's hot

HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design Mindy McAdams
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyAdam Soucie
 
Sitemap Templates by Creately
Sitemap Templates by CreatelySitemap Templates by Creately
Sitemap Templates by CreatelyCreately
 
The Service Mesh: It's about Traffic
The Service Mesh: It's about TrafficThe Service Mesh: It's about Traffic
The Service Mesh: It's about TrafficC4Media
 
Automation with ansible
Automation with ansibleAutomation with ansible
Automation with ansibleKhizer Naeem
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Mediaqueries
MediaqueriesMediaqueries
MediaqueriesBrillio
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid LayoutRachel Andrew
 
Tailwind CSS - KanpurJS
Tailwind CSS - KanpurJSTailwind CSS - KanpurJS
Tailwind CSS - KanpurJSNaveen Kharwar
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Adolfo Sanz De Diego
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)Woodridge Software
 
Introduction to Ansible
Introduction to AnsibleIntroduction to Ansible
Introduction to AnsibleCoreStack
 
Web assembly - Future of the Web
Web assembly - Future of the WebWeb assembly - Future of the Web
Web assembly - Future of the WebCodeValue
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!Syahmi RH
 

What's hot (20)

SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS Property
 
Sitemap Templates by Creately
Sitemap Templates by CreatelySitemap Templates by Creately
Sitemap Templates by Creately
 
The Service Mesh: It's about Traffic
The Service Mesh: It's about TrafficThe Service Mesh: It's about Traffic
The Service Mesh: It's about Traffic
 
Automation with ansible
Automation with ansibleAutomation with ansible
Automation with ansible
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Mediaqueries
MediaqueriesMediaqueries
Mediaqueries
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
 
Tailwind CSS - KanpurJS
Tailwind CSS - KanpurJSTailwind CSS - KanpurJS
Tailwind CSS - KanpurJS
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
 
Introduction to Ansible
Introduction to AnsibleIntroduction to Ansible
Introduction to Ansible
 
Css margins
Css marginsCss margins
Css margins
 
Css3
Css3Css3
Css3
 
Web assembly - Future of the Web
Web assembly - Future of the WebWeb assembly - Future of the Web
Web assembly - Future of the Web
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
 

Similar to Introducción a SASS - Diseño de Interfaces Web (Desarrollo de Aplicaciones Web)

"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelowebcat
 
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y CompassAdaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y CompassParadigma Digital
 
Desarrollo web inteligente
Desarrollo web inteligenteDesarrollo web inteligente
Desarrollo web inteligenteMax Kraszewski
 
Sass - Preprocesador de CSS
Sass  - Preprocesador de CSSSass  - Preprocesador de CSS
Sass - Preprocesador de CSSJavier Herrera
 
Variables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPressVariables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPressWordPress Tarragona
 
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio CarracedoPHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio CarracedoPHP Vigo
 
Front end basics - Sass
Front end basics - SassFront end basics - Sass
Front end basics - SassNadal Soler
 
Css: bases y buenas prácticas
Css: bases y buenas prácticasCss: bases y buenas prácticas
Css: bases y buenas prácticasferwalker
 
Frameworks CSS
Frameworks CSSFrameworks CSS
Frameworks CSSbetabeers
 
Introducción a los Frameworks CSS
Introducción a los Frameworks CSSIntroducción a los Frameworks CSS
Introducción a los Frameworks CSSLuis Miguel Martín
 
Guia N3 Proyectos Web Php Css, Js
Guia N3   Proyectos Web   Php Css, JsGuia N3   Proyectos Web   Php Css, Js
Guia N3 Proyectos Web Php Css, JsJose Ponce
 
Introducción a SASS
Introducción a SASSIntroducción a SASS
Introducción a SASSbetabeers
 
hojas de_estilo_css
 hojas de_estilo_css hojas de_estilo_css
hojas de_estilo_cssGeorge Diaz
 
Curso De Css
Curso De CssCurso De Css
Curso De Cssbeldar
 

Similar to Introducción a SASS - Diseño de Interfaces Web (Desarrollo de Aplicaciones Web) (20)

"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo
 
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y CompassAdaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
 
Desarrollo web inteligente
Desarrollo web inteligenteDesarrollo web inteligente
Desarrollo web inteligente
 
Intro a Sass
Intro a Sass Intro a Sass
Intro a Sass
 
Sngular - Sass: Vitamina tu CSS
Sngular - Sass: Vitamina tu CSSSngular - Sass: Vitamina tu CSS
Sngular - Sass: Vitamina tu CSS
 
Sass - Preprocesador de CSS
Sass  - Preprocesador de CSSSass  - Preprocesador de CSS
Sass - Preprocesador de CSS
 
Variables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPressVariables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPress
 
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio CarracedoPHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
 
Front end basics - Sass
Front end basics - SassFront end basics - Sass
Front end basics - Sass
 
Laboratorio 03
Laboratorio 03Laboratorio 03
Laboratorio 03
 
Css: bases y buenas prácticas
Css: bases y buenas prácticasCss: bases y buenas prácticas
Css: bases y buenas prácticas
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Frameworks CSS
Frameworks CSSFrameworks CSS
Frameworks CSS
 
Introducción a los Frameworks CSS
Introducción a los Frameworks CSSIntroducción a los Frameworks CSS
Introducción a los Frameworks CSS
 
CSS3
CSS3CSS3
CSS3
 
Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
Guia N3 Proyectos Web Php Css, Js
Guia N3   Proyectos Web   Php Css, JsGuia N3   Proyectos Web   Php Css, Js
Guia N3 Proyectos Web Php Css, Js
 
Introducción a SASS
Introducción a SASSIntroducción a SASS
Introducción a SASS
 
hojas de_estilo_css
 hojas de_estilo_css hojas de_estilo_css
hojas de_estilo_css
 
Curso De Css
Curso De CssCurso De Css
Curso De Css
 

More from Laura Folgado Galache

Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)
Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)
Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)Laura Folgado Galache
 
7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncronaLaura Folgado Galache
 
5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formulariosLaura Folgado Galache
 
6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)Laura Folgado Galache
 
4. Programación con arrays, funciones, y objetos definidos por el usuario
4. Programación con arrays, funciones, y objetos definidos por el usuario4. Programación con arrays, funciones, y objetos definidos por el usuario
4. Programación con arrays, funciones, y objetos definidos por el usuarioLaura Folgado Galache
 
3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguaje3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguajeLaura Folgado Galache
 
2. Manejo de la sintaxis del lenguaje
2. Manejo de la sintaxis del lenguaje2. Manejo de la sintaxis del lenguaje
2. Manejo de la sintaxis del lenguajeLaura Folgado Galache
 
1. Arquitecturas y Herramientas de Programación
1. Arquitecturas y Herramientas de Programación1. Arquitecturas y Herramientas de Programación
1. Arquitecturas y Herramientas de ProgramaciónLaura Folgado Galache
 
Empaquetado de aplicaciones Java con Netbeans
Empaquetado de aplicaciones Java con NetbeansEmpaquetado de aplicaciones Java con Netbeans
Empaquetado de aplicaciones Java con NetbeansLaura Folgado Galache
 
Repaso de Java Swing usando Rally-Coach
Repaso de Java Swing usando Rally-CoachRepaso de Java Swing usando Rally-Coach
Repaso de Java Swing usando Rally-CoachLaura Folgado Galache
 
Blogs - Creación y participación en comunidades virtuales (CFIE Soria)
Blogs - Creación y participación en comunidades virtuales (CFIE Soria)Blogs - Creación y participación en comunidades virtuales (CFIE Soria)
Blogs - Creación y participación en comunidades virtuales (CFIE Soria)Laura Folgado Galache
 

More from Laura Folgado Galache (20)

Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)
Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)
Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)
 
7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona
 
5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios
 
6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)
 
4. Programación con arrays, funciones, y objetos definidos por el usuario
4. Programación con arrays, funciones, y objetos definidos por el usuario4. Programación con arrays, funciones, y objetos definidos por el usuario
4. Programación con arrays, funciones, y objetos definidos por el usuario
 
3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguaje3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguaje
 
2. Manejo de la sintaxis del lenguaje
2. Manejo de la sintaxis del lenguaje2. Manejo de la sintaxis del lenguaje
2. Manejo de la sintaxis del lenguaje
 
1. Arquitecturas y Herramientas de Programación
1. Arquitecturas y Herramientas de Programación1. Arquitecturas y Herramientas de Programación
1. Arquitecturas y Herramientas de Programación
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Usabilidad móvil
Usabilidad móvilUsabilidad móvil
Usabilidad móvil
 
Empaquetado de aplicaciones Java con Netbeans
Empaquetado de aplicaciones Java con NetbeansEmpaquetado de aplicaciones Java con Netbeans
Empaquetado de aplicaciones Java con Netbeans
 
Tipos de manuales
Tipos de manualesTipos de manuales
Tipos de manuales
 
Ficheros de ayuda en aplicaciones
Ficheros de ayuda en aplicacionesFicheros de ayuda en aplicaciones
Ficheros de ayuda en aplicaciones
 
Distribución de aplicaciones
Distribución de aplicacionesDistribución de aplicaciones
Distribución de aplicaciones
 
Eventos y listeners en Java Swing
Eventos y listeners en Java SwingEventos y listeners en Java Swing
Eventos y listeners en Java Swing
 
Repaso de Java Swing usando Rally-Coach
Repaso de Java Swing usando Rally-CoachRepaso de Java Swing usando Rally-Coach
Repaso de Java Swing usando Rally-Coach
 
Imagen digital
Imagen digitalImagen digital
Imagen digital
 
Video digital
Video digitalVideo digital
Video digital
 
Sonido digital
Sonido digitalSonido digital
Sonido digital
 
Blogs - Creación y participación en comunidades virtuales (CFIE Soria)
Blogs - Creación y participación en comunidades virtuales (CFIE Soria)Blogs - Creación y participación en comunidades virtuales (CFIE Soria)
Blogs - Creación y participación en comunidades virtuales (CFIE Soria)
 

Recently uploaded

Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxRosabel UA
 
Presentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUEPresentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUEJosé Hecht
 
Buenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaBuenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaMarco Camacho
 
Campaña Verano 2024 en Bergara - Colonias 2024
Campaña Verano 2024 en Bergara - Colonias 2024Campaña Verano 2024 en Bergara - Colonias 2024
Campaña Verano 2024 en Bergara - Colonias 2024Bergarako Udala
 
Docencia en la Era de la Inteligencia Artificial UB4 Ccesa007.pdf
Docencia en la Era de la Inteligencia Artificial UB4  Ccesa007.pdfDocencia en la Era de la Inteligencia Artificial UB4  Ccesa007.pdf
Docencia en la Era de la Inteligencia Artificial UB4 Ccesa007.pdfDemetrio Ccesa Rayme
 
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD EDUCATIVO.pdfdeBelnRosales2
 
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJODIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJOLeninCariMogrovejo
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.monthuerta17
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).hebegris04
 
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfMEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfJosé Hecht
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FJulio Lozano
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOEveliaHernandez8
 
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.karlazoegarciagarcia
 
Catálogo general de libros de la Editorial Albatros
Catálogo general de libros de la Editorial AlbatrosCatálogo general de libros de la Editorial Albatros
Catálogo general de libros de la Editorial AlbatrosGustavoCanevaro
 
tema5 2eso 2024 Europa entre los siglos XII y XV
tema5 2eso 2024 Europa entre los siglos XII y XVtema5 2eso 2024 Europa entre los siglos XII y XV
tema5 2eso 2024 Europa entre los siglos XII y XVChema R.
 
Cuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdfCuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdflizcortes48
 
Libro Ecuador Realidad Nacional ECUADOR.
Libro Ecuador Realidad Nacional ECUADOR.Libro Ecuador Realidad Nacional ECUADOR.
Libro Ecuador Realidad Nacional ECUADOR.Edith Liccioni
 

Recently uploaded (20)

Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptx
 
¿Amor o egoísmo? Esa es la cuestión.pptx
¿Amor o egoísmo? Esa es la cuestión.pptx¿Amor o egoísmo? Esa es la cuestión.pptx
¿Amor o egoísmo? Esa es la cuestión.pptx
 
Unidad 2 | Teorías de la Comunicación | MCDIU
Unidad 2 | Teorías de la Comunicación | MCDIUUnidad 2 | Teorías de la Comunicación | MCDIU
Unidad 2 | Teorías de la Comunicación | MCDIU
 
Presentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUEPresentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUE
 
Buenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaBuenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria Farmaceutica
 
Campaña Verano 2024 en Bergara - Colonias 2024
Campaña Verano 2024 en Bergara - Colonias 2024Campaña Verano 2024 en Bergara - Colonias 2024
Campaña Verano 2024 en Bergara - Colonias 2024
 
Docencia en la Era de la Inteligencia Artificial UB4 Ccesa007.pdf
Docencia en la Era de la Inteligencia Artificial UB4  Ccesa007.pdfDocencia en la Era de la Inteligencia Artificial UB4  Ccesa007.pdf
Docencia en la Era de la Inteligencia Artificial UB4 Ccesa007.pdf
 
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
 
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJODIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
 
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfMEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
 
Sesión ¿Amor o egoísmo? Esa es la cuestión
Sesión  ¿Amor o egoísmo? Esa es la cuestiónSesión  ¿Amor o egoísmo? Esa es la cuestión
Sesión ¿Amor o egoísmo? Esa es la cuestión
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
 
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
 
Catálogo general de libros de la Editorial Albatros
Catálogo general de libros de la Editorial AlbatrosCatálogo general de libros de la Editorial Albatros
Catálogo general de libros de la Editorial Albatros
 
tema5 2eso 2024 Europa entre los siglos XII y XV
tema5 2eso 2024 Europa entre los siglos XII y XVtema5 2eso 2024 Europa entre los siglos XII y XV
tema5 2eso 2024 Europa entre los siglos XII y XV
 
Cuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdfCuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdf
 
Libro Ecuador Realidad Nacional ECUADOR.
Libro Ecuador Realidad Nacional ECUADOR.Libro Ecuador Realidad Nacional ECUADOR.
Libro Ecuador Realidad Nacional ECUADOR.
 

Introducción a SASS - Diseño de Interfaces Web (Desarrollo de Aplicaciones Web)

  • 2. Ejemplo de SASS /* Definir variables */ $bgcolor: lightblue; $textcolor: darkblue; $fontsize: 18px; /* Usar variables */ body { background-color: $bgcolor; color: $textcolor; font-size: $fontsize; }
  • 3. Características Syntactically Awesome Stylesheet Preprocesador CSS libre y gratuito Compatible con todas las versiones de CSS Diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006. Reduce la repetición de código: ahorra tiempo.
  • 4. Funcionamiento Es necesario un preprocesador (transpilador) para convertir código Sass en CSS estándar. 1. Descargar aplicación para crear código SASS (https://sass-lang.com/install) 2. Crear el código .scss. 3. Transpilar el código para obtener el .css resultante. Transpilar: tomar un código escrito en un lenguaje y traducirlo a otro.
  • 6. Variables $myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; } body { font-family: Helvetica, sans-serif; font-size: 18px; color: red; } #container { width: 680px; }
  • 7. Ámbito de variables $myColor: red; h1 { $myColor: green; color: $myColor; } p { color: $myColor; } h1 { color: green; } p { color: red; } Ámbito: una variable definida dentro de una regla solo se aplica en esa regla.
  • 8. Variables globales (!global) $myColor: red; h1 { $myColor: green !global; color: $myColor; } p { color: $myColor; } h1 { color: green; } p { color: green; } Ámbito: una variable definida como globals se aplica a un ámbito global.
  • 9. Anidamiento de reglas nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
  • 10. Anidamiento de propiedades font: { family: Helvetica, sans-serif; size: 18px; weight: bold; } text: { align: center; transform: lowercase; overflow: hidden; } font-family: Helvetica, sans-serif; font-size: 18px; font-weight: bold; text-align: center; text-transform: lowercase; text-overflow: hidden;
  • 11. Importar ficheros parciales (comienzo con _) //_colors.scss $myPink: #EE82EE; $myBlue: #4169E1; $myGreen: #8FBC8F; //main.scss @import "colors"; body { font-family: Helvetica, sans-serif; font-size: 18px; color: $myBlue; } body { font-family: Helvetica, sans-serif; font-size: 18px; color: #4169E1; }
  • 12. Mixins @mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; } .danger { @include important-text; background-color: green; } .danger { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; background-color: green; }
  • 13. Mixins con variables y valores por defecto //Mixin con dos argumentos @mixin bordered($color, $width) { border: $width solid $color; } .myArticle { @include bordered(blue, 1px); } .myNotes { @include bordered(red, 2px); } @mixin bordered($color: blue, $width: 1px) { border: $width solid $color; } .myArticle { border: 1px solid blue; } .myNotes { border: 2px solid red; } .myTips { @include bordered($color: orange); }
  • 14. Herencia (@extend) .button-basic { border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer; } .button-report { @extend .button-basic; background-color: red; } .button-submit { @extend .button-basic; background-color: green; color: white; } .button-basic, .button-report, .button-submit { border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer; } .button-report { background-color: red; } .button-submit { background-color: green; color: white; }