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.
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.
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?