CSS moderno con Sass

Idioma: Alemán

CSS moderno con Sass - Tutorial práctico

¿Siempre te ha molestado que no haya variables y bucles en CSS? ¡Se acabó! Los preprocesadores de CSS, como Sass, ofrecen precisamente eso. Esto significa que por fin se puede generar código CSS de forma eficiente. Además de Sass, este tutorial también echa un vistazo al siempre popular framework Compass, que lleva el uso de Sass a otro nivel. Conozca las posibilidades que ofrecen Sass y Compass en tres horas.

Conviértase en un maestro de Sass con esta formación en vídeo de tres horas y el desarrollador web Daniel Koch
Define variables, crea tus propios mixins, experimenta con colores y números y, por si fuera poco, utiliza Compass
Aprenda a crear CSS de forma eficaz y aplique sus nuevos conocimientos a futuros proyectos

Paso a paso hacia el desarrollo profesional de CSS. Si CSS, entonces moderno y con Sass - ¡Daniel Koch le muestra cómo!

detalles

Puede utilizarse con:
Contenido: 3 h Formación en vídeo
Licencia: privada y comercial Derechos de uso

Categorías

Diseño web, CMS y desarrollo

Creado con amor por:

Daniel Koch

CSS moderno con Sass.

Gratuito

CSS moderno con Sass - 01 Introducción

CSS puede escribirse de forma mucho más eficaz gracias a los preprocesadores de CSS. Este vídeo muestra qué son estos preprocesadores, cuáles están disponibles y por qué se ha elegido Sass para esta serie.

CSS moderno con Sass - 02 La instalación

Antes de poder usar Sass, tienes que instalarlo. Y Ruby es un prerrequisito para esto. Ambos - la instalación de Ruby y Sass - se muestran en este video. Luego puedes probar si la instalación de Sass realmente funcionó.

CSS moderno con Sass - 03 Compilación hábil

Los archivos Sass deben convertirse en archivos CSS para que puedan utilizarse realmente. Gracias al comando Watch, puede reconocer fácilmente los cambios en archivos individuales o en directorios enteros.

CSS moderno con Sass - 04 Combinar archivos

Los archivos SCSS pueden importarse y fusionarse mediante @import. Qué tiene que ver todo esto con un guión bajo delante del nombre del archivo es un aspecto de este vídeo.

CSS moderno con Sass - 05 Declarar y utilizar variables

Sass ofrece la opción de declarar variables. Este concepto no está disponible en CSS convencional, pero en Sass es una herramienta ingeniosa para el desarrollo eficaz de hojas de estilo.

CSS moderno con Sass - 06 El principio de anidamiento

Gracias al anidamiento, la sintaxis de Sass puede ser mucho más sencilla de lo que es habitual en CSS. La anidación también ayuda a escribir el código con mucha más claridad.

CSS moderno con Sass - 07 Herencia hábil con Extend

El uso de @extend permite pasar un conjunto de propiedades CSS de un selector a otro. Esto también ayuda a mantener Sass archivos magra.

CSS moderno con Sass - 08 módulos con los selectores de marcador de posición

El selector de marcadores de posición permite definir módulos. Esta modularización permite dividir la sintaxis de Sass en bloques lógicos que pueden integrarse en varios puntos.

CSS moderno con Sass - 09 Definir mixins

Los mixins son funciones que pueden utilizarse, por ejemplo, para simplificar considerablemente los flujos de trabajo. Este vídeo le muestra cómo definir y utilizar sus propios mixins.

CSS moderno con Sass - 10 El selector de elemento padre

Con el selector, que es el tema de este vídeo, puede acceder al elemento padre de un elemento. Este selector no se conoce en CSS, por lo que ofrece un enorme valor añadido.

CSS moderno con Sass - 11 Automatización con bucles For

Sass permite el uso de bucles for. Esto funciona de forma muy sencilla en Sass y puede utilizarse, por ejemplo, para definir su propio sistema de cuadrícula.

