زمان کنونی: ۱۰-۲۸-۱۳۹۵, ۰۴:۱۸ صبح درود مهمان گرامی! (ورودثبت نام)




آموزش پارسی less
زمان کنونی: ۱۰-۲۸-۱۳۹۵, ۰۴:۱۸ صبح
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: mmdsharifi
آخرین ارسال: mmdsharifi
پاسخ: 5
بازدید: 4316

ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
 

آموزش پارسی less

۷-۷-۱۳۹۳, ۰۳:۴۳ عصر
ارسال: #1
آموزش پارسی less
سلام دوستان

دیگه وقتشه که به دنیای هیجان انگیز less وارد بشیم.در این تاپیک آموزشی قصد دارم 0 تا 100 زبان less رو با هم بررسی کنیم.
[تصویر:  logo.png]

سایت پارسی {Less}

خوشبختانه منبع فارسی برای less وجود داره که اینم ادرسشه:

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


اما ممکنه کمی شما رو گیچ کنه.خب من گام به گام با شما همراه می شم و هر جا لازم باشه شما رو به سایت پارسی ارجاع می دم.

لطف کنید تو این تاپیک سوالاتتون رو مطرح نکنید . برید به تاپیک سوالات و پرسش های less .
لینک پرسش و پاسخ:
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


با عرض پوزش از دوستان : "ممنون میشم برای اینکه آموزش ها پشت سر هم قرار بگیره کسی اینجا پست نزاره": دکمه تشکر هم هست !
تا آموزش اول بای Smile
امضای mmdsharifi دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط mohamadms
۷-۸-۱۳۹۳, ۰۹:۵۶ صبح
ارسال: #2
آغاز به کار کردن با Less
سلام دوستان

در این پست می خام شما رو با less اشنا کنم و سعی می کنم که مزیت های اون رو به شما معرفی کنم.

lees چیست؟
less مخفف leaner css هست یک زبان پویا استایل دهی هست،که با دستور زبان منحصر به فرد خودش نوشته میشه و بعد با یک محیط نرم افزاری یا فایل lees.js تبدیل کد های css میشوند.

منظور از پویا بودن چیه؟
در زبان های برنامه نویسی ما مثلا می توانیم به جای اینکه یک قطعه کد رو چندین جا کپی کنیم میام از متغییر یا تابع استفاده می کنیم که به باعث می شه که کار راحت تر و با سرعت بالاتر انجام بشه.

مزیت های زبان پویای less
1- افزایش سرعت کد نویسی css
2-قابلیت سازگار با مرورگرها*
3-استفاده از کتابخانه های آماده
4-قابلیت طراحی رسپانسیو و گرید سیستم*
5- و...

*:موارد ستاره دار خاصیت خود less نیست ،بلکه این موارد را فوق العاده برایمان راحت کرده.
چه چیز هایی یاد خواهیم گرفت؟
- استفاده از متغیر ها در less
-استفاده از حلقه های تکرار و شرط گذاری if
-استفاده از mixin و تابع های آماده
-استفاده از کلاس سی اس اس در دل کلاس دیگر
-استفاده ازاستایل های تودرتو
-و...

پروژه محور بودن آموزش

سعی می کنم با همدیگر یک قالب رو کد بزنیم که رسپانسیو باشه و فلت! خبر های بیشتر رو در آموزش های بعدی بهتون میدم

برای اطلاعات بیشتر به دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مراجعه کنید.
امضای mmdsharifi دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
۷-۱۰-۱۳۹۳, ۱۲:۳۸ عصر
ارسال: #3
متغییر ها در زبان Less
سلام

در این قسمت می خواهیم درباره متغیر ها در زبان less برای شما دوستان بحث خواهیم کرد. اما قبل از اون در قسمت اول گفتیم less. توسط یک سری نرم افزار های خاص ترجمه می شن به css. که من در این اموزش ها از دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
استفاده می کنم که می توانید ان را دانلود کنید سپس از بخش پلاگین های اون less رو سرچ کنید Fi compailer پیدا کرده و بایک کلیک اون رو نصب کنید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


ولی گزینه های دیگر هم هستند مثل:
1- crunchapp.net
2-koala-app.com

----------------------------------------------------------------------------------------
اما الان امیدوارم که که با یکی از نرم افزار های رو باز کردید و آماده باشید.

متغییر ها در css قابلیت تعریف ندارند و به همین دلیل یکی از کاستی های اون مطرح میشه،اما در less شما می تونید یک متغییر رو یک جا تعریف کنید و در دها جای دیگر از اونا استفاده کنید.
انواع متغییر»
1- نام رنگ ها blue,navy,red,...
2-مقدار هگزا دسیمال رنگ ها #2d2d2d
3-متن یا رشته
4- دنباله ای متغیر ها برای margin padding

مثال:
کد php:
@myColor1navy;                            // named color value
@myColor2#000080;                         // hex color value
@myStringVar" with an appended string";   // string variable 
@myFontSize24px;                          // numeric value
@thinBorder4px solid @myColor1;           // multi-value variable
@paddingVar15px 15px 15px 35px;           // multi-value variable 

واینجوری استفاده می کنیم:
کد php:
h1h2 {
    
color: @myColor1;
}

