Preprocessor CSS ကို: ခြုံငုံသုံးသပ်ချက်, ရွေးချယ်မှု, လျှောက်လွှာ

လုံးဝအားလုံးအတွေ့အကြုံရှိကို web ဒီဇိုင်နာများအတွက် preprocessor ကိုအသုံးပြုပါ။ အဘယ်သူမျှမချွင်းချက်ရှိပါတယ်။ သင်ဤလှုပ်ရှားမှုအတွက်အောင်မြင်ဖို့လိုပါကဤအစီအစဉ်များအကြောင်းကိုမမေ့မလြော့ပါ။ ပထမတစ်ချက်မှာသူတို့တစ်တွေအတွေ့အကြုံမရှိသေးသောတိတ်ဆိတ်ထိတ်လန့်စေမည်အကြောင်း - က programming ကိုမှလည်းအလားတူပါ! တကယ်တော့နာရီစုံတွဲတစ်တွဲပြီးတော့, သငျသညျအကွောငျးကိုတစ်နေ့အဘို့ CSS ကို preprocessor ၏အင်္ဂါရပ်အားလုံးနှင့်အတူကိုင်တွယ်ဖြေရှင်းနိုင်ပြီး, သငျသညျကွိုးစားပါလျှင်။ အနာဂတျမှာ, သူတို့ကသိသိသာသာသင်၏အသက်တာကိုရိုးရှင်းပါလိမ့်မယ်။

ဘယ်လို CSS ကို preprocessor လုပ်ခဲ့တယ်

ပိုကောင်းတဲ့ဒီနည်းပညာ၏ဝိသေသလက္ခဏာများကိုနားလည်စေရန်, ခေတ္တက်ဘ်စာမျက်နှာများကို၏အမြင်အာရုံတင်ဆက်မှုများ၏သမိုင်းသို့ delve ။

သာမယ့်အင်တာနက်ကို၏ဧရာမအသုံးပြုမှုကိုစတင်တဲ့အခါ, အဘယ်သူမျှမစတိုင်စာရွက်များမတည်ရှိခဲ့ပါဘူး။ စာရွက်စာတမ်း execution ကို browser ပေါ်မှာလုံးဝမူတည်။ သူတို့ထဲကတစ်ဦးချင်းစီအခြို့သော tags များ၏ကုသမှုများအတွက်အသုံးပြုခဲ့ကြရာ၎င်းတို့၏ကိုယ်ပိုင်စတိုင်များ, ရှိခဲ့ပါတယ်။ ထို့ကြောင့်စာမျက်နှာများ browser ကိုသင်သည်ထိုသူတို့ဖွင့်ထားတဲ့အတွက်အမိန့်အပေါ်မူတည်ပြီးကွဲပြားခြားနားသောကြည့်ရှုပါ။ အဆိုပါရလဒ် - မငြိမ်သက်မှုများ, ရှုပ်ထွေးမှုများ, developer များအဘို့ပြဿနာများကို။

1994 ခုနှစ်မှာနော်ဝေသိပ္ပံပညာရှင် Hakone မုသားဟာ HTML ကို-စာရွက်စာတမ်းကနေသီးခြားစီစာမျက်နှာများ၏အသွင်အပြင်အတွက်အသုံးပြုနိုင်မယ့်စတိုင်စာရွက်တီထွင်ထုတ်လုပ်နိုင်ခဲ့သည်။ ချက်ချင်းပြီးစီးမှထွက်သတ်မှတ်ထားသူ W3C ၏စိတ်ကူး priglanulas အဖွဲ့ဝင်များက။ နှစ်အနည်းငယ်အကြာတွင်သူသည် CSS ကိုသတ်မှတ်ချက်တစ်ခုပထမဦးဆုံး version ကိုထုတ်ဝေခဲ့သည်။ ထို့နောက်သူမအဆက်မပြတ်အပြီးသတ်ခံရ, တိုးတက် ... ဒါပေမယ့်အယူအဆအားလုံးအတူတူပင်ကျန်ရစ်ခဲ့သည်: တစ်ဦးချင်းစီစတိုင်အခြို့သောဂုဏ်သတ္တိများထားကြ၏။

CSS ကိုစားပွဲအသုံးပြုခြင်းကအမြဲပြဿနာဖြစ်ခဲ့သည်။ ဥပမာအားဖြင့်, ဝဘ်ဒီဇိုင်နာမကြာခဏ features တွေ sorting နှင့်အုပ်စုဖွဲ့နှင့်အတူပြဿနာများရှိခဲ့နှင့်အမွေဆက်ခံနိုင်အောင်ရိုးရှင်းတဲ့မဟုတ်ပါဘူး။

