5. CSS

  • Las propiedades pueden ir en un archivo separado (.css) o dentro de una etiqueta <style> dentro de la etiqueta <head>.
    <link rel="stylesheet" href="/resources/css/style.css"/>
  • Se puede utilizar una versión reducida (“comprimida”), eliminando espacios y tabulaciones que suele tener la terminación .min.css. Esta versión ocupa menos espacio y existen programas que la crean, como “Koala”.
  • Los comentarios se marcan entre /* */
  • Se pueden insertar varios estilos en la misma página, incluso uno por cada "breakpoint", es decir, por cada tamaño de pantalla:
    <link rel="stylesheet" media="screen and (min-width: 500px" href="archivo-500.css"/>
  • Para importar una hoja dentro de otra, se usa @import:
    • @import "main.css"; - import url("main.css");
    • @import url("http://ejemplo.es/style.css");
    • Debe situarse al principio de la hoja de estilos.
    • Admite restringir la importación:
      @import "desktop.css" screen and (min-width: 720px);

5.1. Selectores

  • #nombreid: para seleccionar un objeto por su id
  • .nombreclase: para seleccionar por la clase
  • etiqueta: para seleccionar por etiqueta
  • #id, .clase: para aplicar los mismos estilos a objetos diferentes
  • etiqueta#nombreid: para evitar confusiones con objetos con el mismo id/clase pero con diferente etiqueta
  • .clase1 .clase2: se aplica a un objeto que está dentro de otro (a uno o varios niveles)
  • .clase1>#id: se aplica al objeto #id cuyo padre es .clase1 (un nivel)
    • #start:hover>#img
  • .clase1 + p: para los p situados inmediatamente después de clase1.
  • .clase1 ~ .clase2: para los clase2 situados después de clase1.
  • [class*="col-"] (se aplica a los objetos cuya clase/id comienza de la forma indicada)
  • etiqueta[propiedad="valor"] (para seleccionar según el valor de una propiedad del objeto)
  • a[href$=’.pdf’] (busca el atributo href que termine en .pdf)
  • * (para seleccionar todos los objetos)
  • #id:link (para indicar un estilo concreto a un enlace no visitado)
  • .clase:hover (para indicar un estilo concreto cuando se coloca el cursor por encima del objeto. Debe ir después de :link y :visited)
  • #id:visited (el estilo que se aplica con un enlace ya visitado)
  • #id:active (se aplica en el momento en el que se preta en el enlace. Debe ir después de :hover)
  • .clase:focus (para indicar un estilo concreto cuando el “foco” está situado en un objeto, por ejemplo con los campos de introducción de texto)
  • input[type="checkbox"]:checked: se aplica a los checkbox cuando están seleccionados.
  • .clase::before: se aplica antes del elemento indicado, se utiliza la propiedad “content” para insertar contenido.
  • #id::after: se aplica después del elemento indicado, se utiliza la propiedad “content” para insertar contenido.
  • p::selection: se aplica cuando se selecciona texto con el ratón. Puede ser necesario usar prefijo de navegador para Firefox.
  • etiqueta:first-child: se aplica al objeto que es el primer hijo de su elemento padre.
  • etiqueta:last-child
  • tr:nth-child(3): selecciona el elemento que es hijo tercero de su padre, independientemente del tipo.
  • tr:nth-child(even): selecciona los pares.
  • p:first-of-type: el primero de su tipo.
  • p:nth-of-type(2): selecciona el elemento de tipo p que es hijo segundo.
  • p:only-of-type: selecciona el p que sea el único en su nivel
  • @font-face: sirve para aplicar fuentes personalizadas:
    @font-face{      font-family: Delicious;      src: url(‘Delicious.ttf’);  }
  • @media: regla para aplicar estilos en la pantalla (screen) o en la impresión (print). También limita los estilos según el ancho de la ventana o pantalla (min-widthmax-width) o según la definición (min-resolutionmax-resolution)
    • @media (min-width:720px): se aplica si la ventana es mayor o igual a 720px.
    • @media screen and (min-width: 576px): se aplica si la pantalla es igual o mayor a 576px.
    • @media only screen and (min-width: 35em): se aplica solo si se cumplen esas condiciones. 'em' es una medida relativa al tamaño de la fuente del elemento padre ('2em' es dos veces el tamaño de la fuente)
    • @media (min-resolution: 192dpi): se aplica según la densidad de la pantalla, 192 puntos por pulgada en este caso.
    • @media print: se aplica si se imprime la página.

