If you can't read please download the document
Less
Embed Size (px)
Citation preview
- 1. WordBench Nagoya5LESSNetBeans
2.
Web6WordPressWBN20123WBNFacebookTwitterTwitter@imagamukFacebookhttps://www.facebook.com/takashi.kumagamiBloghttp://kumamimumemo.info/
3. LESSLESS 4. LESSLESS 5. LESSThe dynamic styleseet
languageLESSCSShttp://less-ja.studiomohawk.com/ Mixin 6.
LESS//@kuma: #999999;#header {background: @kuma;}//#header
{background: #999999;} 7. LESS//.hako {border: 1px #666666
solid;background: #999999;}.txt_area {border: 1px #666666
solid;background: #999999;}//.hako {border: 1px #666666
solid;background: #999999;}.txt_area {.hako;} 8. LESS//#header {h1
{font-size: 26px;font-weight: bold;}p {font-size: 12px;a
{text-decolation: none;&:hover {border-width: 1px;}}}}//#header
h1 {font-size: 26px;font-weight: bold;}#header p {font-size:
12px;}#header p a {text-decolation: none;}#header p a:hover
{border-width: 1px;} 9. LESS//@the-border: 1px;@base-color:
#111111;@red: #842210;#header {color: @base-color * 3;border-left:
@the-border;border-right: @the-border * 2;}#footer {color:
@base-color + #003300;border-color: desaturate(@red,
10%);}//#header {color: #333333;border-left: 1px;border-right:
2px;}#footer {color: #114411;border-color:
#7d2717;}desaturatesaturate 10. LESSdesaturatesaturate#footer
{border-color: desaturate(@red, 10%);}@red10spin#header
{border-color: spin(@red, 10);}@red10spindarkenlighten#header
{border-color: darken(@base-color, 20%);}@base-color20 11.
LESSfadeinfadeout@base-color: rgba(204, 65, 30, 0.5);#header
{background: fadein(@base-color,
20%);}@base-color20fade@base-color:#330000;#header {background:
fade(@base-color,
20%);}@base-color20hue/saturation/lightness/alphahue(@color)
saturation(@color) 12.
LESSMathround()ceil()floor()percentage()@suuji: 0.2;@base-color:
rgba(204, 65, 30, 0.5);#header {background: fadein(@base-color,
percentage(@suuji));} 13. LESSLESS 14. .lessless.js