ပြီးတော့နှစ်ခုထောင်လာ၏။ အမှတ်အသားများ ပို. ပို. ပြောင်းလွယ်ပြင်လွယ်ခြင်းနှင့်ပြောင်းလဲနေသောအလုပ်စတိုင်များဖြစ်ရန်အရေးကြီးပါသည်သောပရော်ဖက်ရှင်နယ် Front-အဆုံး developer များအတွက်ထိတွေ့ဆက်ဆံဖို့စတင်နေကြသည်။ ထိုအချိန်ကတည်ရှိ CSS ကိုနေရာချထား prefixes တောင်းဆိုနှင့် browser ၏သစ်ကိုစွမ်းရည်ကိုထောကျပံ့ခြေရာခံ။ JavaScript ကိုအသုံးပြုပုံနှင့်ပတ္တမြားကျွမ်းကျင်သူများကတစ် preprocessor အတွက်ချစီးပွားရေးလုပ်ငန်းမှရတယ်ထို့နောက် - CSS ကိုအဘို့အ superstructure, features အသစ်ကဆက်ပြောသည်နေကြသည်။

Beginners များအတွက် CSS ကို: preprocessor features တွေ

သူတို့ကတော်တော်များများရဲ့လုပ်ဆောင်ချက်တွေကိုရှိသည်:

• ဘရောက်ဇာကိုရှေ့ဆက်နှင့် khaki အချင်းချင်းစည်းလုံးညီညွတ်ရေး,

• syntax ရိုးရှင်း;

• အမှားအယွင်းများခြင်းမရှိဘဲအသိုက် selector တွေကိုနှင့်အတူအလုပ်လုပ်ရန်အခွင့်အလမ်းပေး;

• ယုတ္တိဗေဒပုံစံတိုးတက်ကောင်းမွန်အောင်။

တိုတောင်းသောခုနှစ်တွင်: အ preprocessor CSS ကို programming ကိုယုတ္တိဗေဒစွမ်းရည်ကထပ်ပြောသည်။ အခုတော့ပုံစံစတိုင်များ၏ပုံမှန်စာရင်းနှင့်အနည်းငယ်ရိုးရှင်းတဲ့နည်းစနစ်တွေနဲ့ဖျော်ဖြေခြင်းနှင့်ချဉ်းကပ်သည်မဟုတ်: variable တွေကို, functions များ, hagfish, သံသရာအခွအေန။ ထို့အပြင်ခုနှစ်, သင်္ချာသုံးစွဲဖို့စွမ်းရည်။

ဒီ add-ins ၏ကျော်ကြားမှုကိုမြင်လျှင်, ထို W3C တဖြည်းဖြည်း CSS ကိုကုဒ်မှာသူတို့ကိုများ၏ဖြစ်နိုင်ခြေကိုထည့်သွင်းဖို့စတင်ခဲ့ပါပြီ။ ဥပမာအားဖြင့်အများကြီး browser များကထောက်ပံ့သော, ထိုသတ်မှတ်ချက်အတွက်ဒါအဲဒီမှာ Calc () function ကို။ ဒါဟာမကြာခင်က variable တွေကိုသတ်မှတ်ထားခြင်းနှင့်တစ်ဦး hagfish ကိုဖန်တီးရန်ဖြစ်နိုင်လိမ့်မည်ဟုမျှော်လင့်ရသည်။ သို့သော်ဤဝေးလံသောအနာဂတ်ကာလ၌ဖြစ်ပျက်နှင့် preprocessors ပြီးသားကိုဒီမှာနှင့်ပြီးသားကောင်းစွာအလုပ်မလုပ်ပါလိမ့်မယ်။

လူကြိုက်များ preprocessors CSS ကို။ saß

2007 ခုနှစ်တွင်ဒီဇိုင်းရေးဆွဲ။ မူလကအစိတ်အပိုင်းတစ်ခု Haml - တစ်ဦး template ကို HTML ကို။ CSS ကိုဒြပ်စင်အသစ် features တွေနေရာတိုင်းကပြန့်နှံ့ဖို့စတင်ခဲ့သည့်ရထားလမ်းပေါ်တွင်ပတ္တမြားပေါ်တွင်မြိန်ရေရှက်ရေ developer များထိန်းချုပ်ထားသည်။ အဆိုပါsaßယခုဆို preprocessor တွင်ထည့်သွင်းဖြစ်ကြောင်းအင်္ဂါရပ်များကြီးမားတဲ့အရေအတွက်: variable တွေကို, selector တွေကို၏ embedding, hagfish (ထို့နောက်သို့သော်ဤငြင်းခုံထည့်လို့မရပါ) ။

