میزبانی وب هاست

میزبانی هاست لینوکس و ویندوز در سرور های قدرتمند سه کشور ایران کانادا و آمریکا با پشتیبانی 24 ساعته

میزبانی وب

ثبت دامنه

ثبت دامنه های ملی کشور ایران و دامنه های بین المللی جهانی با پیشوند های ir , com , net , org , info , ws و ....

ثبت دامنه

طراحی وب سایت

طراحی و برنامه نویسی حرفه ای وب سایت و سیستم های اتوماسیون اداری با قابلیت واکنش گرا (Responsive)

طراحی وب

آموزش طراحی وب

برگزاری کلاس های آموزش برنامه نویسی و طراحی سایت در مازندران بصورت کاملا خصوصی

آموزش طراحی وب

آموزش فریم ورک LESS برای کار با CSS

LESS یک فریم ورک که تحت زبان برنامه نویسی جاوا نوشته شده یکی از جدید ترین و در عین حال ساده ترین متد هایی است که به کمک طراحان صفحات وب آمده است به نحوی که نوشتن فایل هایی با زبان CSS3 دیگه وقت زیادی از آدم رو نمیبره…در وب سایت مرجع این فریم ورک LESS را به معنی Less is a CSS pre-processor, meaning that it extends the CSS language یا همان افزاینده یا گسترش دهنده زبان CSS معرفی کرده است.

برای کار با LESS مراحل زیر را انجام دهید :

۱ ) دریافت فایل LESS از وب سایت رسمی آن

ابتدا به وب سایت http://lesscss.org رفته و یا از لینک Github آن آخرین ورژن این فریم ورک را دریافت کنید در نظر داشته باشید که LESS تنها یک فایل جاوا اسکریپ می باشد که با پسوند .js است و شما باید آن را در صفحات Html خود فراخوانی کنید.

۲) فراخوانی LESS javascript در صفحات Html خود

حال نوبت به کار رسیده است.اگر یادتان باشد فایل هایی که به زبان CSS نوشته می شدند را با پسوند .css ذخیره می کردیم ولی حالا فایل هایی که به زبان LESS نوشته می شوند را با پسوند .less الیجاد می کنیم پس یک فایل با این پسوند ایجاد کنید و کد زیر را در بخش head وب سایت خود قرار دهید

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

۱ ۲	<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script>

در متن بالا ۲ نکته رو بگم اول این که مقدار REL را برای فراخوانی فایل های لس همیشه stylesheet/less باید قرار دهیم . دوم این که همیشه فایل جاوا کتابخانه LESS را بعد از فایل مربوطه لود می کنیم در ضمن اگه هم از Jquery در صفحات خود استفاده می کنید کد لود شدن جی کوئری را قبل از فراخوانی فایل less.js قرار دهید.

۳) یک مثال با LESS

حالا فایل style.less را باز کنید تا یک مثال کوچک برایتان بزنم.یکی از کاربردی ترین کارهایی که فایل های LESS برای ما انجام می هند خلاصه نویسی دستورات Css می باشند.مثلا شما از رنگ سبز در نوشته ها و خطوط سایت خوئتون استفاده می کنید اگر میخواستید با Css کار کنید برای تمامی Class ها و id ها می بایست کد HEX رنگ سبز را می نوشتید اما در LESS شما یک متغیر رنگ سبز ایجاد می کنید و بعد آن را در Class های مختلف بار گذاری می کنید مثلا :

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {

-webkit-box-shadow: @style @c;

-moz-box-shadow: @style @c;

box-shadow: @style @c;

}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {

.box-shadow(@style, rgba(0, 0, 0, @alpha));

}

.box {

color: saturate(@base, 5%);

border-color: lighten(@base, 30%);

div { .box-shadow(۰ ۰ ۵px, ۳۰%) }

}

در مثال بالا ما یک متغیر با نام base ایجاد کردیم که برابر با کد رنگ HEX قرار دادیم و از این پس با فراخوانی این متغیر می تواین تمامی جاها از آن استفاده کنیم.

البته ویزگی های LESS فراتر از این حرف هاست که میتویند با یه سرچ کوچک در گوگل به مستندات آن دست پیدا کیند.

تاریخ و زمان انتشار : ۳ اسفند, ۱۳۹۲

مرتبط با موضوع :

آدرس : مازندران - فریدونکنار - میدان درنا - خیابان جمکران (خط سوته)

تلفن تماس : ۹۲۳۸ ۳۵۶۶ ۰۱۱[ ساعات اداری : شنبه تا چهارشنبه | 9 صبح تا 4 بعد از ظهر ]

پست الکترونیک :info [at] Mazandaranweb.ir

بانک ملی ایران

شماره حساب : 0216867544008
شماره 16 رقمی کارت : 3479 - 0689 - 9918 - 6037
به نام مهرشاد درزی سوته

دوره ی های آموزشی طراحی وب سایت در مازندران

برگزاری کلاس های آموزش برنامه نویسی و طراحی وب سایت در شهر های استان مازندران آمل ، بابل ، بابلسر ، ساری ، قائمشهر ، فریدونکنار ، نور ، چالوس ، محمود آباد و .... بصورت کاملا خصوصی جهت آمادگی علاقه مندان این صنعت ، به بازار کار مشاغل کشور
جهت اطلاعات بیشتر اینجا کلیک کنید ...

طراحی وب سایت ریسپانسیو واکنش گرا responsive با فریم ورک بوت استرپ