Preprocesadores CSS

Clase 32 de 67 • Curso de HTML5 y CSS3 2015

Clase anteriorSiguiente clase

Jesus

student•

Que complemento usas para Sublime de scss?

Pablo Suarez

student•

plugins se llaman, de todas formas te recomiendo usar ATOM.

Jaime Gómez

student•

Cada vez que yo inserte codigo css en mi archivo sass tengo que compilar para que se refleje en el sitio ?

Juan Carlos Ramirez Ustarroz

student•

prueba con -w al final con stylus funciona asi para no andar compilando cada que haces un cambio

Miguel Rivas

student•

anyone can help porfa ? jeje

me he bajado el paquete de node, lo he instalado, pero al hace npm en la terminal me da ERR de permisos adjunto todo lo que hace, pero se ve que no tengo permisos de usuario y soy Administrador:

"npm ERR! Please try running this command again as root/Administrator. "

MacBook-Pro-de-Miguel:nodesass maikol$ npm install -g node-sass
npm ERR! tar.unpack untar error /Users/maikol/.npm/node-sass/3.6.0/package.tgz
npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "node-sass"
npm ERR! node v4.4.3
npm ERR! npm v2.15.1
npm ERR! path /usr/local/lib/node_modules/node-sass
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall mkdir

npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/node-sass'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/node-sass']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/usr/local/lib/node_modules/node-sass',
npm ERR! fstream_type: 'Directory',
npm ERR! fstream_path: '/usr/local/lib/node_modules/node-sass',
npm ERR! fstream_class: 'DirWriter',
npm ERR! fstream_stack:
npm ERR! [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25',
npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53',
npm ERR! 'FSReqWrap.oncomplete (fs.js:82:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/maikol/Desktop/nodesass/npm-debug.log
MacBook-Pro-de-Miguel:nodesass maikol$ ls
npm-debug.log
MacBook-Pro-de-Miguel:nodesass maikol$ npm install -g node-sass
npm ERR! tar.unpack untar error /Users/maikol/.npm/node-sass/3.6.0/package.tgz
npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "node-sass"
npm ERR! node v4.4.3
npm ERR! npm v2.15.1
npm ERR! path /usr/local/lib/node_modules/node-sass
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall mkdir

npm ERR! Please include the following file with any support request:
npm ERR! /Users/maikol/Desktop/nodesass/npm-debug.log
MacBook-Pro-de-Miguel:nodesass maikol$

Juan Carlos Ramirez Ustarroz

student•

que sistema operativo usas

Daniel Falcón

student•

Cómo lo solucionaste??

Nicolas guerrero

student•

hay alguna manera automatica de compilar

Alessandro Degiusti

student•

Muy bien explicado!

Pablo David Sánchez Aguilera

student•

excelente me sirvió de mucho.

Luz Argentina del Carmen Sánchez Jáuregui

student•

porque ahi cursos que se ven en grises? como este pero estan inactivos o que onda?

Preprocesadores CSS

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM

Introducción a CSS I

Introducción a CSS II

Developer Tools en navegador I

Developer Tools en navegador II

Preguntas Y Respuestas

Selectores CSS y flexbox

Preguntas antes de la clase

Flexbox

Imports en CSS

Retícula

Selectores en CSS y Pseudo selectores

Páginas internas

Preguntas y respuestas en clase

Listas Ordenadas, Float y Display

Preguntas antes de la clase

Listas ordenadas

Float y display

Preguntas y respuestas en clase

SASS y workflow profesional

Status HTTP

Counter Increment y pseudoSelectores

Textos y estilos con CSS3 Parte I

Textos y estilos con CSS3 Parte II

Animaciones con CSS

SASS

Preguntas y respuestas en clase

Contenido complementario

¿Por qué tu sitio web es tan lento?: Carga de navegadores

Preprocesadores CSS

Dibujando con CSS

Cómo acceder a la cámara de un dispositivo con la API de HTML5

Cómo crear filtros en CSS

Reticulas en CSS

Proyecto: Creando un App de Clima

HTML, CSS básico y uso de selectores

Estructura y etiquetas en HTML

Introducción a CSS

Selectores en CSS

Atributos del Selector

Selectores de Atributo

Sesión de preguntas y respuestas

Metodología BEM en HTML5 y CSS3

Float vs Display

Unidades de medida

Metodología BEM

Pseudo selectores

Sesión de preguntas y respuestas

CSS y workflow profesional

Progressive Enhancement

Fuentes y tipografías web

Responsive Media Queries

Imagenes Responsive y Retina

Preprocesadores CSS y SASS

Herramientas

Conceptos Básicos de JS y JQuery

Bases de desarrollo web moderno

Definición de JSON y API Rest

¿Qué es JSON?

DOM, BOM, JSON, AJAX

DOM: Document Object Model

Etiqueta Template en HTML5

Geolocation

Closures, Jquery y Local Storage en nuestra aplicación

Closures

Introduccion a GIT

Conectando con API Externa

Inyectando Datos en nuestro template

Añadiendo más ciudades a nuestra app

Guardando datos en LocalStorage