Creating Dark-Flex.de - CSS with LESS

Creating Dark-Flex.de - CSS with LESS

A sneak peak into LESS and CSS

F56fc0eb3d06ea81803140a667659fa3?s=128

Florian K.

March 26, 2012
Tweet

Transcript

  1. Creating Dark-Flex.de CSS with LESS

  2. @fk1squared Hi. Welcome.

  3. What is CSS? You should know that.

  4. What is LESS? It’s awesome. Some examples...

  5. @color: #4D926F; #header { color: @color; } h2 { color:

    @color; } #header { color: #4D926F; } h2 { color: #4D926F; } LESS CSS
  6. #header { h1 { font-size: 26px; font-weight: bold; } p

    { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; } LESS CSS
  7. @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue;

    } #header { color: #6c94be; } LESS CSS
  8. LESS LESS CSS is annoying than

  9. What is LESS? It’s the ‘dynamic stylesheet language’. It’s what

    we wanted, right?
  10. http://lesscss.org/

  11. Thanks. Questions? @fk1squared