Tag: html5

La simplicidad de CSS ha sido siempre uno de sus definir, las características más bienvenido. Hojas de estilo CSS se ofrece una lista larga de reglas, cada uno compuesto por un selector, y algunos de los estilos a aplicar. Pero a medida que nuestros sitios web y aplicaciones se hacen más grandes y se vuelven más complejas, y dirigen a una gama más amplia de dispositivos y tamaños de pantalla, esta simplicidad-tan bienvenidos como empezamos a alejarnos de font y etiquetas de mesa a base de diseños-se ha convertido en un pasivo. Mientras que algunos han ofrecido propuestas sobre cómo solucionar CSS añadido constantes o variables, por ejemplo-no han sido implementadas por los fabricantes de navegadores. E incluso si un navegador puso en práctica una nueva y mejor, extendida CSS, que podrían pasar años antes de la nueva sintaxis se apoya lo suficiente en todos los navegadores para que tenga sentido para su uso. Afortunadamente, hace unos años, los desarrolladores de Hampton Catlin y Weizenbaum Nathan propuso una mejor manera de mantener un estilo complicado. Mientras que los navegadores no están listos para un nuevo CSS, Catlin y Weizenbaum se dio cuenta de que podía seguir adelante y el diseño de una sintaxis de hoja de estilos con funciones que facilitan su CSS cada vez más complejas más fáciles de escribir y gestionar, a continuación, utilizar un preprocesador (un programa que se ejecuta en su ordenador o servidor) para traducir la sintaxis inteligente nueva en el CSS de edad, mudos que los navegadores de entender. La sintaxis de la hoja de estilo que se desarrolló se llama Sass , que significa Las versiones originales de Sass parecía muy diferente de la CSS regular "las hojas de estilo sintáctico impresionante.", no había llaves, y las propiedades tenían que ser indentados con un número determinado de espacios o de lo contrario el compilador generará un error. Los programadores (que se utilizan para aprender nuevas sintaxis, y disfrutar del dolor) no le importaba tanto esto, pero para los diseñadores web normal era bastante diferente de la CSS se sabía que la mayoría de ellos se quedaron fuera. No era una cuestión práctica, así: porque la sintaxis de sangría Sass 'no era compatible con CSS regular, era difícil para las personas con grandes sitios web existentes para empezar a tomar ventaja de ella sin perder tiempo la conversión de su antiguo código de Sass. Así que en Sass 3.0 los desarrolladores introdujeron un nuevo y más CSS-como sintaxis llamada SCSS (o "Sassy CSS"). SCSS es lo que los nerds llamar a un "superconjunto estricto" o "metalenguaje" de regulares CSS, lo que significa que cualquier cosa que sea válido CSS También es válido SCSS. En otras palabras, todas las hojas de estilo existentes deben trabajar con el procesador de Sass sin problemas, lo que le permite mojarse los pies por jugar con algunas de las características Sass sin tener que aprender todas las facetas de la nueva lengua. A diferencia de los CSS, SCSS Sass 'es un lenguaje de programación real, con expresiones, funciones, variables, lógica condicional, y los bucles. Usted no tiene que utilizar todas estas características para obtener algún beneficio de Sass, pero están ahí, si los necesita, y en grandes proyectos que pueden hacer CSS complejas o repetitivas mucho más fácil escribir. En este artículo voy a mostrar un movimientos básicas, para darle una idea de lo que es posible con Sass y SCSS en el cinturón de la utilidad de su diseñador. Al final voy a recomendar algunos libros y enlaces para ver si está listo para explorar más a fondo. Para mantener las cosas lo más claro y simple como sea posible, la mayoría de los ejemplos que a continuación se centran sólo en el código SCSS no, la salida de CSS compilado. La mejor manera de entender cómo funciona Sass es probarlo por ti mismo, por escrito algunos de los estilos SCSS y ver qué sale. Dicho esto, todos mis ejemplos de código fuente está disponible en GitHub para su referencia, junto con su salida de CSS compilado, por lo que se puede ver cómo todas estas nuevas características se traducen en limpio las hojas de estilo usable.

Primeros pasos

Sass está escrito en Rubí , y se distribuye a través del gestor de paquetes de Ruby, RubyGems . Si ya está familiarizado con Ruby (y símbolo del sistema de su ordenador) se pueden encontrar instrucciones para instalar y ejecutar la gema Sass en la página web de Sass . Para aquellos que son menos útiles en la línea de comandos, o que sólo quieren una forma rápida y fácil de trabajar con Sass, hay Scouts , una aplicación AIR disponible para Mac y Windows que viene con Ruby y tiene el compilador Sass construido adentro Tanto el sass herramienta de línea de comando y el trabajo de la aplicación Scouts viendo las hojas de estilo para SCSS cambios a medida que trabajan en ellos, entonces automáticamente en la compilación regular de CSS cuando se guarda. El directorio donde los archivos de Sass en vivo que se llama la carpeta de entrada. Su procesado archivos CSS se guardan en la carpeta de salida. Estas carpetas se pueden anidar dentro de otros, de hecho, un patrón típico es el de la carpeta de entrada (que se suele llamar "SCSS", aunque puede que el nombre que quieras) a vivir dentro de la carpeta normal de su sitio web las hojas de estilo, al igual que :

 my_project/ index.html css/ main_style.css scss/ main_style.scss _mixins.scss _colors.scss

