less freamwork

397 views
353 views

Published on

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

No Downloads
Views
Total views
397
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

less freamwork

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

×