CSS ដែលកម្មវិធីដំណើរការជាមុន: ទិដ្ឋភាពទូទៅ, ការជ្រើសរើសកម្មវិធី,

រចនាបណ្ដាញដែលមានបទពិសោធពិតជាប្រើកម្មវិធីដំណើរការជាមុននោះទាំងអស់។ មានករណីលើកលែងទេ។ ប្រសិនបើអ្នកចង់ទទួលបានជោគជ័យក្នុងសកម្មភាពនេះមិនភ្លេចអំពីកម្មវិធីទាំងនេះ។ នៅ glance ដំបូង, ពួកគេអាចបង្កឱ្យមានការរន្ធត់ស្ងាត់ដើម្បីសុខភាព - វាគឺស្រដៀងគ្នាផងដែរដើម្បីសរសេរកម្មវិធី! នៅក្នុងការពិត, អ្នកអាចដោះស្រាយជាមួយនឹងលក្ខណៈពិសេសទាំងអស់នៃកម្មវិធីដំណើរការជាមុន CSS សម្រាប់ប្រហែលមួយថ្ងៃ, ហើយប្រសិនបើអ្នកព្យាយាម, បន្ទាប់មកពីរបីម៉ោង។ ក្នុងពេលអនាគតពួកគេនឹងយ៉ាងខ្លាំងភាពងាយស្រួលក្នុងជីវិតរបស់អ្នក។

តើធ្វើដូចម្តេចបានធ្វើកម្មវិធីដំណើរការជាមុនជា CSS

ដើម្បីយល់ពីលក្ខណៈនៃបច្ចេកវិទ្យានេះល្អប្រសើរជាងមុនយ៉ាងខ្លីចូលទៅក្នុងប្រវត្តិសាស្រ្តរបស់ delve បទបង្ហាញដែលមើលឃើញនៃទំព័របណ្តាញ។

ពេលដែលទើបតែចាប់ផ្ដើមការប្រើប្រាស់អ៊ីនធើណែធំ, ទេសន្លឹករចនាប័ទ្មមិនមានទេ។ ការប្រតិបត្តិនៃឯកសារអាស្រ័យទាំងស្រុងលើកម្មវិធីរុករក។ គ្នានៃពួកគេមានរចនាប័ទ្មផ្ទាល់ខ្លួនរបស់ពួកគេ, ដែលត្រូវបានប្រើសម្រាប់ការព្យាបាលនៃស្លាកមួយចំនួន។ ដូច្នោះហើយទំព័រមើលទៅខុសគ្នាអាស្រ័យលើលំដាប់ដែលកម្មវិធីរុករកដែលអ្នកបើកពួកគេ។ លទ្ធផលនេះ - ភាពចលាចល, ការយល់ច្រឡំ, បញ្ហាសម្រាប់អ្នកអភិវឌ្ឍន៍។

ក្នុងឆ្នាំ 1994 អ្នកវិទ្យាសាស្រ្តជនជាតិន័រវេសHåkonកុហកអភិវឌ្ឍសន្លឹករចនាប័ទ្មមួយដែលអាចត្រូវបានប្រើសម្រាប់រូបរាងនៃទំព័រនេះដាច់ដោយឡែកពី HTML ដែលឯកសារ។ សមាជិក priglanulas គំនិតនៃរបស់ W3C, ដែលបានកំណត់ភ្លាមដើម្បីបញ្ចប់។ ប៉ុន្មានឆ្នាំក្រោយមកលោកបានចេញផ្សាយកំណែដំបូងនៃការបញ្ជាក់ជា CSS នេះ។ បន្ទាប់មកនាងត្រូវបានគេធ្វើឱ្យប្រសើរឡើងឥតឈប់ឈរត្រូវបានបញ្ចប់ ... ប៉ុន្តែគំនិតនេះនៅតែទាំងអស់ដូចគ្នា: រចនាប័ទ្មកំណត់លក្ខណៈសម្បត្តិមួយចំនួនជារៀងរាល់។

ដោយប្រើ CSS ដែលតែងតែតុបានបញ្ហា។ ឧទាហរណ៍អ្នករចនាវែបសាយជាញឹកញាប់មានបញ្ហាជាមួយលក្ខណៈពិសេសដែលដាក់ក្រុមនិងការតម្រៀបនិងមរតកគឺមិនមានលក្ខណៈសាមញ្ញណាស់។