CSS moderno con Sass - 12 bucles Each y While

Además de los bucles For, los bucles Each y While también pueden utilizarse en Sass. Este vídeo muestra cómo se pueden utilizar para la automatización.

CSS moderno con Sass - 13 decisiones de caso con if y else

En lenguajes como PHP y JavaScript, es posible reaccionar a diferentes eventos usando if y else. Algo así existe también en Sass. Este vídeo muestra cómo se puede utilizar.

CSS moderno con Sass - 14 operadores matemáticos

Se puede calcular en Sass. Esto es útil para definir tamaños de fuente, por ejemplo. Gracias a los operadores correspondientes, también puedes crear tu propio sistema de cuadrícula personalizado.

CSS moderno con Sass - 15 juegos de colores

Por supuesto, los colores pueden definirse en Sass. Sin embargo, Sass también va mucho más allá que el CSS convencional en este ámbito. Gracias a las funciones correspondientes, los colores pueden manipularse fácilmente, por ejemplo.

CSS moderno con Sass - 16 Compass

El framework Compass multiplica las posibilidades de Sass. Este primer vídeo muestra cómo instalar y utilizar Compass.

CSS moderno con Sass - 17 Compass y CSS3

El sitio web del proyecto Compass es el recurso central de información cuando se trata de trabajar con este framework. Te mostraré cómo trabajar con la documentación utilizando las características CSS3 de Compass.

CSS moderno con Sass - 18 Compass en acción y un vistazo a Susy

Un ejemplo muestra lo fácil que es implementar cosas con Compass. Al final de esta serie, también echamos un vistazo a un framework Sass alternativo. Susy ofrece un sistema de rejilla magra.

Detalles del contenido

CSS eficaz - con Sass: empiece con el tutorial práctico
Sass ha revolucionado el desarrollo de CSS porque por fin se puede escribir código CSS de forma eficaz. En la friolera de tres horas con 18 lecciones, aprenderás todo lo que necesitas saber sobre Sass y el framework Sass Compass .

Instalación del entorno de desarrollo Sass

Antes de embarcarte en tu viaje Sass en el tutorial CSS, vamos a empezar con la instalación . Pero no te preocupes - es muy sencillo. Todo lo que necesitas es Ruby y unos pocos comandos en la línea de comandos y serás el orgulloso propietario de un entorno de desarrollo Sass. Si hasta ahora te has mostrado reacio a instalar Sass, aquí se te guiará paso a paso por la instalación. Una primera prueba mostrará qué versión de Sass está instalada.

Primeros pasos con una estructura de proyecto típica

A esto le siguen los primeros pasos: ¡Empecemos con Sass! Un primer vistazo a la sintaxis es seguido por las características básicas del lenguaje. Aprenderás sobre variables, verás una estructura de proyecto típica y te orientarás rápidamente en Sass.

Desarrollo: bucles y sentencias if

Ahora que estás preparado, es el momento del desarrollo profesional : Lo que hace a Sass tan especial son las cosas que casi recuerdan a los lenguajes de scripting reales como JavaScript. Esto se debe a que en Sass también se pueden definir bucles y utilizar sentencias if. Estas cosas son también el requisito previo básico para la disciplina suprema en Sass - la definición de mixins. Se trata de potentes funciones que facilitan enormemente el trabajo con Sass y, en última instancia, con CSS.

Compass: Simplifica el trabajo con CSS

La corona de esta formación es Compass . Esto lleva el desarrollo con Sass a un nivel completamente nuevo, ya que este framework de Sass ofrece innumerables herramientas y funciones que facilitan aún más el trabajo con CSS.

Lo que aprenderás en el tutorial de CSS y Sass

Conocerás las funciones de Sass paso a paso, desde los primeros pasos hasta las herramientas profesionales y el trabajo con Compass. Esto le mostrará lo que es posible actualmente y le permitirá poner en práctica sus conocimientos de inmediato. ¡Escribir CSS nunca ha sido tan eficiente!