saßအတွက်ကြေငြာ variable တွေကို

အဆိုပါ $ နိမိတ်လက္ခဏာနှင့်အတူကြေငြာ Variables ကို။ သူတို့ကဥပမာအားဖြင့်သူတို့ရဲ့ဂုဏ်သတ္တိများနှင့်စုံထိနျးသိမျးထားနိုငျ: "$ borderSolid: 1px အစိုင်အခဲအနီရောင်;" ။ ဒီဥပမာမှာကျနော်တို့ borderSolid လို့ခေါ်တဲ့ variable ကိုကြေညာခြင်းနှင့်က 1px အစိုင်အခဲအနီရောင်တန်ဖိုးထားကယ်လွှတ်တော်မူ၏။ အခုဆိုရင်ကျနော်တို့ 1px တစ်အနီရောင်နယ်စပ် width ကိုဖန်တီးရန်လိုအပ်သည် CSS ကိုအတွက်ပါလျှင်, ရိုးရှင်းစွာပိုင်ဆိုင်မှုအမည်ဖြင့်အပြီးကြောင်း variable ကိုဖော်ပြသည်။ အဆိုပါ variable တွေကိုများ၏ကြေငြာပြီးနောက်ပြောင်းလဲသွားရနိုင်မှာမဟုတ်ဘူး။ အတော်ကြာ built-in function တွေကိုရှိပါသည်။ ဥပမာအားဖြင့်, $ redcolor # FF5050 ၏တန်ဖိုးနဲ့ variable ကိုကြေညာ။ p {color ကို: ယခု, မည်သည့်ဒြပ်စင်များ၏ဂုဏ်သတ္တိများအတွက် CSS ကိုကုဒ်ထဲမှာ, font ကိုအရောင်တင်ထားရန်အသုံးပြုရန် $ redColor; } ။ သငျသညျအရောင်နှင့်အတူစမ်းသပ်ချင်ပါသလား? မိုက်သို့မဟုတ်ပေါ့ function ကိုသုံးပါ။ ဒီအပြုနေသည်: p {color ကို: ($ redColor, 20%) မိုက်; } ။ ရလဒ်အဖြစ်အရောင် redColor 20% ပိုမိုပေါ့ပါးဖြစ်လိမ့်မည်။

အဆိုပါsaßအများအပြား built-in function တွေကို။ တန်ဖိုးရှိမှာအနည်းဆုံးသူတို့ကိုဖတ်ပါ, ဒါပေမယ့်ပိုကောင်း - သင်ယူဖို့။

nesting များနမူနာ

ယခင်က nesting များနမူနာညွှန်ပြမယ့်ရှည်လျားပြီးမသက်မသာဒီဇိုင်းကိုသုံးစွဲဖို့ရှိခဲ့ပါတယ်။ ကျနော်တို့ p သော div ရှိသည်ဆိုပါစို့, ထိုသို့ထဲမှာအလှည့်အတွက် span ထားကြ၏။ အဝါရောင်, အ span အဘို့ - - ပန်းရောင်ပု div, ကြှနျုပျတို့ p များအတွက်စာလုံးအရောင်အနီ, သတ်မှတ်ရန်လိုသည်။ အောက်မှာဖေါ်ပြတဲ့အတိုင်းပုံမှန် CSS မှာပြုမည်ဖြစ်ကြောင်း:

div {

color: red;

}

div p {

အရောင်: အဝါရောင်;

}

div p span {

အရောင်: ပန်းရောင်,

}

CSS ကို preprocessor နှင့်အတူအားလုံးပိုမိုလွယ်ကူပြီးပိုကျစ်လစ်သိပ်သည်းဖြစ်လာသည်:

div {

color: red;

p {

အရောင်: အဝါရောင်;

.span {

အရောင်: ပန်းရောင်,

}

}

}

ဒြပ်စင်စာသားအချင်းချင်းတယောက်ကိုတယောက် "ရင်းနှီးမြှုပ်နှံ" ။

preprocessor ညွှန်ကြားချက်