ហើយបន្ទាប់មកបានមកពាន់ពីរ។ សញ្ញាណសំគាល់ត្រូវបានចាប់ផ្តើមកាន់តែខ្លាំងឡើងទៅចូលរួមក្នុងអ្នកអភិវឌ្ឍន៍ផ្នែកខាងមុខដែលមានជំនាញវិជ្ជាជីវៈដែលជាការសំខាន់ដើម្បីឱ្យមានការងារអាចបត់បែនបាននិងរចនាប័ទ្មថាមវន្ត។ បានកើតមាននៅពេលទាមទារឱ្យដាក់ CSS និងតាមដានបុព្វបទការគាំទ្រសមត្ថភាពថ្មីនៃកម្មវិធីរុករក។ បន្ទាប់មកដោយមាន JavaScript និងអ្នកជំនាញចុះទៅ Ruby ព្រមទាំងទទួលបានអាជីវកម្ម, ការបង្កើតកម្មវិធីដំណើរការជាមុនមួយ - ធំសម្រាប់ជា CSS, លក្ខណៈពិសេសថ្មីត្រូវបានបន្ថែមទៅវា។

CSS សម្រាប់អ្នកចាប់ផ្តើមដំបូង: លក្ខណៈពិសេសកម្មវិធីដំណើរការជាមុន

ពួកគេមានមុខងារច្រើន:

• បង្រួបបង្រួមបុព្វបទកម្មវិធីរុករកនិងកាគី;

• ភាពងាយស្រួលវាក្យសម្ព័ន្ធ;

• ផ្តល់នូវឱកាសដើម្បីធ្វើការជាមួយនឹងការជ្រើសរើសខាងក្នុងដោយគ្មានកំហុស;

• ធ្វើឱ្យប្រសើរឡើងតក្ករចនាប័ទ្ម។

នៅក្នុងរយៈពេលខ្លី: កម្មវិធីដំណើរការជាមុននោះបានបន្ថែមទៀតថាជា CSS សមត្ថភាពតក្កសរសេរកម្មវិធី។ ឥឡូវនេះកំណត់រចនាប័ទ្មមិនត្រូវបានធ្វើនៅក្នុងការចុះបញ្ជីធម្មតានៃរចនាប័ទ្មនិងជាមួយបច្ចេកទេសមួយចំនួនដែលមានលក្ខណៈសាមញ្ញនិងវិធីសាស្រ្ត: អថេរ, មុខងារ, hagfish, លក្ខខណ្ឌវដ្ត។ លើសពីនេះទៀតសមត្ថភាពក្នុងការប្រើគណិតវិទ្យា។

ដោយមើលឃើញពីប្រជាប្រិយភាពនៃការទាំងនេះបន្ថែមជំនួយនេះ, បានចាប់ផ្តើម W3C នេះដើម្បីបន្ថែមបន្តិចម្តងលទ្ធភាពនៃពួកគេនៅក្នុងកូដ CSS បាននោះទេ។ ឧទាហរណ៍ក្នុងការបញ្ជាក់ដូច្នេះអនុគមន៍ Calc () មាន, ដែលត្រូវបានគាំទ្រដោយកម្មវិធីរុករកជាច្រើន។ វាត្រូវបានគេរំពឹងទុកថាវានឹងឆាប់អាចធ្វើទៅបានដើម្បីកំណត់អថេរនិងបង្កើត hagfish មួយ។ ទោះយ៉ាងណានេះនឹងកើតឡើងនៅអនាគតឆ្ងាយ, និងកម្មវិធីដំណើរការជាមុនរួចទៅហើយនៅទីនេះហើយធ្វើការបានល្អរួចទៅហើយ។

ការពេញនិយមជា CSS កម្មវិធីដំណើរការជាមុន។ sass

