Consejo rápido necesitas revisar MENOS.js

Puede estar familiarizado con servicios como LESS y Sass. Permiten mucha más flexibilidad a la hora de crear sus hojas de estilo, incluido el uso de variables, operadores, combinaciones e incluso selectores anidados. Sin embargo, debido a que LESS se creó originalmente con Ruby, muchos desarrolladores de PHP, a pesar del hecho de que hay versiones de PHP disponibles, nunca lo usaron.


Screencast completo



Paso 1. Referencia LESS.js

 

Paso 2. Importar una hoja de estilo

 

Tenga en cuenta que hemos establecido el rel atribuye a "hoja de estilo / menos" y que nuestras hojas de estilo reales tienen una extensión de .Menos, no .css. Además, debemos enlazar a esta hoja de estilo. antes de Less.js.


Paso 3. Diviértete!

Con esta cantidad mínima de trabajo, ahora tiene acceso a todo, desde variables hasta combinaciones. Asegúrate de ver el tutorial de video de cuatro minutos que aparece arriba para ver ejemplos completos, pero aquí hay algunos consejos rápidos..

 / * Variables! * / @primary_color: verde; / * Las combinaciones son funciones similares a las operaciones de uso común, como aplicar bordes. Creamos variables al anteponer el símbolo @. * / .rounded (@radius: 5px) -moz-border-radius: @radius; -webkit-border-radius: @radius; radio del borde: @radius;  #container / * Hace referencia a la variable que creamos anteriormente. * / fondo: @primary_color; / * Llama a la mezcla (función) redondeada que creamos y anula el valor predeterminado. * /. redondeado (20px); / * Los selectores anidados también heredan el selector de sus padres. Esto permite un código más corto. * / a color: rojo; 

Es importante recordar que LESS.js no está terminado; Con suerte, será pronto. Sin embargo, está funcionando maravillosamente hasta ahora. Qué piensas?