@import ညွှန်ကြားချက်ကိုသုံးပြီးဖိုင်တွေတင်သွင်းနိုင်သည်။ ဥပမာအားဖြင့်ကျနော်တို့ဖောင့်အဘို့စတိုင်များမိန့်တော်မူ၏ကြောင်း fonts.sass ဖိုင်ရှိသည်။ အဓိကဖိုင် style.sass ကချိတ်ဆက်ပါ: @import '' ဖောင့် '' ။ Done! အဲဒီအစားကျွန်တော်တို့ဟာလိုအပ်သောဂုဏ်သတ္တိများဖို့မြန်ဆန်လွယ်ကူစွာအတှကျအသုံးပွုနိုငျကွောငျးအနည်းငယ်ရှိသည်စတိုင်များနှင့်အတူတစ်ခုတည်းသောကြီးမားသောဖိုင်၏။

hagfish

စိတ်ဝင်စားစရာအကောင်းဆုံးအကြံဥာဏ်များတစ်ခုမှာ။ ဒါဟာတဦးတည်းလိုင်းဂုဏ်သတ္တိအစုတခုမေးရန်ခွင့်ပြုပါတယ်။ အောက်မှာဖေါ်ပြတဲ့အတိုင်း Operate:

largeFont {@mixin

font-family: 'Times New Roman ";

font-size: 64px;

လိုင်း-အမြင့်: 80px;

font-အလေးချိန်: ရဲရင့်;

}

အဆိုပါညွှန်ကြားချက် @include အသုံးပြုစာမျက်နှာပေါ်မှဒြပ်စင်လျှောက်ထားရန် Hagfish ။ ဥပမာအားဖြင့်ကျနော်တို့ h1 header ကိုကလျှောက်ထားချင်ပါတယ်။ h1 {@include: ကျနော်တို့အောက်ပါအချက်များကိုဖွဲ့စည်းပုံမှာရှိ largeFont; }

hagfish အပေါငျးတို့သဂုဏ်သတ္တိများတစ်ခု h1 ဒြပ်စင်တာဝန်ပေးအပ်ထားပါသည်။

preprocessor နည်း

syntax saß programming ကိုပြန်ပြောပြသည်။ သငျသညျ CSS ကိုလေ့လာနေအရင်ကဆိုရင်ပိုမိုသင့်လျော်ကြောင်းတစ်ခု option ကိုရှာနေနေတယ်ဆိုရင်, အောက်ကြည့်ရှုပါ။ ဒါဟာ 2009 ခုနှစ်ကဖန်တီးခဲ့တာဖြစ်ပါတယ်။ အဓိကအင်္ဂါရပ် - programming ကိုခံ့ညားအတူကသင်ယူဖို့ပိုပြီးလွယ်ကူပါလိမ့်မည်ဒါကြောင့်ကျွမ်းတဝင်မရှိသော CSS ကိုဇာတိ syntax အတှကျထောကျပံ့။