បានរចនាឡើងក្នុងឆ្នាំ 2007 ។ ដើមឡើយជា Haml សមាសភាគ - HTML ដែលពុម្ពមួយ។ លក្ខណៈពិសេសថ្មីសម្រាប់ធាតុ CSS បានគ្រប់គ្រងអ្នកអភិវឌ្ឍន៍រីករាយនៅលើផ្លូវរថភ្លើង Ruby ព្រមទាំងនៅលើដែលចាប់ផ្តើមរីករាលដាលវានៅគ្រប់ទីកន្លែង។ sass នេះបានមួយចំនួនធំនៃលក្ខណៈពិសេសដែលឥឡូវនេះត្រូវបានរួមបញ្ចូលនៅក្នុងកម្មវិធីដំណើរការជាមុនណាមួយ: អថេរបង្កប់នៃការជ្រើសរើស, hagfish (បន្ទាប់មក, ទោះជាយ៉ាងណា, អាគុយម៉ង់ទាំងនេះអាចមិនត្រូវបានបន្ថែម) ។

ការប្រកាសអថេរនៅក្នុង sass

អថេរដែលបានប្រកាសដោយសញ្ញា $ នេះ។ ពួកគេអាចរក្សាបាននូវលក្ខណៈសម្បត្តិនិងសំណុំរបស់ពួកគេឧទាហរណ៍: "$ borderSolid: ក្រហមរឹង 1px" ។ នៅក្នុងឧទាហរណ៍នេះយើងបានប្រកាសអថេរមួយឈ្មោះ borderSolid ហើយបានរក្សាទុកវាឱ្យតម្លៃក្រហមរឹង 1px ។ ឥឡូវនេះប្រសិនបើនៅក្នុង CSS ដែលយើងត្រូវការដើម្បីបង្កើតទទឹងស៊ុមក្រហមនៃ 1px, គ្រាន់តែបង្ហាញថាអថេរបន្ទាប់ពីឈ្មោះអចលនទ្រព្យនោះ។ បន្ទាប់ពីការប្រកាសអថេរមិនអាចត្រូវបានផ្លាស់ប្តូរ។ វាមានមុខងារសង់ឡើងនៅក្នុងជាច្រើន។ ឧទាហរណ៍ប្រកាសអថេរមួយជាមួយនឹងតម្លៃនៃការ $ redcolor # FF5050 មួយ។ ឥឡូវនេះក្នុងកូដ CSS បាននៅក្នុងលក្ខណៈសម្បត្តិនៃធាតុណាមួយបាន, ប្រើវាដើម្បីកំណត់ការណ៍ពុម្ពអក្សរ: ទំ {color: $ redColor; } ។ តើអ្នកចង់សាកល្បងជាមួយណ៍នេះ? ប្រើខ្មៅងងឹតដោយអ្នកនិពន្ធមុខងារឬ lighten ។ នេះត្រូវបានធ្វើដូច្នេះ: ទំ {color: ខ្មៅ ($ redColor, 20%); } ។ ជាលទ្ធផល redColor ណ៍នេះនឹងត្រូវបានស្រាលជាងមុន 20% ។

នេះ sass មុខងារកសាងឡើងនៅក្នុងជាច្រើន។ មានតម្លៃយ៉ាងហោចណាស់អានពួកវាទេតែល្អប្រសើរជាងមុន - ដើម្បីរៀន។

សំណាញ់

កាលពីមុនដើម្បីបង្ហាញសំណាញ់បានប្រើរយៈពេលយូរនិងមិនស្រួលរចនា។ ស្រមៃថាយើងមាន div មួយដែលមានទំ, ហើយនៅក្នុងវា, នៅក្នុងវេន, កំណត់រយៈពេល។ សម្រាប់ div នេះយើងត្រូវកំណត់ណ៍ពុម្ពអក្សរក្រហមសម្រាប់ទំ - លឿងសម្រាប់រយៈពេលនេះ - ផ្កាឈូក។ នៅក្នុង CSS បានធម្មតាវានឹងត្រូវបានធ្វើដូចខាងក្រោម:

div {

color: ក្រហម;

}

div ទំ {

color: លឿង;

}

រយៈពេល div ទំ {

color: ផ្កាឈូក;

}

ជាមួយនឹងការទាំងអស់បានក្លាយទៅជាកម្មវិធីដំណើរការជាមុនកាន់តែងាយស្រួលជា CSS និងការបង្រួមបន្ថែមទៀត:

div {

color: ក្រហម;

ទំ {

color: លឿង;

.span {

color: ផ្កាឈូក;

}

}

}

ធាតុព្យញ្ជនៈ«បណ្តាក់ទុន "មួយផ្សេងទៀត។

ណែនាំកម្មវិធីដំណើរការជាមុន

