Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LESS For Web Designer

LESS For Web Designer

2012/03/13 HTML5とか勉強会 #27にてお話しさせていただいたウェブデザイナのためのLESSのスライド。

Yuya Saito

March 13, 2012
Tweet

More Decks by Yuya Saito

Other Decks in Programming

Transcript

  1. - LESS / JavaScript (node.js) → CSSʹݶΓͳ͍ۙ͘͠จ๏Ͱॻ͔Ε͍ͯΔ - Sass /

    Ruby → ߴػೳɻ Compassɺ BourbonͳͲ͸ศར - Stylus / node.js → ΫϦʔϯͳจ๏ɺ Τϥʔจ͸लҳ lessͱ͸
  2. γϯλοΫεϛοΫεΠϯ .class ·ͨ͸ #id { property: value; } ྫ .center-block

    { display: block; margin-left: auto; margin-right: auto; }
  3. γϯλοΫεೖΕࢠϧʔϧ #header { h1 { font-size: 26px; font-weight: bold; }

    p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } } }
  4. γϯλοΫεԋࢉ @base: 5%; @filler: @base * 2; @other: @base +

    @filler; .selector { color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; }
  5. γϯλοΫεؔ਺ lighten(@color, 10%); darken(@color, 10%); saturate(@color, 10%); desaturate(@color, 10%); fadein(@color,

    10%); fadeout(@color, 10%); fade(@color, 50%); spin(@color, 10); spin(@color, -10); mix(@color1, @color2);
  6. boil·er·plate [boi-ler-pleyt] noun 1. plating of iron or steel for

    making the shells of boilers,covering the hulls of ships, etc. 2. Journalism . ! a. syndicated or ready-to-print copy, used especially by weekly newspapers. ! b. trite, hackneyed writing. 3. the detailed standard wording of a contract, warranty, etc. 4. Informal . phrases or units of text used repeatedly, as in correspondence produced by a word-processing system. 5. frozen, crusty, hard-packed snow, often with icy patches. Boilerplate
  7. bootstrap [ˈbuːtˌstræp] noun 1. A loop (leather or other material)

    sewn at the side or top rear of a boot to help in pulling the boot on. 2. A means of advancing oneself or accomplishing something without aid. He used his business experience as a bootstrap to win voters. (computing) The process by which the operating system of a computer is loaded into its memory 3. (computing) The process necessary to compile the tools that will be used to compile the rest of the system or program. 4. (statistics) Any method or instance of estimating properties of an estimator (such as its variance) by measuring those properties when sampling from an approximating distribution. Boilerplate
  8. Our use of Less is a stopgap while we wait

    for the future of CSS – which is looking really promising and already has great proposals for variables and mixins! For now however, we’re really happy with Less – but don’t think you should have to use it if it’s not your thing. Jacob Thornton A.K.A fat