En mi scss carpeta anterior, los archivos cuyos nombres comienzan con guiones se llaman parciales. Como el nombre indica que contienen "parcial" de hojas de estilo, trozos de código SCSS a ser importados en uno de sus archivos SCSS principal. Voy a hablar más sobre los parciales en un momento, pero ahora ya sabes donde vivo.

Use parciales de organizar el código

CSS proporciona ya la @import directiva para ligarse a hojas adicionales, de estilo externas, y algunos desarrolladores como para usarlo para romper los estilos de un proyecto grande en partes más pequeñas de lógica. Por ejemplo, nuestro main_style.css archivo puede contener otra cosa @import declaraciones que une a un puñado de hojas de estilo específico de la página:

 @import url('/shared/global.css'); @import url('/pages/home.css'); @import url('/pages/blog.css');

Esto no se considera la mejor práctica, sin embargo, porque cada una de estas importaciones es un archivo de más que tiene que ser solicitada y carga en el navegador, lo que puede hacer que su sitio cargue más lentamente y, definitivamente, se reduce el YSlow y las puntuaciones de Google Page Speed. Sass ayuda por lo que le permite romper grandes hojas de estilo en los parciales. Todavía se refieren a ellos utilizando el @import Directiva (en una nueva forma, más breve), y cuando los archivos se procesan SCSS, el contenido del parcial se insertan directamente en la salida de CSS. (Importación de una URL funciona del mismo modo lo hace en regulares CSS).

 @import 'shared/global'; @import 'pages/home'; @import 'pages/blog';

El resultado es un archivo que contiene todos los estilos. Sass también puede automáticamente minify su salida de CSS, una vez eliminados los espacios en blanco innecesarios saltos de línea o para optimizar los tiempos de carga. Hay un inconveniente. Parciales son un tipo especial de archivo SCSS, no destinados a ser utilizados como hojas de estilo regular. Cualquier código que usted adquiera una debe ser @import -ed en una hoja de estilo para ser utilizado. Nombres de los archivos parciales "debe comenzar con un guión bajo, por ejemplo, las pages/home parcial cargado por encima de realidad sería nombrado pages/_home.scss . (Estos caminos son siempre relativas al archivo actual.) El guión es como el compilador Sass sabe que un archivo es una vista parcial, y por lo tanto no debe ser compilado en una hoja de pleno derecho CSS. Sin embargo, dado el propósito de un parcial de organizar el código en partes lógicas, esto parece una compensación justa.

No te repitas

