CSScaffold es un framework CSS con el que podemos extender las posibilidades de nuestros CSS desde PHP. Básicamente se trata de un script PHP que recoge los ficheros .CSS a tratar y mediante una nomenclatura (que veremos más adelante) nos genera unos ficheros CSS que cualquier navegador podrá interpretar.
// Ejemplo de uso:
<link href="/scaffold/index.php?request=/css/master.css" />
Funcionalidades
Entre las funcionalidades que nos podemos encontrar y que extienden las posibilidades del CSS, cabe destacar:
Constantes
// Definición
@constants {
text_color:#555;
color_1:#999;
}
// Uso
body
{
color:!text_color;
}Como vemos podemos especificar valores estáticos para usar a lo largo del fichero CSS. Pudiendo reemplazarlos fácilmente en un solo lugar.
Mixins
// Declaración
=mixin-name(!param, !param2 = 0){
color:!param;
border: !param2 solid #eee;
}
// Uso
#content{
+mixin-name(#eee);
padding:10px;
border:1px solid #eee;
}Se trata de un sistema de disponer de funciones en nuestros CSS.
Selectores anidados
// Uso
#id{
border:1px;
h1,h2,h3
{
color:red;
a div, blockquote, mark
{
margin:10px;
}
&.span
{
padding:10px;
}
}
}Interesante capacidad de permitirnos usar selectores anidados para mostrar más claramente la especifidad del selector.
// Uso
a{
color:#fff;
&:hover { text-decoration:underline; }
}
// Resultado
a { color:#fff; }
a:hover { text-decoration:underline; }Además, mediante el uso de & podemos hacer referencia al selector actual.
Expresiones
// Uso
#id{
padding:#[10*4]px;
}
La capacidad de usar expresiones para parametrizar nuestros diseños.
Instalación
La instalación, tan sencilla que puede ser usada en cualquier aplicación sin tener que invertir una gran cantidad de tiempo en configurarlo.
- Descargamos el fichero.
- Copiamos el fichero scaffold/ en nuestro directorio de CSS
- Configuramos el fichero scaffold/config.php
- Añadimos permisos de escritura a la carpeta scaffold/cache/
- Reemplazamos las llamadas a nuestros CSSs
// Antes
<link href="screen.css" />
// Con CSScaffold
<link href="scaffold/index.php?request=screen.css" />
// Con CSScaffold sin caché
<link href="scaffold/index.php?request=screen.css&recache" />Útil y práctico para hacernos ahorrar unos valiosos minutos a la hora de trabajar con CSS’s.
6 comentarios, 0 referencias
+
#