با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در این جلسه ایمپورت کردن در LESS را یادخواهیم گرفت.از دستور import در LESS ، برای وارد کردن محتوا به فایل های Less یا Css و یا اضافه کردن فایل Less به فایل های دیگر استفاده می شود.
همان طور که گفته شد،از دستور import، برای اضافه کردن فایل Less به فایل های دیگر استفاده می شود.
شما می دانید که چگونه می توانید چیزهایی را در پیش پردازنده های CSS گسترش دهید؟ (اگر نه، شما می توانید در اینجا آن را یاد بگیرید.) زبان برنامه نویسی Sass می تواند این عمل را انجام دهد.همچنین LESS نیز می تواند آن را انجام دهد.به طور کلی این ویژگی بسیار کاربردی و مفید می باشد.
مثال زیر نحوه ایمپورت کردن در less را نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title>Less Importing</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <h1>Example using Importing</h1> <p class = "myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p> <p class = "myclass1">It allows reusing CSS code and writing LESS code with same semantics.</p> <p class = "myclass2">LESS supports creating cleaner, cross-browser friendly CSS faster and easier.</p> </body> </html> |
اکنون فایل myfile.less را بسازید:
1 2 3 4 5 6 7 | .myclass { color: #FF8000; } .myclass1 { color: #5882FA; } |
مرحله بعدی باید فایل style.less را بسازیم:
1 2 3 4 | @import "http://www.tutorialspoint.com/less/myfile.less"; .myclass2 { color: #FF0000; } |
همان طور که مشاهده می کنید، فایل myfile.less که در آدرس http://www.tutorialspoint.com/less/myfile.less قرار دارد، به فایل style.less ایمپورت شده است.
اکنون شما می توانید با استفاده از دستور زیر، فایل style.less را به فایل style.css کامپایل کنید:
1 | lessc style.less style.css |
با اجرای دستور بالا، فایل style.css به صورت خودکار،مانند زیر ایجاد می شود:
1 2 3 4 5 6 7 8 9 10 11 | .myclass { color: #FF8000; } .myclass1 { color: #5882FA; } .myclass2 { color: #FF0000; } |
با انجام گام های زیر، مشاهده کنید که کدهای مربوطه چگونه کار می کنند:
با یادگیری import در LESS ، برای وارد کردن محتوا به فایل های Less یا Css و یا اضافه کردن فایل Less به فایل های دیگر مشکلی نخواهید داشت و به راحتی می توانید عملیات انتقال فایل را انجام دهید این عمل در همه زبان های برنامه نویسی وجود دارد.