ដោយប្រើណែនាំ @import អាចនាំចូលឯកសារ។ ឧទាហរណ៍យើងមានឯកសារ fonts.sass ដែលប្រកាសរចនាប័ទ្មសម្រាប់ពុម្ពអក្សរ។ ភ្ជាប់វាទៅ style.sass ឯកសារចម្បង "ពុម្ពអក្សរ" @import ។ ធ្វើ! ជំនួសឱ្យឯកសារធំមួយតែមួយជាមួយនឹងរចនាប័ទ្មដែលយើងមានមួយចំនួនដែលអាចត្រូវបានប្រើសម្រាប់ការចូលដំណើរការងាយស្រួលនិងរហ័សដើម្បីមានលក្ខណៈសម្បត្តិដែលបានទាមទារ។

hagfish

គំនិតគួរឱ្យចាប់អារម្មណ៍មួយច្រើនបំផុត។ វាអនុញ្ញាតឱ្យបន្ទាត់មួយដើម្បីសួរសំណុំនៃលក្ខណៈសម្បត្តិមួយ។ ប្រត្តិបត្តិដូចខាងក្រោម:

@mixin largeFont {

ពុម្ពអក្សរគ្រួសារ: "Times New Roman ';

ពុម្ពអក្សរទំហំ: 64px;

បន្ទាត់កម្ពស់: 80px;

ពុម្ពអក្សរដែលមានទម្ងន់: ដិត;

}

Hagfish ដើម្បីអនុវត្តទៅធាតុនៅលើទំព័រប្រើ @include សារាចរនេះ។ ឧទាហរណ៍យើងចង់អនុវត្តវាទៅបឋមកថា h1 នេះ។ យើងមានរចនាសម្ព័ន្ធដូចខាងក្រោម: h1 {@include: largeFont; }

លក្ខណៈសម្បត្តិទាំងអស់នៃ hagfish ត្រូវបានកំណត់ជាធាតុ h1 ។

កម្មវិធីដំណើរការជាមុនតិចជាង

វាក្យសម្ព័ន្ធ sass ប្រមូលរថយន្តសរសេរកម្មវិធី។ ប្រសិនបើអ្នកកំពុងតែស្វែងរកជម្រើសមួយដែលកាន់តែសមស្របសម្រាប់ការចាប់ផ្តើមសិក្សា CSS, រកមើលតិច។ វាត្រូវបានបង្កើតឡើងក្នុងឆ្នាំ 2009 ។ លក្ខណៈពិសេសចម្បង - ការគាំទ្រសម្រាប់វាក្យសម្ព័ន្ធដែលមានដើមកំណើតជា CSS, ដូច្នេះមិនច្បាស់ជាមួយនឹង imposing សរសេរកម្មវិធីវានឹងមានភាពងាយស្រួលដើម្បីរៀន។

