LESS-এ গাণিতিক অপারেশন
LESS ভাষায় ভেরিয়েবল এবং বিভিন্ন মানের উপর গাণিতিক অপারেশন করা যায়। আসুন উদাহরণের মাধ্যমে দেখি।
উদাহরণ
দুটি মান যোগ করা যাক:
p {
font-size: 5px + 10px;
}
কম্পাইল করার ফল:
p {
font-size: 15px;
}
উদাহরণ
একটি মান থেকে অন্য মান বিয়োগ করা যাক:
p {
font-size: 25px - 10px;
}
কম্পাইল করার ফল:
p {
font-size: 15px;
}
উদাহরণ
একটি মানকে একটি সংখ্যা দিয়ে গুণ করা যাক:
p {
font-size: 5px * 5;
}
কম্পাইল করার ফল:
p {
font-size: 25px;
}
উদাহরণ
একটি মানকে একটি সংখ্যা দিয়ে ভাগ করা যাক:
div {
width: 100% / 3;
}
কম্পাইল করার ফল:
div {
width: 33.33333333%;
}
উদাহরণ
একটি ভেরিয়েবলের মানের সাথে আরেকটি মান যোগ করা যাক:
@var: 100px;
div {
width: @var + 100px;
}
কম্পাইল করার ফল:
div {
width: 200px;
}
উদাহরণ
দুটি ভেরিয়েবল যোগ করা যাক:
@var1: 100px;
@var2: 200px;
div {
width: @var1 + @var2;
}
কম্পাইল করার ফল:
div {
width: 300px;
}
উদাহরণ
ভিন্ন ইউনিট নিয়ে অপারেশন করার চেষ্টা করলে LESS সব ইউনিটকে প্রথমটিতে রূপান্তরিত করে। উদাহরণ:
div {
width: 100% - 10px;
}
কম্পাইল করার ফল:
div {
width: 90%;
}
ব্যবহারিক সমস্যা
নিচের কোড কম্পাইল করার ফল কী হবে তা বলুন:
#block {
width: 100px * 2;
}
নিচের কোড কম্পাইল করার ফল কী হবে তা বলুন:
#block {
width: 200px / 3;
}
নিচের কোড কম্পাইল করার ফল কী হবে তা বলুন:
@var1: 500px;
@var2: 5;
#block {
width: @var1 / @var2;
}