less freamwork

18
less freamwork وب ب ح م م ورک ی ر فless 1

description

 

Transcript of less freamwork

Page 1: less freamwork

less freamwork

1

محبوب ورک فریمless

Page 2: less freamwork

less freamwork

2

: پله پله؟/ 1 چیه ورک فریمراه cssمشکل/ 2 چه ورک فریم این و ؟ چیه

؟ داره حلیمیکنه؟/ 3 کار طور چه ورک فریم اینمثال/ 4 با همراه ورک فریم دستوراتورک/ 5 فریم این با کوچولو پروژه یه

مینویسیم

Page 3: less freamwork

less freamwork

3

اصال ورک فریم؟؟ چیه

Page 4: less freamwork

less freamwork

4

میخواد cssمشکل ورک فریم این که چیه؟ کنه حل

کدهای کارآزمودهسایت css

Page 5: less freamwork

less freamwork

5

حل این lessراه حل واسه؟ چیه مشکل

Css میشه نویسی برنامه زبان یک شبیهباال پذیری انعطاف و بیشتر قدرت با هایی قابلیت با

Page 6: less freamwork

less freamwork

6

Less طور چهکارمیکنه؟

Page 7: less freamwork

less freamwork

7

آدرس به اصلی سایت از ورک فریم دانلود. .www lesscss org لینک

. .www lesscss ir لینک

پوشه به شده دانلود ورک فریم انتقالپروژه

1

2

پسوند با ای صفحه در ها استایل نوشتنname.less

صفحه به ورک فریم کردن htmlمتصل 4

3

Page 8: less freamwork

less freamwork

8

ورک فریم دستورات ساختار

Page 9: less freamwork

less freamwork

9

متغیرها

Page 10: less freamwork

less freamwork

10

و متغیر تعریف روشخروجی

@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;

#header { color: @light-blue; }

#header { color: #6c94be; }

Page 11: less freamwork

less freamwork

11

Mixin) سادهتوابع)پارامتری

در کاربردی cssتابع چه؟؟ (داره ورود ) صفحه مثال

Page 12: less freamwork

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; }

Page 13: less freamwork

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; }

Page 14: less freamwork

less freamwork

14

Mixin پارامتری

#header { .border-radius(4px); }

.button { .border-radius(6px); }

Page 15: less freamwork

less freamwork

15

تو در تو استفاده#header { color: black; }

#header .navigation { font-size: 12px; }

#header .logo { width: 300px; }

#header .logo:hover { text-decoration: none; }

Page 16: less freamwork

less freamwork

16

زیر LESSدر مشابه میتوان را باال کد } header#نوشت:

color: black;

.navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } }

}

Page 17: less freamwork

less freamwork

17

: ها رنگ با کار توابع

lighten(@color, 10%);darken(@color, 10%);

fadein(@color, 10%)fadeout(@color, 10%);fade(@color, 50%);

mix(@color1, @color2);

Page 18: less freamwork

less freamwork

18

چیه : ورک فریم فهمیدیم اول قدممشکل : دوم رو cssقدم ورک فریم حل راه و

یادگرفتیمکار : طور چه ورک فریم یادگرفتیم سوم قدم

میکنهرو : ورک فریم این دستورات چهارم قدم

یادگرفتیم؟؟؟ آخر قدم