Archivo categoría CSS

Lenguaje Sass. El CSS 2.0

Por Scipion - CSS, Lenguajes de Marcado - 9 Febrero 2010

Me he encontrado con el lenguaje SASS. Según sus autores hace el CSS fácil y divertido. Es como si un monton de diseñadores artos de algunas cosas de CSS se hubiesen puesto a programar, y esto es lo que ha salido.

Sass es un meta-lenguaje que está sobre CSS que se utiliza para describir el estilo de un documento de forma limpia y estructurada, con más potencia que que la que permite CSS plano.

Sass, proporciona una sencilla sintaxis más elegante para CSS e implementa varias características que son útiles para crear hojas de estilo manejable.

Dan algunos ejemplos de la sintaxis en comparación con el CSS tradicional y parece bastante lógico el haber implementado el lenguaje.
Embellecimiento:

// Sass

h1
  height: 118px
  margin-top: 1em

.tagline
  font-size: 26px
  text-align: right
 
/* CSS */

h1 {
  height: 118px;
  margin-top: 1em;
}

.tagline {
  font-size: 26px;
  text-align: right;
}

Anidación:

// Sass

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em
 
/* CSS */

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Variables:

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue
 
/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Mixins:

// Sass

=table-scaffolding
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

=left(!dist)
  float: left
  margin-left = !dist

#data
  +left(10px)
  +table-scaffolding
 
/* CSS */

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Aunque no tiene muchas entradas, pero para más información el blog de SASS. Tambien está muy bien su proyecto hermano de nombre HALM que hace cosas similares pero para html/xhtml.

Funciona sobre Ruby y está licenciado con la MIT con lo cual es software libre y código abierto.

Interesante para proyectos donde el diseño tenga mucha relevancia que hoy en día son muchos.

1 Comentario