អថេរត្រូវបានប្រកាសថាជាការប្រើសញ្ញា @ នេះ។ ឧទាហរណ៍: @fontSize: 14px; ។ ការប្រព្រឹត្ដសំណាញ់នៅលើគោលការណ៍ដូចគ្នាដូចនៅ sass ។ Hagfish ត្រូវបានប្រកាសដូចខាងក្រោម: .largeFont () {ពុម្ពអក្សរគ្រួសារ: "Times New Roman '; ពុម្ពអក្សរទំហំ: 64px; បន្ទាត់កម្ពស់: 80px; ពុម្ពអក្សរដែលមានទម្ងន់: ដិត; } ។ ដើម្បីភ្ជាប់វាមិនចាំបាច់ក្នុងការប្រើណែនាំកម្មវិធីដំណើរការជាមុន - គ្រាន់តែបន្ថែម hagfish ដែលបានបង្កើតថ្មីនៅក្នុងលក្ខណៈសម្បត្តិនៃធាតុដែលបានជ្រើស។ ឧទាហរណ៍: h1 {.largeFont; } ។

stylus

កម្មវិធីដំណើរការជាមុនមួយផ្សេងទៀត។ បង្កើតឡើងនៅក្នុងឆ្នាំ 2011 ដោយអ្នកនិពន្ធដូចគ្នា, ដែលបានផ្ដល់ឱ្យពិភពលោក Jade, ផលិតផលមានប្រយោជន៍ Express និងផ្សេងទៀត។

អថេរអាចត្រូវបានប្រកាសនៅក្នុងវិធីពីរយ៉ាង - ទាំងជាក់លាក់ឬទាំងស្រុង។ ឧទាហរណ៍: ពុម្ពអក្សរ = 'Times New Roman'; - ជាជម្រើសជាក់ច្បាស់។ ប៉ុន្តែ $ ពុម្ពអក្សរ = 'Times New Roman' - ច្បាស់លាស់។ Hagfish ត្រូវបានប្រកាសនិងបានភ្ជាប់ទាំងស្រុង។ វាក្យសម្ព័ន្ធគឺមានដូចខាងក្រោម: redColor () ក្រហមណ៍។ ឥឡូវនេះយើងអាចបន្ថែមធាតុឧទាហរណ៍: redColor H1 (); ។

stylus នៅលើ glance ដំបូងវាអាចហាក់ដូចជាមិនអាចយល់បាន។ តើតង្កៀប "ដើមកំណើត" និងសញ្ញាចំណុចក្បៀស? ប៉ុន្តែវាគឺជាការចាំបាច់ក្នុងការចុះចូលទៅក្នុងវាទាំងអស់បានក្លាយទៅជាច្រើនច្បាស់។ ចូរចាំថាទោះជាយ៉ាងណា, ថាការអភិវឌ្ឍរយៈពេលវែងរបស់កម្មវិធីដំណើរការជាមុននេះអាច "wean" អ្នកប្រើវាក្យសម្ព័ន្ធជា CSS បុរាណ។ ពេលខ្លះបណ្តាលឱ្យមានបញ្ហានេះនៅពេលដែលមានការធ្វើការជាមួយរចនាប័ទ្ម "បរិសុទ្ធ" ។

តើអ្វីទៅជាកម្មវិធីដំណើរការជាមុនជ្រើសរើស?

នៅក្នុងការពិត, វាគឺជា ... វាមិនមានបញ្ហា។ កំណែទាំងអស់ដែលបានផ្តល់ជូននូវលក្ខណៈពិសេសដូចគ្នាអំពីវាក្យសម្ព័ន្ធនៃការគ្នាគ្រាន់តែបានគឺខុសគ្នា។ យើងសូមផ្ដល់អនុសាសន៍ដើម្បីបន្តដូចខាងក្រោម:

• ប្រសិនបើអ្នក - អ្នកសរសេរកម្មវិធីហើយចង់ធ្វើការជាមួយរចនាប័ទ្មទាំងពីរនៅក្នុងកូដប្រើ sass នេះ;
• ប្រសិនបើអ្នក - coder មួយហើយចង់ធ្វើការជាមួយរចនាប័ទ្មដូចជាជាមួយនឹងប្លង់ធម្មតា, យកចិត្តទុកដាក់តិចជាងនេះ;
• ប្រសិនបើអ្នកចូលចិត្តតិចតួចបំផុត, ប្រើ Stylus នេះ។

សម្រាប់វ៉ារ្យ៉ង់ទាំងអស់នៃមួយចំនួនគ្មានទីបញ្ចប់នៃបណ្ណាល័យគួរឱ្យចាប់អារម្មណ៍ដែលថាសូម្បីតែបន្ថែមទៀតអាចងាយស្រួលក្នុងការអភិវឌ្ឍ។ អ្នកប្រើ sass បានផ្ដល់អនុសាសន៍ឱ្យយកចិត្តទុកដាក់ត្រីវិស័យនេះ - ជាឧបករណ៍ដែលមានអនុភាពជាមួយនឹងលក្ខណៈពិសេសកសាងឡើងនៅក្នុងជាច្រើន។ ឧទាហរណ៍បន្ទាប់ពីអ្នកដំឡើងវាអ្នកនឹងមិនមានការព្រួយបារម្ភអំពីបុព្វបទកំណែអ្នកលក់។ ធ្វើការជាមួយក្រឡាចត្រង្គសាមញ្ញ។ មានឧបករណ៍សម្រាប់ធ្វើការជាមួយផ្កា Sprite, មាន។ ជួរមួយដែលបានប្រកាស hagfish រួចទៅហើយ។ ផ្តល់ឱ្យឧបករណ៍នេះពីរថ្ងៃមួយ - ដូច្នេះអ្នកនឹងរក្សាទុកពេលវេលាច្រើននិងការខំប្រឹងប្រែងមួយក្នុងពេលអនាគត។