¿Cuántas veces habéis tenido que recorrer de arriba a abajo un archivo CSS que creásteis hace un año para localizar los colores principales y reutilizarlos en un nuevo elemento? ¿Y quién no ha tenido que escribir multitud de veces el mismo conjunto de reglas CSS (con sus prefijos correspondientes) sólo para poner bordes redondeados o sombras a los elementos de la web? Los preprocesadores se crearon para agilizar estas tareas y para añadir nuevas funcionalidades a CSS. Los preprocesadores más usados y conocidos son LESS, Sass y Stylus. Veremos qué nos permiten hacer, y dejaremos las diferencias entre ellos (casi todas de sintaxis) para una lectura externa: http://apuntesalmargen.com/sintaxis-less-sass-stylus.html. En los ejemplos de este post usaremos la sintaxis de LESS. Lo más sencillo de utilizar de los preprocesadores CSS son las variables. Podemos crear variables y asignarles valores, ya sean numéricos, cadenas de texto o colores, y a partir de aquí sólo habrá que utilizar el nombre de la variable cada vez que necesitemos usar el valor. El ejemplo más claro es la reutilización de colores o tamaños, por ejemplo: Para no tener que repetir selectores, los preprocesadores CSS nos ofrecen el anidamiento: si queremos seleccionar un elemento, luego un hijo de ese elemento y luego el mismo elemento con una clase añadida, podemos hacerlo así: Y si no queremos escribir el mismo conjunto de líneas varias veces, podemos hacer uso de los mixins, agrupando varias propiedades y asignándoles un identificador. Con los mixins podemos agrupar varias propiedades y asignarles un identificador. Después podemos utilizar el identificador en cualquier sitio de la hoja de estilos: Por último, otra ventaja de estos preprocesadores son las operaciones, que son especialmente útiles para ahorrarnos la calculadora al estimar anchos y paddings. Hemos repasado las características más notables de LESS, Sass y Stylus, pero no son las únicas. La característica más relevante es que os reducirán los tiempos de desarrollo y harán más cómoda la creación de hojas de estilos y su posterior reutilización. Cada uno de los tres tiene sus ventajas e inconvenientes, y ya es conocida la batalla que libran en internet por ganarse la confianza de los desarrolladores frontend. Y ahora es vuestro turno: ¿cuál creéis que es el ganador de los tres preprocesadores CSS? ¿Por qué?
Procesadores CSS
Publicerades den - Senast redigerad
Relaterade artiklar
- Frilansande
- technical writing
- milestones
- freelancing
- bidding
- freelancing secrets
- employers
- beginner
- content creation
- freelancers
Everything you need to know about writing bid proposal
av RINAN TECHNOLOGIES -
Our first article explaining the bidding process on any of the freelancer platform to help the beginners to understand the process.
How to become a successful freelancer?
av vijaykrishna0497 -
Tips on becoming a successful freelancer.
How to think like a top freelancer, even when you are a beginner!
av CodinglogicsIndia -
How to think like a top freelancer, even when you are a beginner!
What is the Preferred Freelancer Program?
av ldarmody -
We are looking for the best of the best freelancers who pride themselves in their workmanship and customer service abilities.
What makes a good profile
This article is to help rookie users to make the best of they way in Freelancer.com
Guía de Clasificación de Ofertas Freelancer.com
Millones de empresas utilizan Freelancer para convertir sus ideas en realidad. ¿Necesita hacer tus trabajos?