Herramientas de conocimientos Básicas

Algunas herramientas de conocimiento básicas:

Sass (lenguaje de hojas de estilo)

Sass es un metalenguaje de Hojas de Estilo en Cascada (CSS). 

Sass permite la definición de variables. Las variables comienzan con el signo de dólar ($). La asignación de variables se hace con los dos puntos (:).

Ejemplos[editar]

$blue: #3bbfce


.content-navigation
 border-color: $blue
 color: darken($blue, 9%)

eso se compila y se traduce en:

.content-navigation {
 border-color: #3bbfce;
 color: #2b9eab;
}

---

CoffeeScript

CoffeeScript es un lenguaje de programación que se compila a JavaScript.

Añade características más sofisticadas, como la comprensión de listas y la coincidencia de patrones. CoffeeScript compila previsiblemente a JavaScript y los programas se pueden escribir por lo general en 1/3 menos de líneas de código sin ningún efecto en el rendimiento ni en el tiempo de ejecución.

Ejemplos[editar]

Un fragmento de código JavaScript común con la biblioteca jQuery es

$(document).ready(function() {
  // Resto del código va aquí...
});

O incluso sólo

$(function() {
  // Resto del código va aquí...
});

En CoffeeScript, la palabra clave function se sustituirá por el símbolo ->, y la sangría se utilizará en lugar de las llaves, como en otros lenguajes "fuera de regla" como Python y Haskell. Además, generalmente cualquier paréntesis se puede omitir. De este modo, el equivalente CoffeeScript del fragmento anterior es

$(document).ready ->
  # Resto del código va aquí...

O

($ document).ready ->
  # Resto del código va aquí...

O simplemente

$ ->
  # Resto del código va aquí...

Lo que hace es haces mas simple la lectura, es un compilador.

--------------------------------------------------------------------------------------------------------------------------
less

less es un visualizador de archivos de texto que funciona en intérpretes de comando.

A diferencia de otros programas similares (como more), less permite una completa navegación por el contenido del archivo, utilizando un mínino de recursos del sistema.

Funcionamiento[editar]

Less no solo puede utilizarse para ver el contenido de archivos, sino que también para navegar por el resultado de otros programas, como por ejemplo: grep, sort, file, tree, etc.

Las bondades del programa son las siguientes:

• Navegación completa, con avance/retroceso de página (o línea a línea) y movimiento lateral.
• Búsqueda de palabras o frases (incluso vía expresiones regulares), con resaltado de resultados.
• Visualización simultánea de varios archivos.
• Soporta formato negrita y subrayado de palabras (usado por ejemplo con man).
• Otras varias características avanzadas como: ver número de líneas, guardar el contenido en un archivo (útil con grep y otros), creación de bookmarks para navegación, etc.
• Es portable y opera en casi todos los OS: Windows (XP/2000/98 etc), DOS, Linux y demás Unixes (FreeBSD, Solaris, etc).

Less se configura especificando parámetros de invocación, y aunque no tiene menú se maneja fácilmente por medio de comandos.

La manera de ejecutarlo es:   less [opciones] [archivo...]

----------------------------------------------------------------------------------

Haml (en inglés, “HTML Abstraction Markup Language”) es un lenguaje de marcado ligero que se usa para describir el XHTMLde un documento web sin emplear el código embebido tradicional. Está diseñado para solucionar varios problemas de los motores de plantillas tradicionales y también para ser un lenguaje de marcado tan elegante como sea posible. Haml funciona como reemplazo de sistemas de plantillas de páginas embebidas como PHP, RHTML y ASP. Sin embargo, Haml elimina la necesidad de escribir XHTML explícito dentro de la plantilla, por ser en sí una descripción de XHTML, más algo de código para generar contenido dinámico.

Ejemplo[editar]

Nota: este es un simple ejemplo de muestra y puede no reflejar la versión actual del lenguaje.

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    %title BoBlog
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"}
  %body
    #header
      %h1 BoBlog
      %h2 Blog de Bob
    #content
      - @entries.each do |entry|
        .entry
          %h3.title= entry.title
          %p.date= entry.posted.strftime("%A %d de %B de %Y")
          %p.body= entry.body
    #footer
      %p
        Copyright © 2012 Bob. Algunos derechos reservados.

El Haml de arriba produce este XHTML:

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>BoBlog</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" />
  </head>
  <body>
    <div id='header'>
      <h1>BoBlog</h1>
      <h2>Blog de Bob</h2>
    </div>
    <div id='content'>
      <div class='entry'>
        <h3 class='title'>Halloween</h3>
        <p class='date'>martes 31 de octubre de 2006</p>
        <p class='body'>
          ¡Feliz Halloween, gloriosos lectores! Esta noche iré a una fiesta... estoy muy emocionado.
        </p>
      </div>
      <div class='entry'>
        <h3 class='title'>Nuevo motor de plantillas para Rails</h3>
        <p class='date'>viernes 11 de agosto de  2006</p>
        <p class='body'>
          Acaba de salir un motor de plantillas muy bueno para Ruby on Rails. Se llama Haml.
        </p>
      </div>
    </div>
    <div id='footer'>
      <p>
        Copyright © 2012 Bob. Algunos derechos reservados.
      </p>
    </div>
  </body>
</html>

Gracias a Nando por este aporte para el blog.

Espero que les sirva!

Saludos a todos :D