1. less freamwork
‫محبوب‬ ‫ورک‬ ‫فریم‬
less
1

2. less freamwork
‫پله‬ ‫پله‬
:
1
/
‫؟‬ ‫چیه‬ ‫ورک‬ ‫فریم‬
2
/
‫مشکل‬
css
‫؟‬ ‫داره‬ ‫حلی‬ ‫راه‬ ‫چه‬ ‫ورک‬ ‫فریم‬ ‫این‬ ‫و‬ ‫؟‬ ‫چیه‬
3
/
‫میکنه؟‬ ‫کار‬ ‫طور‬ ‫چه‬ ‫ورک‬ ‫فریم‬ ‫این‬
4
/
‫مثال‬ ‫با‬ ‫همراه‬ ‫ورک‬ ‫فریم‬ ‫دستورات‬
5
/
‫مینویسیم‬ ‫ورک‬ ‫فریم‬ ‫این‬ ‫با‬ ‫کوچولو‬ ‫پروژه‬ ‫یه‬
2

3. less freamwork
‫؟؟‬ ‫چیه‬ ‫اصال‬ ‫ورک‬ ‫فریم‬
3

4. less freamwork
‫مشکل‬
css
‫؟‬ ‫کنه‬ ‫حل‬ ‫میخواد‬ ‫ورک‬ ‫فریم‬ ‫این‬ ‫که‬ ‫چیه‬
4
‫سایت‬
‫کارآزموده‬
‫کدهای‬
css

5. less freamwork
5
‫حل‬ ‫راه‬
less
‫؟‬ ‫چیه‬ ‫مشکل‬ ‫این‬ ‫حل‬ ‫واسه‬
Css
‫میشه‬ ‫نویسی‬ ‫برنامه‬ ‫زبان‬ ‫یک‬ ‫شبیه‬
‫باال‬ ‫پذیری‬ ‫انعطاف‬ ‫و‬ ‫بیشتر‬ ‫قدرت‬ ‫با‬ ‫هایی‬ ‫قابلیت‬ ‫با‬

6. less freamwork
6
Less
‫کارمیکنه؟‬ ‫طور‬ ‫چه‬

7. less freamwork
7
‫آدرس‬ ‫به‬ ‫اصلی‬ ‫سایت‬ ‫از‬ ‫ورک‬ ‫فریم‬ ‫دانلود‬
www.lesscss.org
‫لینک‬
www.lesscss.ir
‫لینک‬
‫پروژه‬ ‫پوشه‬ ‫به‬ ‫شده‬ ‫دانلود‬ ‫ورک‬ ‫فریم‬ ‫انتقال‬ 2
‫پسوند‬ ‫با‬ ‫ای‬ ‫صفحه‬ ‫در‬ ‫ها‬ ‫استایل‬ ‫نوشتن‬
name.less
‫صفحه‬ ‫به‬ ‫ورک‬ ‫فریم‬ ‫کردن‬ ‫متصل‬
html 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
‫ساده‬
‫پارامتری‬
‫در‬ ‫تابع‬
css
‫؟؟‬ ‫داره‬ ‫کاربردی‬ ‫چه‬
‫مثال‬
(
‫ورود‬ ‫صفحه‬
)

12. less freamwork
12
‫تعریف‬ ‫روش‬
mixin
‫ساده‬
.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
Mixin
‫پارامتری‬
#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
‫اول‬ ‫قدم‬
:
‫چیه‬ ‫ورک‬ ‫فریم‬ ‫فهمیدیم‬
‫دوم‬ ‫قدم‬
:
‫مشکل‬
css
‫یادگرفتیم‬ ‫رو‬ ‫ورک‬ ‫فریم‬ ‫حل‬ ‫راه‬ ‫و‬
‫سوم‬ ‫قدم‬
:
‫میکنه‬ ‫کار‬ ‫طور‬ ‫چه‬ ‫ورک‬ ‫فریم‬ ‫یادگرفتیم‬
‫چهارم‬ ‫قدم‬
:
‫یادگرفتیم‬ ‫رو‬ ‫ورک‬ ‫فریم‬ ‫این‬ ‫دستورات‬
‫؟؟؟‬ ‫آخر‬ ‫قدم‬