5.2. Propiedades más útiles

  • width: establece el ancho del objeto, puede indicarse en porcentaje o en píxeles.
  • height
  • max-width: en una imagen, max-width: 100% evita que tenga un ancho mayor al del archivo, ajustándose al contenedor si es menor.
  • max-heightmin-widthmin-height
  • margin-left, margin-right, margin-top, margin-bottom: establece el margen del objeto entre los que están a su alrededor. margin: auto permite centrar div. Cuando se usan los margin-top, o margin-bottom, para centrar horizontalmente hay que usar margin-left: auto y margin-right: auto
  • padding-left, padding-right, padding-top, padding-bottom: establece el espacio entre el contenido y el borde del objeto
  • border(-left, -right, -top, -bottom, -style, -width, -color,…): establece el borde del objeto, se indica en este formato: border: ‘tamaño’ ‘tipo de borde’ ‘color’.
  • border-style:(solid, dotted, dashed, inset, groove,...)
  • border-collapse: collapse: aplicado en una tabla, unifica los bordes de las celdas y la tabla.
  • border-radius: redondea los bordes en base a un porcentaje o en píxeles. Para crear un círculo, indicar la mitad del ancho del elemento o un porcentaje del 50% (si la imagen es cuadrada, en otro caso crea un óvalo). Pueden indicarse los cuatro bordes por separado siguiendo el sentido horario, empezando por la esquina superior izquierda.
    • Para redondear esquinas es mejor usar píxeles, no porcentajes.
  • box-sizing: establece que partes del objeto (contenido, borde, padding) se cuentan a la hora de calcular el ancho. Por ejemplo box-sizing: content-box solo tiene en cuenta el contenido, box-sizing: border-box tiene en cuenta el contenido, el padding y el borde.
  • float: “empuja” un objeto a la izquierda o derecha en la pantalla, permitiendo que los objetos que se definen después se coloquen a su alrededor. También permite que el ancho de un contenedor o elemento se ajuste a su contenido.
  • clear: permite eliminar los efectos de un elemento definido después de otro con la propiedad float tanto a la izquierda, derecha, o ambos lados. Puede aplicarse junto con un float para los siguientes elementos o para ajustar el ancho.
  • display: determina el comportamiento en pantalla del elemento. Se entiende que cada elemento es una “caja”.
    • display:inline: valor por defecto. Muestra el elemento en una disposición “en línea”, como la etiqueta <span>, sin cambios de línea, no admite propiedades de alto y ancho, “float”, “margin-top” y “margin-bottom”)
    • display:block: muestra el elemento en bloque, como la etiqueta <p>, con cambio de línea en cada elemento. En una imagen, permite que se ajuste correctamente a un contenedor.
    • display:flex: muestra el elemento como un bloque flexible, que adapta sus elementos a la ventana. Puede ser una alternativa a usar float. Es importante que los elementos interiores tengan un ancho definido (100% para ocupar todo el ancho) y un margen para separarlos. Consulta compatibilidad con navegadores antiguos.
    • display:inline-block (muestra el elemento como “en línea” pero permitiendo propiedades de alto y ancho)
    • display:none (oculta el elemento)
  • flex-wrap: wrap (junto con display: flex, evita que los elementos cambien su tamaño al cambiar el tamaño de la ventana, haciendo que se coloquen uno debajo del otro cuando sea necesario)
  • justify-content: space-between (alinea los elementos de un flex en el centro del contenedor cuando los elementos no ocupan todo el espacio del contenedor, se utiliza en el contenedor)
  • order: 1, 2, ... (especifica el orden de los elementos a través de CSS, útil en webs adaptables, se usa junto con display:flex en el contenedor padre. Por defecto el orden de un elemento es cero).
  • visibility: especifica si un elemento es visible o no
    • visibility: visible
    • visibility: hidden (oculta el elemento pero mantiene el espacio que ocupa)
    • visibility: collapse (para tablas, oculta una fila o columna)
  • position: especifica el método de posicionamiento del elemento
    • position:static (valor por defecto. Posiciona los elementos en el orden en el que aparecen en el código, no permite cambios de posición)
    • position: relative (se posiciona de forma relativa a su posición normal (por ejemplo, si añadimos la propiedad left:20px, añade 20 píxeles a la posición a la izquierda)
    • position:absolute (el elemento se posiciona de forma relativa a su primer elemento padre posicionado no static)
    • position:fixed (se posiciona en relación a la ventana del navegador)
    • position:sticky (permite que el elemento siga apareciendo aunque el usuario haga “scroll”, es decir, se desplace por la página. En su posición normal actúa como “relative” hasta que al desplazarse por la página actúa como “fixed” para seguir mostrándose
  • top, left, right, bottom: indica la posición desde los cuatro lados de la ventana.
  • vertical-align: (<<longitud>>, sub, super, top, middle, bottom) alinea verticalmente un elemento.
  • overflow: especifica qué debe ocurrir si el contenido de un elemento sobresale de la “caja” de éste (ocurre cuando el elemento tiene unas dimensiones absolutas).
    • overflow:visible(valor por defecto. Muestra el contenido por fuera del elemento)
    • overflow:hidden (oculta la parte del contenido que se sale del elemento)
    • overflow:scroll (muestra una barra de desplazamiento para mostrar el contenido que sobresale)
    • overflow: auto
  • overflow-x: auto (útil para tablas que se adapten a pantallas pequeñas, incluirlo en el div u otra etiqueta que englobe la tabla, junto con la propiedad width. Permite hacer un scroll horizontal.)
  • overflow-y: auto (permite hacer scroll vertical).
  • table-layout: fixed (permite que el texto de una tabla no se salga de la ventana, se usa con word-wrap: break-word)
  • word-wrap: break-word (separa una palabra larga en varias líneas si es necesario)
  • white-space: nowrap (para tablas, fuerza a que el texto ocupe una sola línea. Si se quiere que la celda no ocupe demasiado ancho, insertar un “div” dentro con el texto y añadirle las propiedades de white-space: nowrapoverflow: hidden y un ancho)
  • text-overflow: ellipsis : inserta puntos suspensivos al final de un texto que no es visible completamente, se usa junto con overflow: hidden o para el caso anterior.
  • cursor: pointer: cambia la imagen del puntero por la que aparece en los enlaces. Existen más opciones.
  • font-family: establece la fuente del texto de un elemento. Se suelen indicar varias fuentes (terminando con la más genérica) para evitar incompatibilidades con el navegador. Por ejemplo font-family: Courier New, Courier, monospace
  • font-size: establece el tamaño del texto. Puede indicarse en píxeles, puntos (pt), em ( 1em equivale a 16pt) o en porcentaje
  • font-style: establece el estilo del texto, entre normal y cursiva (italic)
  • font-weight: establece el tipo de negrita (bold) del texto. Puede indicarse solo bold o el tamaño de la negrita (de 100 a 900. El funcionamiento dependerá de la fuente)
  • font-variant: small-caps (permite usar una fuente en mayúsculas pequeñas, depende de la fuente)
  • text-align: alinea el texto (leftcenterrightjustify,...). También ayuda a centrar elementos dentro de un div.
  • text-decoration: se suele usar en enlaces. Establece si el enlace estará subrayado o no y de qué forma
  • text-transform: capitalize, uppercase, lowercase (establece el texto con la primera letra en mayúscula, todas las letras en mayúscula o minúscula)
  • outline: establece una línea alrededor del elemento (por encima del borde). Suele usarse para focalizar campos de texto. También aparece al pretar en botones.
  • colorbackground-color: se pueden usar nombres de colores (en inglés), códigos RGB/RGBA (rgb(255,150,25)) o códigos hexadecimales (#FF00FF, cada par es un color primario: rojo ,verde y azul)
  • linear-gradient([dirección], color 1 [stop %], color 2 [stop %]): crea degradados, se usa dentro de las propiedades de fondo (background-imagebackground, etc.). Pueden incluirse porcentajes o píxeles después de cada color. Después de cada color puede añadirse un "stop" en forma de porcentaje para definir el tamaño de cada parte.
    • dirección: to left (sin comillas), to rightto topto bottom100deg, etc. Por defecto va de arriba a abajo.
    • Para que el gradiente se aplique al texto, hay que añadir el siguiente código:
      background: linear-gradient(#ff0000, #00ff00); color: transparent; background-clip: text; -webkit-background-clip: text;
  • repeating-linear-gradient
  • radial-gradient(posición, forma, colores): Por defecto crea una elipse.
    • posición: centerleftright, etc.
    • forma: circle
    • colores: el orden va de dentro hacia fuera. Admiten "stops" (consulta linear-gradient).
  • background: atajo de las propiedades de fondo.
  • background-image: url(‘ruta/imagen’). Pueden indicarse varios fondos con comas.
  • background-attachment: indica si una imagen de fondo se desplaza con la página (scroll) o no (fixed).
  • background-position: posiciona una imagen de fondo (center, etc).
  • background-clip: indica donde se termina de aplicar el fondo, si hasta el borde (border-boxpadding-box) o hasta el contenido (content-box). Puede usarse para hacer bordes semitransparentes (border: 20px solid rgba(…)) con el valor de padding-box. También se aplica con el valor text para aplicar un fondo al texto (usa prefijos de navegador, usado junto con color: transparent).
  • background-repeat
  • background-size: define el tamaño del fondo. Además de indicarlo con píxeles, también admite los valores contain y cover.
    • contain: escala la imagen para que quepa en el contenedor.
    • cover: hace lo mismo pero si la proporción de la imagen es distinta de la del contenedor, recorta la imagen.
  • list-style: establece distintos formatos a una lista <ul><ol>. Sigue este formato: list-style: “estilo de marcadores de lista” “posición de los marcadores” “uso de una imagen para los marcadores”
    • estilo de marcadores (“circle”“square”“decimal”"upper-roman”“lower-alpha”, etc. Se puede aplicar por separado con list-style-type)
    • posición de los marcadores (“outside”“inside”. Se puede aplicar por separado con list-style-position)
    • imagen para los marcadores (url(‘imagen.jpg’). Se puede aplicar por separado con list-style-image)
  • box-shadowtext-shadow: aplica un sombreado. Sigue el formato: “píxeles en horizontal” “píxeles en vertical” “difuminación” “ancho de la sombra” “color”. Puede añadirse una sombra interior con el término “inset”. Pueden incluirse varias sombras separándolas con una coma.
  • z-index: establece que elementos están por encima de los otros, cuánto más alto más prioridad (si no se indica esta propiedad, el elemento definido después tiene prioridad sobre los anteriores)
  • transform: Para aplicar transformaciones. Si se incluyen varias hay que separar por espacios (o cambios de línea):
    • rotate(deg)
    • translate(x, y): traslada en el eje X e Y.
    • translateX(x): en píxeles o porcentaje.
    • translateY(y): en píxeles o porcentaje.
    • skew(deg, deg): inclina o tuerce el objeto.
    • scale(1, 2): escala en base a dos parámetros (para el ancho y el alto), el valor ‘1’ para el tamaño original, el ‘2’ para el doble, etc.
  • transform-origin: 20% 20%. Cambia el punto de origen para las transformaciones.
  • filter: establece efectos visuales a través de filtros
    • filter:
      • none
      • blur(px)
      • brightness(%)
      • contrast(%)
      • drop-shadow()
      • grayscale(%)
      • hue-rotate(deg)
      • invert(%)
      • opacity(%) (“opacity” puede usarse por separado, sin “filter”)
      • saturate(%)
      • sepia(%)
      • url(svg)
  • calc(<<operacion>>): sirve para hacer cálculos en una propiedad. En caso de usar los operadores "+" o "-", se necesita incluir un espacio entre ellos. Consulta compatibilidad con navegadores antiguos:
    • width: calc(100% - 10px)
  • srcset: <<ruta_imagen ancho_imagen>>: propiedad para indicar varias fuentes para una imagen, según el tamaño de la pantalla o su densidad de píxeles
    srcset="img1_100.jpg 1000w, img1_200.jpg 2000w"
  • sizes: se usa conjuntamente con srcset e indica al navegador el ancho que ocupa la imagen en la pantalla (en caso de que no ocupe el 100%), en vw (viewport width).
  • #elemento::-webkit-scrollbar{display:none} (oculta el scrollbar en un elemento, sin #elemento se aplica a todo)
  • resize: vertical: en <textarea> evita que se pueda redimensionar horizontalmente.

5.3. Valores comunes a varias propiedades

  • initial: establece el primer valor que se le da a la propiedad.
  • inherit: establece el valor que tenga el elemento padre.
  • none: significa "ninguno".
  • !important: añadido después del valor de una propiedad, establece la prioridad de ésta sobre las demás.
  • px: píxeles.
  • %: porcentaje, hace referencia al contenedor padre del elemento.
  • vw: significa "viewport width" y hace referencia al ancho de la ventana, en porcentaje.
  • vh: significa "viewport height" y hace referencia al alto de la ventana, en porcentaje.
  • vmin: hace referencia al menor entre en alto y el ancho de la ventana, en porcentaje.
  • vmax: hace referencia al mayor entre el alto y el ancho de la ventana, en porcentaje.

5.4. Propiedades específicas de un navegador

  • Cuando se crea una nueva propiedad, suele pasar un tiempo hasta que se hace compatible con todos los navegadores. Mientras tanto, se usan los siguientes prefijos en la propiedad para indicar a qué navegador se aplica:
    • Mozilla: -moz-
    • Chrome: -webkit-
    • Opera: -o-
    • Internet Explorer y Microsoft Edge: -ms-

5.5. Animar elementos con CSS

  • Si se quiere animar un elemento de la página, primero hay que definir la animación con el código @keyframes nombreanimacion{}
  • Dentro de las llaves, se pueden indicar una fase (con el valor original como propiedad del elemento y el cambio en la animación), dos fases en la animación,
    @keyframes ejemplo {     from {background-color: red;}     to {background-color: blue;} }
  • o varias fases:
    @keyframes ejemplo {     0% {background-color: yellow;}     25% {background-color: orange;}     50% {background-color: red;}     75% {background-color: purple;}     100% {background-color: blue;} }
  • Después, en las propiedades del elemento, se añaden las siguientes propiedades:
    • animation-name: ejemplo;
    • animation-duration: 4s;
    • animation-delay: 2s;: retardo para empezar la animación
    • animation-iteration-count: 3; (infinite)
    • animation-direction: reverse; (alternatenormal)
    • animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)
      • linear: misma velocidad para toda la animación
      • ease: empieza lento, continúa rápido, termina lento
      • ease-in: empieza lento, continúa y termina normal
      • ease-out: empieza y continúa normal, termina lento
      • ease-in-out: empieza y termina lento
      • cubic-bezier(x1,y1,x2,y2): para personalizar los tiempos (indica dos puntos de una curva)
        • (1,0,0,1) -> efecto parpadeo (funciona mejor con una fase en la animación, utilizando una en porcentaje "100%", por ejemplo.)
    • animation-fill-mode: none; (forwardsbackwardsboth)
      • Permite mantener el estilo del primer o último “frame” una vez acabada la animación
  • También se puede usar la propiedad “transition” que permite hacer transiciones cuando ocurren ciertos eventos como pasar el ratón por encima de un elemento. Similar a “animation”, tiene otras propiedades como “transition-delay”“transition-timing-function”, etc.
    #id{
        width: 100px;
        transition: width 2s, height 3s;
    }
    #id:hover{
        width: 200px;
        height: 150px;
    }

5.6. Diseño “responsive” o adaptado

  • Se refiere a adaptar la página a los distintos dispositivos que pueden acceder a ella, principalmente según su tamaño de pantalla, dando prioridad a los dispositivos móviles sobre el diseño para pantallas más grandes (principio "Mobile First").
  • Se utiliza un código como el siguiente:
    @media screen and (min-width: 720px){
        ...
    }
  • En el ejemplo anterior, los estilos dentro de las llaves se ejecutarán en pantalla (no en impresión) cuando el ancho de la ventana sea igual o mayor a 720 píxeles.

5.6.1. Diseño con rejilla o “grid”

  • Se basa en dividir la web en doce columnas de igual ancho y encajar todos los elementos en una o varias columnas, que se adaptan a los distintos dispositivos. Por ejemplo, un elemento puede ocupar dos columnas en dispositivos grandes y ocupar las doce en dispositivos pequeños. Una forma de diseñar la rejilla es la siguiente:
    [class*=”col-”]{
        width: 100%;
        float: left;
    }
    .col-rest{
        overflow: hidden;
    }
    @media (min-width: 720px){
        .col-1 {
            width: 8.33%;
        }
        .col-2 {
            width: 16.66%;
        }
        .col-3 {
            width: 25%;
        }
        .col-4 {
            width: 33.33%;
        }
        .col-5 {
            width: 41.66%;
        }
        .col-6 {
            width: 50%;
        }
        .col-7 {
            width: 58.33%;
        }
        .col-8 {
            width: 66.66%;
        }
        .col-9 {
            width: 75%;
        }
        .col-10 {
            width: 83.33%;
        }
        .col-11 {
            width: 91.66%;
        }
        .col-12 {
            width: 100%;
        }
        .col-rest {
            overflow: visible;
        }
    }

5.6.2. Patrones

  • Mostly fluid (ejemplo con tres contenedores):
    • Móvil: se coloca un contenedor debajo del otro, en una misma columna.
    • Tableta: se juntan dos contenedores en la misma fila y se mantiene otro en una fila aparte.
    • Ordenador: se colocan los contenedores en la misma fila. Para pantallas más grandes, se introducen márgenes a ambos lados (reduciendo el ancho, ya sea con porcentaje o con un valor absoluto).
  • Layout shifter (basado en propiedad order):
    • Según el tamaño de pantalla, el ancho y el orden de los contenedores van cambiando. Se usan contenedores padre para mantener algunos contenedores juntos.
  • Off Canvas:
    • Móvil: Se usan las propiedades transform: translate() y transition: transformpara ocultar un contenedor fuera de la pantalla y hacerlo aparecer al apretar en un botón.
    • Tableta: El contenedor oculto aparece por defecto y el contenido principal ocupa el ancho restante con la propiedad flex-grow: 1.

5.7. Plantillas CSS

  • Las plantillas permiten automatizar el diseño de la web usando clases con diseños preestablecidos y reduciendo la necesidad de crear archivos CSS, aunque requieren de un periodo de aprendizaje. Las principales plantillas (Bootstrap, W3, …) también incorporan librerías Javascript para simplificar aún más la creación de las páginas.

5.8. Extensiones de CSS

5.8.1. Introducción y tipos más usados

  • Con las extensiones de lenguaje para CSS conseguimos manejar los estilos como un lenguaje de programación tradicional, con variables, operaciones aritméticas, etc. Además permiten estructurar mejor los estilos. Estas extensiones necesitan de un compilador que transforme el código en un archivo .css tradicional.
  • Las extensiones más populares son Less y Sass (basado en el lenguaje Ruby).

5.8.2. Less

  • Los archivos escritos en Less terminan en .less
  • Se pueden compilar de distintas formas: a través de una aplicación de escritorio (p. ej. Koala), con Javascript (Less.js) o en una interfaz de línea de comandos.
  • Variables
    @nombre-variable: #532655;   header{     background-color: @nombre_variable;     }
    @mi-selector: clase; .@{mi-selector}{     font-weight: lighter; }

    @ruta: “resources/img”; #id{     background-image: url(“@{ruta}/ejemplo.png”); }
  • Mixins (mezclas, combinaciones)
    .estilo-borde{     … } .clase{     .estilo-borde; }

    • Si se añaden paréntesis al “mixin”, no aparecerá una vez compilado: .estilo-borde(){...}
  • Anidamiento
    .estilo{     &:hover{     (‘&’ representa al selector padre)     } }
    .component {     width: 300px;     @media (min-width: 768px) {         width: 600px;         @media  (min-resolution: 192dpi) {             background-image: url(/img/retina2x.png);         }     }     @media (min-width: 1280px) {         width: 800px;     } }.reglabase{     #id{ … } } button{     .reglabase > #id; }
  • Operaciones
    • @variable: 5cm + 10 cm;
    • @variable: 7cm + 10 mm;
    • @variable: 5cm * 2cm; (sólo una unidad de medida)
    • @color: #333 / 2;
  • Escaping
    • Permite usar cualquier cadena de texto ("string") como propiedad o valor de una variable
      @variable: ~"(min-width:720px)"; @media @variable{…}
  • Funciones
    • color(“#111”): pasa un “string” a color
    • image-size(“ejemplo.png”): devuelve las dimensiones de una imagen
      • image-width(“ejemplo.png”)
      • image-height(“ejemplo.png”)
    • convert(9s, “ms”): convierte unidades de medida
    • unit(5, px): añade o cambia una unidad de medida
    • svg-gradient(to right, red 30%, blue): genera degradados en SVG
    • if(condicion, valor si verdadero, valor si falso)
    • escape(‘a=1’): transforma caracteres especiales en los adecuados para url: 'a%3D1'
    • e(“reglacsspropietaria”): permite incorporar reglas no válidas de CSS o propietarias que Less no reconoce
    • %(“string”, argumentos”): formatea una cadena de texto
    • replace(“string”, “patrón”, “reemplazo”)
    • length(@variable-de-lista)
    • ceil(2.5): redondea al entero superior
    • floor(2.3): redondea al entero inferior
    • round(3.4)
    • percentage(0.5): transforma un decimal en porcentaje
    • sqrt(5): calcula raices cuadradas
    • pow(3, 2)
    • mod(5, 2)
    • isnumber(5)
    • saturate(hsl(90, 80%, 50%), 20%)
    • lighten(hsl(90, 80%, 50%), 20%)
    • fadein(hsla(90, 90%, 50%, 0.5), 10%): aumenta la opacidad
    • mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
  • Importar estilos
    • @import “estilo”: para archivos .less
    • @import “estilo.css”

5.8.3. Sass

  • Los estilos escritos en Sass terminan en .scss o .sass (el formato es ligeramente distinto entre ambos)
  • Se puede compilar con Koala.
  • Variables
    $nombre_variable: "Courier New, Courier, monospace";
    body{
        font-family: $nombre_variable;
    }