Share
"Odio la consola, no hago Ruby y no me importan las variables. ¿Por qué demonios debería aprender Sass?" Deja de enloquecer y escucha ...
Ya conoces a sass! Si tu puedes.
Sass tiene la misma sintaxis que tiene CSS. ¿Coincidencia? No Sass se creó para que los diseñadores como usted puedan aprenderlo fácilmente y aprender todos los beneficios adicionales a su propio ritmo., Si Ellos quieren.
Cuando vi por primera vez a Sass, tan pronto como la palabra "terminal" giré hacia el otro lado. No es que tenga miedo del terminal, es una herramienta muy útil y lo he estado usando (cuando es absolutamente necesario) durante años, pero simplemente prefiero una interfaz de usuario. Si no hay una interfaz de usuario, no la usaré.
¿Adivina qué? Descubrí que hay varias opciones..
He usado CodeKit desde que estaba en Beta pública. En todo ese tiempo he usado el terminal para Sass unas tres veces, y podría haberlo evitado por completo..
Así que no te gustan las variables. ¿Y por qué en el mundo deberías pasar tiempo envolviendo tu cabeza con mezclas, funciones y todo ese jazz? Bueno tu no Sass no te va a castigar por eso. Sin embargo, puedo prometerle que incluso con sus intenciones más puras, se encontrará usándolas tarde o temprano. No porque tengas que hacerlo, sino porque querrás hacerlo. Lo mismo ocurre con los mixins.
Incluso si nunca va a escribir una sola función Sass o una mezcla, eventualmente las usará porque encontrará más y más marcos que harán el trabajo duro por usted, permitiéndole beneficiarse de ese trabajo. usando una mezcla.
Así que imaginemos que le gustaría usar normalize.css para su próximo proyecto. Cómo vas a hacer eso? ¿Agregar otra etiqueta de enlace a su HTML? O tal vez simplemente use una @importar declaración en tu CSS? En ambos casos, estás agregando solicitudes HTTP adicionales; Tal vez no sea tan importante, pero no es óptimo ni es una buena práctica.
Simplemente puede copiar los contenidos de normalizar y pegarlos en su hoja de estilo, pero de repente su archivo CSS se convierte en un desastre y ni siquiera ha comenzado su proyecto. Entonces, ¿qué vas a hacer cuando las actualizaciones de normalize.css? Copiar y pegar de nuevo?!
En Sass puedes usar el buen ol ' @importary deje que Sass introduzca su normalize.css en su stylesheet.css (tendría que cambiar el nombre de los archivos a .scss en su lugar, pero nuevamente, no es un gran problema).
Los principios DRY (Don't Repeat Yourself) a menudo se mencionan en los lenguajes de programación reales, pero no hay ninguna razón por la que no deban aplicarse en cierta medida en CSS. Después de todo, ¿no fue esa la razón por la que se inventó CSS en primer lugar? En lugar de especificar estilos una y otra vez en su HTML, puede crear de repente un nombre de clase y declarar todos sus estilos allí.
Sin embargo, tan pronto como comience a importar código creado por otros (como marcos, restablecimientos, etc.) es probable que repita algo..
Por ejemplo, normalize.css establece la fuente del cuerpo predeterminada en "sans-serif". Me gusta, es un buen defecto. Pero, ¿y si queremos usar una fuente personalizada? ¿Debemos editar normalize.css? ¿Y si se actualiza la normalización? Tendremos que hacerlo todo de nuevo..
Al final, probablemente terminemos usando @import en CSS.
Ahora solo tenemos que asegurarnos de incluir nuestra normalización en la parte superior de nuestra hoja de estilo y estaremos listos. Anularemos la familia de fuentes, luego solo para asegurarnos de que vamos a dar una palmada !importante Declaración sobre el final, ¿verdad? Incorrecto!
Lamentablemente, normalize.css no está escrito en Sass (todavía), pero hay buenas personas que han convertido normalized.css a Sass, que puedes usar en tu CSS. Por ejemplo:
$ font-family: "Comic Sans";
Por supuesto, ya debería estar usando Normalize 2.0.1+, que ya no incluye una declaración de familia de fuentes, pero esto fue más una ilustración del problema y la solución para ello..
CSS es un lenguaje en evolución. Si aún piensa que las variables son malas, considere esta especificación de CSS, que proporciona el siguiente ejemplo:
: root var-header-color: # 06c; h1 background-color: var (header-color);
Bueno, si esa no es una versión fea de una variable, no sé qué es!
El punto es que CSS es un lenguaje que está evolucionando, por lo que incluso si ignora los preprocesadores durante el mayor tiempo posible, habrá un punto en el futuro en el que se verá obligado a aprender variables de todos modos. Mi consejo es mantenerse por delante de la curva y adoptar cosas como variables desde el principio.!
¡Y no son solo las Variables! Sass y otros preprocesadores tienen una gran influencia en las futuras especificaciones CSS. Aquí hay otra especificación en desarrollo, que permitirá el anidamiento de código CSS en el futuro. Se verá algo como esto:
/ * El siguiente ejemplo utiliza jerarquías: * / div, p & .keyword color: green; font-size: 10px; & .constant color: rojo; &: hover: after content: "[" attr (value) "]"; background-color: green; / *… Produce los mismos resultados que los siguientes CSS: * / div, p font-size: 10px; div .keyword, p .keyword color: green; div .constant, p .constant color: rojo; background-color: green; div .constant: hover: after, p .constant: hover: after content: "[" attr (value) "]";
En el caso de la especificación, ningún código es realmente compilado, Esto es simplemente cómo CSS se verá en el futuro!
Las especificaciones CSS no son creadas por un grupo de alienígenas peculiarmente creativos que quieren controlar nuestras vidas web de forma remota desde una galaxia muy lejana. No. Las especificaciones son desarrolladas por gente, lo que significa que otras personas, específicamente desarrolladores y diseñadores (como usted) tienen influencia sobre qué especificaciones se están desarrollando. Al usar preprocesadores como Sass, estás participando en algo mucho más. Estás empujando la tecnología aún más.
Si se le ocurre una idea o una solicitud de función, puede solicitarla, o simplemente participar en la discusión sobre cómo debe comportarse una función específica y si es necesaria..
Gracias a la comunidad que rodea a Sass, existen herramientas desarrolladas por otros que puede aprovechar.
ZURB, por ejemplo, construyó un gran marco llamado Foundation for Sass.
Si prefieres algo más liviano, puedes considerar Inuit.css.
Luego, por supuesto, está Compass, que proporciona un marco con toneladas de opciones útiles ...
... al igual que el borbón más delgado.
Digamos que te sientes aventurero hoy y estás pensando en usar "rem" como una unidad de medida. ¿Cómo utiliza rems para proporcionar alternativas para los navegadores desactualizados que no los admiten? Felizmente, simplemente declara el tamaño de la fuente dos veces; una vez en píxeles, luego otra vez en rems para los navegadores que lo entenderán y analizarán.
h1 font-size: 16px; tamaño de letra: 1rem;
Probablemente esta sea su mejor apuesta, pero significa que en cualquier lugar que quiera usar un rem, tendría que escribirlo dos veces. Además, mientras que 16px = 1rem es un cálculo fácil, ¿qué sucede si necesita 19px? Ahora haz las matemáticas en tu cabeza. ¿Puedes? Sí, también usé una calculadora (1.1875rem).
Debido a que en la comunidad de Sass hay algunos tipos asombrosos, puedes buscar rápidamente en Github y descargar este archivo _rem.scss (que parece bastante intimidante, ¿no?), Importarlo (hablaremos sobre la importación en un momento) y Ahora puedes hacer mágicamente:
h1 @include rem (tamaño de fuente, 2rem)
en ese punto Sass convertirá automáticamente eso a
h1 font-size: 36px; tamaño de letra: 2rem;
Si alguna vez llega el día en que puede abandonar el soporte de respaldo remoto, no tendrá que hacer una búsqueda Regex y reemplazar todos sus documentos. Puedes agregar esto en la parte superior de tu hoja de estilo.
$ print-rem-px-fallbacks: false;
Creo que podría adivinar lo que hace esta configuración de "impresión rem px fallbacks" :)
Sí. Usamos tres funciones de Sass en este ejemplo, una variable, una mezcla personalizada y una declaración de "importación", pero fue realmente tan difícil?
Así que esto es algo que va a hacer durante el resto de su vida como desarrollador web. Definiendo colores de enlace. Ya sabes, este tipo de cosas:
a color: azul; a: hover color: amarillo;
Es una tarea que se repite con frecuencia, pero no voy a sugerir que lances tu propio Sass Mixin para este tipo de cosas. En su lugar, ¿por qué no usar Compass (un marco Sass)??
a @include link-colors (azul, amarillo);
Esto se va a compilar exactamente de la misma manera que arriba. Y también se lee bastante bien ("incluye colores de enlace: azul y amarillo"), en caso de que se esté preguntando cómo funciona, visite la documentación de la brújula..
Si está utilizando cualquier editor que admita fragmentos, puede configurar (o descargar) un fragmento para que se complete automáticamente. @incluir a tus declaraciones (no dejes que eso te asuste).
Sass proporciona un montón de características muy, muy útiles. Aunque la Documentación de Sass no es la más bonita de todas las cosas (desde la perspectiva de un diseñador), contiene mucha información muy útil sobre las funciones de Sass, por ejemplo, una de mis funciones favoritas en Sass - Funciones de color. Ya no necesito abrir Photoshop para experimentar con el color si necesito una variación. Simplemente puedo hacer este tipo de cosas:
a color: aclarar (negro, 10%);
Que se compila en
a color: # 1a1a1a;
Sass no es esa cosa de rubí que usan los desarrolladores hardcore. Debería inspirarte a ti, el diseñador, y ayudarte con tu trabajo diario. No es un lenguaje de programación, es una frontera web..
Sass puede ser tan fácil como quieras que sea. Si tienes curiosidad acerca de si puedes hacer algo en Sass, simplemente busca rápidamente en Google, puedes sorprenderte.!
Lo más importante de todo es que dejen de hablar y empieza a usar Sass hoy, ¡Especialmente si quieres estar por delante de la curva! Y mantén los ojos abiertos para todos los tutoriales de Sass, elige las funciones de Sass que más te gusten y utilízalas!
Accentsconagua