အဆိုပါ variable တွေကိုပု @ သင်္ကေတသုံးပြီးကြေညာနေကြသည်။ ဥပမာ: @fontSize: 14px; ။ saß၌ရှိသကဲ့သို့တူညီသောအခြေခံမူအပေါ်အကျင့်ကိုကျင့်အသိုက်။ အောက်မှာဖေါ်ပြတဲ့အတိုင်း Hagfish ထုတ်ပြန်ကြေညာနေကြသည်: .largeFont () {font-family: 'Times New Roman "; font-size: 64px; လိုင်း-အမြင့်: 80px; font-အလေးချိန်: ရဲရင့်; } ။ ပဲရွေးချယ်ထားဒြပ်စင်များ၏ဂုဏ်သတ္တိများအတွက်အသစ်ဖန်တီး hagfish add - ကချိတ်ဆက်ဖို့ preprocessor ညွှန်ကြားချက်သုံးစွဲဖို့မလိုအပ်ပါဘူး။ ဥပမာ: {.largeFont h1; } ။

stylus

နောက်ထပ် preprocessor ။ အတူတူစာရေးဆရာတို့က 2011 ခုနှစ်, Created, သောလောကကျောက်စိမ်း, Express နှင့်အခြားအသုံးဝင်သောထုတ်ကုန်ကိုပေး၏။

Variables ကိုနည်းလမ်းနှစ်ခုအတွက်ကြေငြာနိုင်ပါသည် - တစ်ခုခုကိုအတိအလင်းသို့မဟုတ်လုံးလုံးလြားလြား။ ဥပမာ: စာလုံး = 'Times New Roman "; - တစ်ဦးသွယ်ဝိုက် option ကို။ ဒါပေမယ့် $ ဖောင် = 'Times New Roman' - ရှင်းလင်းပြတ်သားတဲ့။ Hagfish ကြေညာခြင်းနှင့်လုံးလုံးလြားလြားချိတ်ဆက်နေကြသည်။ အောက်မှာဖေါ်ပြတဲ့အတိုင်း syntax ဖြစ်ပါသည်: redColor () အရောင်ကအနီရောင်။ ယခုငါတို့ဥပမာပစ္စည်း add နိုင်သည် h1 redColor (); ။

အဲဒါကိုနားမလည်ပုံပေါက်စခွေငျးငှါပထမတစ်ချက်အပေါ် stylus ။ က "ဇာတိ" ကွင်းခတ်နဲ့ semicolon အဘယ်မှာရှိသနည်း ဒါပေမယ့်အဲဒါကိုသို့ထိုးရန်လိုအပ်ပါသည်, ရှိသမျှအများကြီးရှင်းလင်းဖြစ်လာသည်။ ဒီ preprocessor ၏ရေရှည်ဖွံ့ဖြိုးရေးကိုသင်ဂန္ CSS ကို syntax ကိုအသုံးပြုပါ "နို့ကွာ" နိုငျကြောင်း, သို့သော်သတိရပါ။ တစ်ဦး "စင်ကြယ်သော" စတိုင်နှင့်အတူအလုပ်လုပ်ရန်ရှိခြင်းသောအခါဤတခါတရံပြဿနာများကိုဖြစ်ပေါ်စေသည်။

အဘယ်အရာကို preprocessor ကိုရှေးခယျြ?

တကယ်တော့သူကသည် ... သူကအရေးမထားဘူး။ အားလုံးဗားရှင်းတစ်ခုချင်းစီ၏ရုံ syntax ကွဲပြားခြားနားသည်အတူတူပင် features တွေအကြောင်းကိုဆက်ကပ်။ ကျနော်တို့ကိုအောက်ပါအတိုင်းဆက်လက်ဆောင်ရွက်ရန်အကြံပြု:

• ; ပရိုဂရမ်မာများနှင့်နှစ်ဦးစလုံးကုဒ်အတွက်စတိုင်များနှင့်အတူအလုပ်လုပ်ချင်, အsaßကိုသုံးပါ - သင်လျှင်
• သငျသညျဆိုပါက - တစ်ဦးဝိဉာဉ်နှင့်သမားရိုးကျ layout ကိုနှင့်ဝသကဲ့သို့စတိုင်များနှင့်အတူအလုပ်လုပ်ချင်, အလျှော့ဖို့အာရုံစိုက်;
• သငျသညျအနည်းငယ်မျှသာကြိုက်နှစ်သက်လျှင်, Stylus ကိုသုံးပါ။

ပင်နောက်ထပ်ဖွံ့ဖြိုးတိုးတက်မှုရိုးရှင်းနိုင်သောစိတ်ဝင်စားစရာကောင်းတဲ့စာကြည့်တိုက်တစ်ခုအဆုံးမဲ့အရေအတွက်အားလုံးမျိုးကွဲသည်။ အများအပြား built-in features တွေပါတဲ့အစွမ်းထက် tool ကို - အသုံးပြုသူများsaßသည့်သံလိုက်အိမ်မြှောင်အာရုံစိုက်ဖို့အကြံပြုခဲ့သည်။ သင်က install လုပ်ပြီးနောက်ဥပမာအားဖြင့်, သင်ရောင်းချသူဗားရှင်းရှေ့ဆက်စိုးရိမ်ရန်ရှိသည်ဘယ်တော့မှပါလိမ့်မယ်။ Simplified Grid နှင့်အတူအလုပ်လုပ်ကြသည်။ ပန်းပွင့် sprite များနမူနာအတူလုပ်ကိုင်ဘို့ tools တွေရှိပါတယ်။ တစ်ဦးကအကွာအဝေးပြီးသား hagfish ကြေညာခဲ့သည်။ ဒီ tool ကိုရက်ပေါင်း၏စုံတွဲတစ်တွဲ Give - အရှင်သငျသညျအနာဂတျမှာအချိန်နှင့်ကြိုးစားအားထုတ်မှုတွေအများကြီးကယ်တင်မည်။