Your SlideShare is downloading. ×

less freamwork

311

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
311
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. less 1less freamwork
  • 2. css 2less freamwork
  • 3. 3less freamwork
  • 4. css css 4less freamwork
  • 5. less Css 5less freamwork
  • 6. Less 6less freamwork
  • 7. www.lesscss.org www.lesscss.ir name.less 3 html 4 7less freamwork
  • 8. 8less freamwork
  • 9. 9less freamwork
  • 10. @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } #header { color: #6c94be; } 10less freamwork
  • 11. css 11less freamwork
  • 12. mixin .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; } 12less freamwork
  • 13. #menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; } 13less freamwork
  • 14. Mixin #header { .border-radius(4px); } .button { .border-radius(6px); } 14less freamwork
  • 15. #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; } 15less freamwork
  • 16. LESS #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } 16less freamwork
  • 17. lighten(@color, 10%);darken(@color, 10%);fadein(@color, 10%)fadeout(@color, 10%);fade(@color, 50%);mix(@color1, @color2); 17 less freamwork
  • 18. css 18less freamwork

×