#mypara {
    
font-size: @myFontSize;
    
border: @thinBorder;
    
padding: @paddingVar;
}

#mypara:after {
    
content: @myStringVar;

کد های بالا رو حتما بنویسید!79
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


امیدوارم مورد استفادتون قرار گرفته باشه.اگر سوالی دارید در تاپیک مخصوص خودش بپرسید . اینم لینکش:
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
امضای mmdsharifi دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Adel ، kalantar
۷-۱۲-۱۳۹۳, ۰۵:۱۰ عصر
ارسال: #4
آموزش mixin ها در less
ضمن تبریک عید بزرگ قربان به همه دوستان شما رو دعوت می کنم که به ادامه آموزش های less توجه کنید!

Mixins
میکسن چیه؟ خیلی راحت ساده "در LESS میتوانیم مشخصه های زیادی را از یک سلکتور به سلکتورهای دیگر منتقل نماییم. "
البته این تعریف سایت فارسی less هست،که خودشم گفته خیلی درس نیست!یعنی فارسیش درست در نیومده!!

می تونیم بگیم یه چیزی شبیه تابع در زبان های برنامه نویسی هست.

اول از همه اگه یادتون باشه گفتیم less داره به ما کمک می کنه که کارمون رو سریع تر و بهتر انجام بدیم.حالا خواهید دید که واقعا اینجوریه!

مثال:

من می خواهم که کلاس زیر رو به جفت فوتر و هدر بدم خب یه راهش اینه که کلاس زیر رو ور دارم کپی پیست کنم!

کد php:
.commonTraits {
    
border-radius10px;
    
border1px solid green;
    
padding10px;


ولی یه راه دیگه هم استفاده از less هست اینجوری:

کد php:
.commonTraits {
    
border-radius10px;
    
border1px solid green;
    
padding10px;
}

header {
    
color#274D87;
    
.commonTraits;
}

footer {
    
color#3264AF;
    
.commonTraits;


بعد از کامپایل شدن همون حالتی تبدیل میشه که کپی پیست می کردید!
اگه خوب دقت کنید انگار ما داخل فوتر و هدر یه کلاس دادیم.

ارسال مقدار به میکسین
فرض کنید ما به گرد کردن گوشه های المنت ها ،حاشیه های اختصاصی و باکس شادو نیاز داریم و به کرات وبه اندازه های مختلف اون ها رو بکار می بندیم خودتون می دونید که علاوه بر اینکه کلی کپی پیست کاری می خواد باید با تمام مرور گر ها سازگارش کنید یعنی -moz,-wekit,... اضافه کنید.
اما
حالا دیگه با less کارتون خیلی راحته چون دیگه یه بار mixin ش رو درست می کنید و هر بار هر مقدار که دوست داشتید ست کنید اون مقدار رو به عنوان پارامتر به میکسن می دید. اینجوری :

کد php:
.customBorder(@colorblack, @width1px) {
    
border: @width solid @color;


مثال:
کد php:
// using regular arguments
.border-radius(@radius5px) {
    -
mox-border-radius: @radius;
    -
webkit-border-radius: @radius;
    -
ms-border-radius: @radius;
    
border-radius: @radius;
}

// using named arguments with defaults
.customBorder(@colorblack, @width1px) {
    
border: @width solid @color;
}

// using the @arguments parameter
.box-shadow(@x0, @y0, @blur:1px, @color#000) {
    
-webkit-box-shadow: @arguments;
    -
mox-box-shadow: @arguments;
    -
ms-box-shadow: @arguments;
    
box-shadow: @arguments;
}

#mypara {
    
.border-radius;
    .
customBorder(blue5px);
    .
box-shadow(10px,10px,10pxgray);
    
padding10px;


دیگه دمو شو خودتون می تونید تو بروزر خودتون ببینید!Angel

راستی کلمه کلیدی
کد:
@arguments
به معنای دادن تمامی پارامتر ها به اون خصوصیت خاص هست Big Grin
یا اگه سوالی دارید در تاپیک خودش بپرسید نه اینجا چون حذف میشه!
امضای mmdsharifi دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Adel
۷-۱۴-۱۳۹۳, ۰۵:۱۲ عصر
ارسال: #5
استایل های تودرتو
درود!
بریم سراغ استایل دهی تو در تو در less .

با قواعد انتخابگرهای تو در توی LESS دیگر نیازی به استفاده از نامهای بلند برای مشخص کردن توالی و روابط نداریم. با قرار دادن تو در توی کدها، هم با خوانایی و کوتاهیِ قابل ملاحظه ای در کدها پایین خواهیم بود و هم این روابط را همچنان در CSS خواهیم داشت.

مثال:

کد php:
#header {
  
h1 {
    
font-size26px;
    
font-weightbold;
  }
  
font-size12px;
    
text-decorationnone;
      &:
hover border-width1px }
    }
  }


کامپایل شده کد ها:
علامت & به معنی اشاره گر به والدش هست.

کد php:
#header h1 {
  
font-size26px;
  
font-weightbold;
}
#header p {
  
font-size12px;
}
#header p a {
  
text-decorationnone;
}
#header p a:hover {
  
border-width1px;

امضای mmdsharifi دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Adel ، zahir
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان