Less دىگەن زادىى نىمە؟
ئاۋال بىز كىتابى جاۋابنى دىمەي تۇرايلى، يەنە كونا قائىدىمىز بويىچە ئەمەليەتتىن مىسال ئىلىپ ئاندىن جاۋابىنى يەكۈنلەپ چىقايلى،باشلاپ كەتتۇق ھە ئەمىسە! ،ئاۋازىڭلار بارمۇ ھەي!لول لول لول لول(كالجاراپ تۇرغان ئىپادە) !
ئادەتتە بىز توردىن css توغۇرلۇق ماتىريال ئىزدىسەك Less دىگەن بۇ سۆزنى ئۇچۇرتۇپ قالىمىز،ھە ئەمىسە دىمەك بۇ بىز ئىزدىگەن css بىلەن مۇناسىۋىتى بار دىگەن گەپ.
ئاۋال بىز css نىڭ ئىنىقلىمىسىغا قاراپ باقايلى،بۇ بولسا بەيدۇ قامۇستىكى ئىنىقلىمىسى:
css بولسا html,xml ۋە شۇ قاتارلىق ھۆججەتلەرنىڭ ئۇسلۇبىنى(样式) ئىپادىلەيدىغان (标记性语言)(ئۇيغۇرچىغا تەرجىمە قىلالمىدىم).
ئەمدى Less نىڭ ئورگان بىتىدىكى ئىنىقلىمىسنى كۆرۈپ باقايلى،تۆۋەندىكىسى Less نىڭ ئورگان بىتىدە بىرىلگەن ئىنىقلىمىسى:
Less بولسا بىرخىل css ئالدىن بىرتەرەپ قىلغۇچ (预处理) تىلى،بۇ css تىلىنى كىڭەيتكەن ئاساستا،ئۆزگەگۈرگۈچى مىقدار،Mixin,فۇنكىسىيە قاتارلىق ئالاھىدىكلەرنى مۇجەسسەملىگەن،بۇ css تىلىنى تىخمۇ ئاسان پەرۋىش قىلغىلى بولىدىغان ۋە كىڭەيتكىلى بولىدىغان ھالەتكە ئەكەلگەن.
(بۇنى ئورگان بىتىدىن خەنزۇچىدىن ئۇيغۇرچىغا تەرجىمە قىلغان،بەلكىم سەل تومتاق چۈشۈنۈكسىز بولۇپ قالغان بولۇشى مۇمكىن)
يۇقاردىكى مەزمۇنلاردىن بىز بىر جاۋاب يەكۈنلەپ چىقايلى ، Less بولسا css نى ئاساس قىلغان ھالدا بۇنىڭغا ئەسلىدە css تە يوق بولغان ئۆزگەرگۈچى مىقدار،فۇنكىسىيە قاتارلىق يىڭى ئىقتىدارلار قۇشۇلغان css كىڭەيتىلمە تىلى.
Less نىمە سەۋەبتىن پەيدا بولغان؟
بۇ سۇئالغا جاۋاپ بىرىشتىن بۇرۇن css توغىرسىدا يەنە توختىلايلى،ھەممىمىز بىلىمىز css بولسا (标记性语言)(ئۇيغۇرچىغا تەرجىمە قىلالمىدىم)،گىرامماتتىكىسى ئاددى،ئۈگۈنۈشمۇ ئاسان،لكىن كەمچىلىكلىرىمۇ مەۋجۇت،چوڭ تىپتىكى تۈرلەرنى قىلغاندا پەرۋىش قىلىشقا بەك كۈچ كىتىدۇ،بۇنىڭ ئاساسلىق سەۋەبى بولسا css ھەقىقى مەنادىكى پىروگىرامما تىلى ئەمەس،بۇنىڭدا ئۆزگەرگۈچى مىقدار،فۇنكىسىيە،ئىپادە(运算)،دائىرە(作用域)،قايتا ئىشلىتىش(代码复用) قاتارلىق پىروگىرامما تىلنىڭ ئاساسى بولغان ئۇقۇملار مەۋجۇت ئەمەس،مەۋجۇت بولمىسا قانداق قىلىمىز؟ھەببەللى دىمەك بىز بۇيەردە بىر جاۋاپقا ئىرىشتۇق،Less بولسا css نى پىروگىرامما تىللىرىدا بار بولغان ئالاھىدىلىكلەرگە ئىگە قىلش ۋە بۇ ئارقىلىق ئىش ئۈنۈمىىنى يۇقىرى كۆتۈرۈش ئۈچۈن پەيدا بولغان.
Less قانداق ئىجرا بولىدۇ؟
less نىڭ ئۆزئالدىغا گىرامماتىكا قائىدىسى بار،ھەم ئۆزىنىڭ .less بىلەن ئاياقلاشقان ھۆججەت شەكلى بار،لىكىن يۇقىردا ئىيتىلىپ ئۆتكەندەك css تە ئەسلىدە يوق بولغان ئۇقۇملار بۇنىڭدا بار،لىكىن بۇلارنى تور كۆرگۈچ نورمال css ھالىتىدە بىرتەرەپ قىلالمايدۇ،دىمەك بىز less ھۆججەتنى ئۆزىنىڭ گىرامماتتىكا قائىدىسى بويىچە يازىمىز ئاندىن css ھۆججەتكە ئايلاندۇرىمىز(编译).
less ھۆججەتنى css ھۆججەتكە ئايلاندۇرۇشنىڭ تۆۋەندىكىدەك نەچچە خىل ئۇسۇلى بار.
- less.js ئارقىلىق ئايلاندۇرۇش.
- Node قاتارلىق مۇلازىمىنتىر مۇھىتىدا ئايلاندۇرۇش.
- HBuilder,Koala قاتارلىق دىتاللار ئارقىلق ئايلاندۇرۇش.
- Grunt,Gulp قاتارلىق ئۈچىنچى تەرەپ قوراللىرى ئارقىلىق ئايلاندۇرۇش.
تۆۋەندە بىر قەدەر ئاددى بولغان less.js ئارقىلق ئايلاندۇرۇشتىن پايدىنلىپ بىر مىسال ئىشلەيلى.
1. ئاۋال less.js نى چۈشۈرىمىز.
2. ئاندىن style.less ۋە less.js نى بەتكە ئۇلايمىز.
<link rel="stylesheet/less" type="text/css" href="style.less"/>
<script type="text/javascript" src="less.js"></script>
دىقەت: less ھۆججەت چوقۇم less.js نىڭ ئالدىدا بولۇشى كىرەك،يەنە بىر نۇقتا rel قىممىتى چوقۇم stylesheet/less بولۇشى كىرەك.
3. style.less ھۆججەتنى تەھرىرلەيمىز.
style.less ھۆججىتىنىڭ ئىچىگە بۇكودنى يازىمىز
@basic-color:#2b3140;
.header{
width: 100%;
height: 120px;
background:@basic-color ;
}
css كودىغا ئايلانغاندىكى ھالىتى
.header {
width: 100%;
height: 120px;
background: #2b3140;
}
ئاخىردا تەكىتلەشكە تىگىشلىك 2 نۇقتا.
- less ھۆججەتنى چۇقۇم توركۆرگۈچ بىرتەرەپ قىلالايدىغان ھالەت يەنى css كە ئايلاندۇرۇش(编译) لازىم.
- Less تىخى css نىڭ ئورنىنى ئالغىنى يوق ھەم ئالالمايدۇ.
بۇ قىتىملىق يازمىمىز مۇشۇ يەرگىچە بولسۇن،قالدىسنى كىيىن قىتىملىق يازمىدا داۋاملىق يازىمىز.
مەزكۇر يازما TARQAT تەرپىدىن يىزىلغان
بۇ بىكەتتىكى يازمىلارنى مەنبەسىنى ئەسكەرتكەن ھالدا تارقاتسىڭىز بولىدۇ
ئەڭ ئاخىرقى قىتىملىق تەھرىرلەنگەن ۋاقتى : Apr 25, 2019 at 04:45 pm
بەك ياخشى يېزىپسىز!