Ahora que nuestras hojas de estilo están mejor organizados, vamos a tratar de hacerlas menos repetitivas. Una de las mejores características es Sass reglas anidadas. En un regular archivo CSS, las normas deben figurar de forma secuencial, y todas las reglas de selección debe incluir todos sus elementos:

 body.home .media-unit { border: 1px solid #ccc; background-color: #fff; } body.home .media-unit .right { border-left: 1px solid #ccc; } body.home .media-unit .right h1 { font-size: 24px; }

Aparte de ser muy, muy repetitivo, este código no hace nada para ayudarnos a entender cómo los elementos HTML que estamos estilo se relacionan entre sí. Con la anidación, se puede escribir código SCSS que sea menos redundante y más fácil de seguir:

 body.home { .media-unit { border: 1px solid #ccc; background-color: #fff; .right { border-left: 1px solid #ccc; h1 { font-size: 24px; } } } }

Después de procesar el resultado será el mismo que el anterior CSS. Por desgracia, la sintaxis más corta no hará que los archivos CSS ni más pequeños o de carga más rápido. Pero anidación ayudará a mantener tu código limpio, lógico y bien organizado, que también debería ser más fácil de manejar con el tiempo. Otro buen truco de anidación: Sass le permite a los medios de nido de consultas dentro de otras reglas, por lo que es más fácil de ver que los estilos se aplican a un objeto dado en su página:

 .container { width: 940px; // If the device is narrower than 940px, switch to // a fluid layout @media screen and (max-width:940px) { width: auto; } }

Cuando se procesa este archivo, Sass sabe cómo convertir esta de nuevo en CSS válidos, copia del .container selector dentro de la consulta de los medios de comunicación de este modo:

 .container { width: 940px; } @media screen and (max-width:940px) { .container { width: auto; } }

Variables

Las variables Sass son grandes por dos razones. La primera y más importante aún, hacer que el código más fácil de cambiar, reduciendo la duplicación. Pero también le permite asignar nombres a los valores de las propiedades especiales, como los colores, que le ayuda a entender el intento detrás de un estilo determinado. En TypeKit una serie de elementos en nuestra interfaz de usuario de utilizar nuestra firma de color verde, #99cc00 , o "TypeKit verde" para abreviar. Este color aparece cientos de veces en nuestro CSS, que se utiliza en todo, desde botones a los colores titular, de tal manera que si alguna vez cambiamos de colores de la marca fuera de TypeKit verde sería mucho trabajo para cambiar todos los casos. Mediante el uso de variables en lugar de el código hexadecimal primas, es muy fácil, sólo cambiar la variable (que se puede definir en la parte superior de la hoja de estilo, o incluso en un parcial) y el nuevo color aparece por todas partes, al instante. Usted puede incluso fijar las variables con otras variables, que ayuda a mantener las hojas de estilo semántico:

 $typekit-green: "#99cc00"; $typekit-link-color: $typekit-green; a { color: $typekit-link-color; }

Puede asignar cualquier tipo de valor a una variable, aparte de los valores hexadecimales de color, que son especialmente buenos para la colocación de font-family:

 $sans-serif-font: 'ff-dagny-web-pro', 'Helvetica Neue', Arial, Helvetica, 'Liberation Sans', sans-serif; $serif-font: 'ff-tisa-web-pro', Georgia, Times, serif; .banner h1 { font-family: $sans-serif-font; }

Mixins

Mixins son conjuntos reutilizables de las propiedades o las normas que se incluyen, o "mezcla", en otras normas. Que los definen utilizando el @mixin palabra clave, y los incluyen con el @include palabra clave. En este ejemplo, te estoy diciendo Sass para aplicar todas las propiedades de estilo que figuran en el highlighted-bold-text mixin a todos los span elementos en el interior .result-with-highlights :

 $highlight-color: #ffa; @mixin highlighted-bold-text { font-weight: bold; background-color: $highlight-color; } .result-with-highlights { span { @include highlighted-bold-text; } }

Una vez que haya definido un mixin, se puede reutilizar en cualquier otro lugar en el mismo archivo. Aquí estoy diciendo que los elementos con una clase denominada highlighted también debe tener el color y propiedades de la fuente peso especificado por el mixin:

 .highlighted { @include highlighted-bold-text; }

Esto es realmente útil para la aplicación de nuevas propiedades de CSS3 a los elementos, garantizando al mismo tiempo amplia la compatibilidad entre navegadores a través de prefijos de proveedores y las pilas de reserva. En CSS regular, retrocesos proveedor puede ser molesto para usar porque son muy detallados, lo que conduce a una gran cantidad de aburrido de copiar y pegar. Sass mixins nos permiten utilizar nuevos tipos de estilos de un modo a prueba de balas sin necesidad de escribir mucho código. Aquí he definido un mixin que se aplica 4px esquinas redondeadas a un elemento, con el prefijo del proveedor de propiedades para WebKit, Firefox e IE, seguido por el estándar de border-radius propiedad de la especificación CSS3. También he definido el radio de la esquina como una variable por lo que es más fácil de cambiar más adelante:

 @mixin rounded-corners { $rounded-corner-radius: 4px; -webkit-border-radius: $rounded-corner-radius; -moz-border-radius: $rounded-corner-radius; -ms-border-radius: $rounded-corner-radius; border-radius: $rounded-corner-radius; } .button { @include rounded-corners; }

Mixins también puede contener toda las reglas anidadas, no sólo a las propiedades. He aquí una versión del conocido truco clearfix CSS implementado como un mixin Sass:

 @mixin clearfix { // For modern browsers &:before, &:after { content:""; display:table; } &:after { clear:both; } // For IE 6/7 (trigger hasLayout) & { zoom:1; } } .group { @include clearfix; }

El signo ( & ) Selector es una convención Sass, que significa "este elemento." Cuando este código se compila Sass reemplazará a todos los & símbolos con el selector de corriente, en este caso .group .

Hacer hojas de estilo más elegante

Utilizando mixins para aplicar los estilos simples es bueno, pero lo que hace mixins impresionante es que puede aceptar argumentos, al igual que una función en JavaScript o PHP. Y se pueden utilizar en combinación con funciones más avanzadas como las expresiones y las funciones que ir mucho más allá de la organización para poner en práctica algunos grandes estilos y complejos. Sistemas de cuadrícula de diseño son una gran aplicación para Sass scripting. Hay un montón de ready-made sistemas 960px CSS red por ahí, pero la mayoría de ellos requieren que usted agregue no semántica nombres de las clases en el código. Por no mencionar el hecho de que al utilizar una de estas redes, tiene que cargar todos los CSS para todo el sistema, incluso si usted sólo va a utilizar unas cuantas tallas estándar unitario. Para nuestro ejemplo final, vamos a poner en práctica un sencillo de 12 unidades en la red Sass. En lugar de definir los nombres de clase para cada unidad de red, vamos a crear un mixin que se aplicará el ancho correcto y los márgenes de convertir cualquier elemento en una unidad de nuestra red. En primer lugar, tenemos que crear nuestra columna y ancho de canal como variables:

 $column-width: 60px; // 12 columns = 720px $gutter-width: 20px; // 11 gutters = 220px

A continuación hay que Sass hacer algunos cálculos para nosotros. Una unidad de nuestra red tendrá una duración de un cierto número de columnas, además de todos los canales entre las columnas. Para calcular el ancho, vamos a utilizar la siguiente fórmula: width = (ancho de la columna × span) + (x ancho de canal (span - 1)) Ahora podemos escribir nuestra mixin. A diferencia de los ejemplos anteriores, este mixin tendrá un argumento-el lapso-que se pasó a nuestro mixin como una variable. Cada unidad de la cuadrícula se dejó flotar y mantener la cuneta 20px entre las columnas, cada unidad tendrá un margen derecho igual al ancho de canal:

 @mixin grid-unit($span) { float: left; margin-right: $gutter-width; width: ($column-width * $span) + ($gutter-width * ($span - 1)); }

Simple, ¿verdad? Pero hay una gran cantidad de energía en las pocas líneas de código. Podemos implementar una base de dos tercios de diseño con un área de contenido principal y una barra muy simple, utilizando las clases un poco más semánticamente el nombre y nuestra mixins Sass:

 .container { @include clearfix; @include grid-unit(12); float: none; margin: 0 auto; } .main-content { @include grid-unit(8); } .sidebar { @include grid-unit(4); margin-right: 0; }

Tan valioso como este es, y yo uso una versión de esta red calculadora mixin en cada proyecto de trabajo en la actualidad, esto sólo comienza a arañar la superficie de lo que es posible con Sass. Apoyo Sass 'para expresiones matemáticas básicas ayudar a que sea mucho más fácil adaptación a las embarcaciones de ancho de líquido diseños. Aquí estoy usando el ancho de respuesta Ethan Marcotte la fórmula para crear una versión más sensible de mi red básica de arriba. Sass no convertir entre unidades de CSS a menos que se lo pidió, así que me he envuelto en mis fórmulas integradas Sass percentage() la función:

 .container { // result = target / context width: percentage(940px / 960px); .main-content { // This is nested inside of .container, so its context is 940px width: percentage(620px / 940px); } .sidebar { width: percentage(300px / 940px); } }

También hay funciones para la transformación y el ajuste de colores, usted puede hacer los colores más oscuros o más ligero, o ajustar la saturación o la transparencia alfa, a la derecha dentro de su hoja de estilo:

 $base-link-color: #00f; a { color: $base-link-color; } a:visited { // This reduces the lightness of the color (in HSL terms) // by 50%, leaving hue and saturation alone color: darken($base-link-color, 20%); } figcaption { // Generates an rgba() color value with 50% opacity background-color: transparentize(#fff, 50%); }

Y si esas funciones no son suficientes puede definir sus propios, y compartir y reutilizar ellos a través de proyectos como un elemento parcial. Echa un vistazo a la lista completa de las funciones integradas de SassScript para una muestra de lo que es posible.

¿Qué sigue?

El sitio web oficial Sass está lleno de información útil, incluyendo una guía de referencia completa para el lenguaje SCSS . Una cosa que usted puede encontrar útil el derecho de distancia se encuentra la lista de plugins disponibles SCSS editor de texto , que ofrece resaltado de sintaxis y otras herramientas útiles para la escritura de Sass código en tu editor de elección. Además, Sass creador Hampton Catlin se encuentra terminando una guía en profundidad a Sass para los programadores pragmáticos , que se puede comprar y leer hoy a través del programa pragmático Libros Beta. Más allá del núcleo del lenguaje Sass, también hay brújula , una biblioteca de funciones SCSS y los patrones desarrollados por Chris Eppstein, con una función de apoyo para restablecer Eric Meyer CSS, el sistema de suspensión Plan, además de toneladas de CSS3 y efectos tipográficos. Sus autores han llamado "jQuery para hojas de estilo", que es una descripción bastante acertada. Si está utilizando la aplicación Scout, el marco de la brújula ya está instalado. De lo contrario, se pueden encontrar instrucciones para instalar y utilizar en el sitio web de Compass.