The document appears to be about the LESS framework and provides examples of using LESS features and functions. It includes examples of nesting selectors, mixins, color functions like lighten and darken, and both CSS-style and silent comments. It also provides links to the LESS website and documentation.

1. less freamwork
less
1

2. less freamwork
2

3. less freamwork
3

4. less freamwork
4
‫کارآزموده‬
css

5. less freamwork
5

6. less freamwork
6

7. less freamwork
7
www.lesscss.org
‫لینک‬
www.lesscss.ir
‫لینک‬
2
4
3

8. less freamwork
8

9. less freamwork
9

10. less freamwork
10
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
#header { color: #6c94be; }

11. less freamwork
11
‫مثال‬
(
‫ورود‬ ‫صفحه‬
)

12. less freamwork
12
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}

13. less 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;
}

14. less freamwork
14
#header {
.border-radius(4px);
}
.button {
.border-radius(6px); }

15. less freamwork
15
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}

16. less freamwork
16
‫در‬
LESS
‫نوش‬ ‫زیر‬ ‫مشابه‬ ‫میتوان‬ ‫را‬ ‫باال‬ ‫کد‬
‫ت‬
:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
text-decoration: none
}
}
}

17. less freamwork
17
‫ها‬ ‫رنگ‬ ‫با‬ ‫کار‬ ‫توابع‬
:
lighten(@color, 10%);
darken(@color, 10%);
fadein(@color, 10%)
fadeout(@color, 10%);
fade(@color, 50%);
mix(@color1, @color2);

18. less freamwork
18
‫عبارات‬
‫توضیحی‬
(
comment!
)
/* Hello, I'm a CSS-style comment */
.class { color: black }
// Hi, I'm a silent comment, I won't show up in your CSS
/* Hello, I'm a CSS-style comment */
.class { color: white }

19. less freamwork
19