ខ្ញុំចូលចិត្តវាក្យសម្ព័ន្ធ SASS ច្រើនជាង SCSS សម្រាប់ភាពសង្ខេបរបស់វា។ ប៉ុន្តែការស្ទីលស្ទីលដ៏ធំសម្បើមនៅក្នុង SASS អាចលុបបំបាត់អត្ថប្រយោជន៍នៃភាពខ្លីរបស់វា។ ក្នុងករណីណាក៏ដោយ ភាពខុសគ្នារវាង SASS និង SCSS មិនមែនជាមូលដ្ឋានទេ។ LESS បានប្រែក្លាយថានៅជិត SCSS ជាង SASS ។ ហើយជាទូទៅវាគឺជារឿងដូចគ្នា។ មិនមានភាពខុសគ្នាច្រើនទេ ប៉ុន្តែពួកគេពីរបីនាក់ផ្លាស់ប្តូរតុល្យភាពនៃអំណាចជាមូលដ្ឋាន។

1. តិច - ភាគីអតិថិជនអាចប្រើ JS ។

ច្បាស់ជាងនេះទៅទៀត វាមិនមែនថាគាត់អាចធ្វើបានទេ គាត់ត្រូវបានរចនាឡើងសម្រាប់រឿងនេះ។ ការអនុវត្តទូទៅសម្រាប់ការប្រើប្រាស់កូដតិច៖

ពេលនោះហើយដែលសមត្ថភាពក្នុងការចងក្រងនៅលើម៉ាស៊ីនមេ (ទាំង js និង ruby) ត្រូវបានបន្ថែមទៅវា។

នៅ glance ដំបូងវាហាក់ដូចជាទ្រព្យសម្បត្តិចម្លែក។ ហេតុអ្វីបានជាចងក្រងនៅខាងអតិថិជន ប្រសិនបើអ្នកអាចចងក្រងយ៉ាងល្អឥតខ្ចោះនៅលើម៉ាស៊ីនមេ និងបម្រើ CSS ដែលបានបង្ហាប់រួចរាល់ ដូចដែលយើងធ្លាប់ប្រើជាមួយ SASS?

ហេតុផលកាន់តែច្បាស់បន្ទាប់ពីបានសិក្សាពីបន្ទាត់ចុងក្រោយដែលមិនរៀបរាប់លម្អិតនៃឯកសារ LESS៖

@height: `document.body.clientHeight`;

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

នោះគឺឥឡូវនេះយើងមានឱកាសដើម្បីផ្ទុក DOM ដំបូងហើយបន្ទាប់មកបង្កើតវាសម្រាប់វា។ CSS ផ្ទាល់ខ្លួននៅខាងអតិថិជន។ បន្ទាប់មកគិតដោយខ្លួនឯងថាតើវាបើកឱកាសអ្វីខ្លះ។

ថាតើគម្រោងរបស់អ្នកត្រូវការ នេះគឺជាសំណួរផ្សេង។ វាច្បាស់ណាស់ថាអ្នកគ្រប់គ្នាទម្លាប់នឹងភាពមិនប្រាកដប្រជា/ឯករាជ្យរបស់អតិថិជន និងប្លង់នៅក្នុងរចនាប័ទ្មនៃ "យើងធ្វើវាជាសកល ដូច្នេះវានឹងត្រូវបានបង្ហាញដល់មនុស្សគ្រប់គ្នានៅគ្រប់ដំណោះស្រាយទាំងអស់"។ ប៉ុន្តែនេះមិនមែនជាហេតុផលដើម្បីបំភ្លេចថាឥឡូវនេះឱកាសបែបនេះមានហើយជាមួយវាអ្នកអាចធ្វើបានឧទាហរណ៍ប្លង់ដែលអាចបត់បែនបាន។

2. តិច មិនដូច SASS/SCSS មិនមានតក្កវិជ្ជាទេ។

មិនមាន if/ then, for, etc. in LESS ទេ។ ទោះបីជាដោយពិចារណាថា JS ត្រូវបានបង្កើតឡើងយ៉ាងងាយស្រួលនៅក្នុងវាក៏ដោយ ខ្ញុំគិតថាវាពិតជាអាចទៅរួចក្នុងការដាក់បញ្ចូលក្នុងតក្កវិជ្ជា។ ខ្ញុំមិនទាន់បានសាកល្បងទេ។

3. ការលាយគឺកាន់តែងាយស្រួលនៅក្នុង LESS + អ្នកអាចលាយថ្នាក់បាន។

ខ្ញុំពិតជាចូលចិត្តការពិតដែលថានៅក្នុង LESS អ្នកអាចបញ្ចូលលក្ខណៈសម្បត្តិនៃថ្នាក់ផ្សេងទៀតនៅក្នុងនិយមន័យ។ ថ្នាក់ខ្លួនឯងគឺជា mixin ។ នេះគឺជាលក្ខណៈពិសេសមួយទៀតដែល SASS/SCSS មិនមាន។ អ្នកអាចបញ្ចូលឯកសារ CSS ធម្មតានៅក្នុង LESS ហើយប្រើថ្នាក់របស់វាដើម្បីកំណត់លក្ខណៈសម្បត្តិរបស់អ្នក។ ឧទាហរណ៍៖

រុំ (
text-wrap: រុំ;
ចន្លោះពណ៌ស៖ រុំមុន;
ចន្លោះពណ៌ស៖ -moz-pre-wrap;
word-wrap: break-word;
}
មុន (.រុំ)

បន្ត

លើកលែងតែចំណុចទី 1 ភាពខុសគ្នាគឺមិនអស្ចារ្យទេហើយជម្រើសគឺធំជាងសម្រាប់អ្នកស្ម័គ្រចិត្ត។

សម្រាប់ខ្ញុំផ្ទាល់ LESS មើលទៅគួរឱ្យទាក់ទាញជាងមុន ដោយសារតែភាពសាមញ្ញរបស់វា។ ខ្ញុំមិនដែលត្រូវការវដ្ត និងលក្ខខណ្ឌក្នុងរចនាប័ទ្មពីមុនមកទេ។ ឧបករណ៍ប្រើប្រាស់បុរាណដូចជា "ប្រអប់ស្រមោល ជម្រាលលីនេអ៊ែរ ធ្វើឱ្យងងឹត" មាននៅក្នុង LESS ។

បាទ បណ្ណាល័យដែលត្រៀមរួចជាស្រេចជាច្រើនត្រូវបានសរសេររួចហើយសម្រាប់ SASS (

ពីអ្នកនិពន្ធ៖ ជាដំបូង អ្វីទៅជា preprocessor ? សរុបមក កម្មវិធីដំណើរការមុនគឺជាកម្មវិធីដែលកែប្រែទិន្នន័យឱ្យសមស្របទៅនឹងតម្រូវការបញ្ចូលនៃកម្មវិធីផ្សេងទៀត។ CSS preprocessors គឺជាភាសាស្គ្រីបដែលពង្រីកសមត្ថភាពរបស់ CSS ធម្មតាជាមួយនឹងអថេរ ច្បាប់ nesting មុខងារ និងប្លុកឡូជីខល។

ហេតុអ្វីខ្ញុំគួរប្រើវា?

ជារឿយៗអ្នកនឹងឃើញខ្លួនអ្នកនៅក្នុងស្ថានភាពមួយដែលអ្នកត្រូវប្រើ តម្លៃដូចគ្នា។សម្រាប់ទ្រព្យសម្បត្តិជាក់លាក់មួយនៅក្នុង កន្លែងផ្សេងគ្នា. ជាឧទាហរណ៍ ដំបូងអ្នកបានបញ្ជាក់ពណ៌ក្រហមជាពណ៌ចម្បងនៃគេហទំព័រ។ បន្ទាប់មកអ្នកត្រូវប្តូរវាទៅជាពណ៌បៃតង។

ជាមួយនឹងអថេរ អ្នកមិនចាំបាច់ស្វែងរក និងជំនួសរាល់ការលើកឡើងអំពីពណ៌ក្រហមនៅក្នុងរចនាប័ទ្មនោះទេ។ អ្នកកំណត់តម្លៃនៃអថេរម្តង ឧទាហរណ៍ "ពណ៌ចម្បង" ហើយបន្ទាប់មកប្រើអថេរនោះជាតម្លៃ។

តម្លៃពណ៌ចម្បងផ្លាស់ប្តូរនៅកន្លែងតែមួយ។ អ្នកក៏អាចនាំចូលឯកសារ CSS ពីប្រភពផ្សេងទៀតដោយមិនចាំបាច់ព្រួយបារម្ភអំពីចំនួនសំណើបណ្តាញ ព្រោះពួកវាទាំងអស់អាចត្រូវបានបញ្ចូលគ្នាជាឯកសារតែមួយមុនពេលចងក្រង។

សូមអរគុណចំពោះលក្ខណៈដែលបានភ្ជាប់មកជាមួយនៃ CSS preprocessors អ្នកនឹងទទួលបានកូដបង្រួមជាមួយនឹងលទ្ធផលដូចគ្នា។ LESS និង SCSS គឺផ្អែកលើគោលការណ៍ DRY ដែលតំណាងឱ្យ "កុំធ្វើម្តងទៀតដោយខ្លួនឯង" ឬ "កុំធ្វើម្តងទៀតដោយខ្លួនឯង" ។

ឧបករណ៍ដំណើរការមុន។ ការចាប់ផ្តើមរហ័ស

តើ LESS មានបញ្ហាអ្វី?

បណ្តាញនេះពោរពេញដោយការពិភាក្សាអំពីអ្វីដែលល្អជាង៖ LESS ឬ SCSS ។ ដូច្នេះ ខ្ញុំ​នឹង​មិន​លើក​យក​ប្រធានបទ​ទាំង​ពីរ​នេះ​ឲ្យ​បាន​លម្អិត​ទេ។ ផ្ទុយទៅវិញ ខ្ញុំនឹងនិយាយអំពីបញ្ហាតូចៗដែលខ្ញុំមានជាមួយ LESS។

SCSS ប្រើនិមិត្តសញ្ញា $ ដើម្បីកំណត់អថេរ ខណៈពេលដែល LESS ប្រើនិមិត្តសញ្ញា @ ។ ដោយសារ CSS ក៏ប្រើនិមិត្តសញ្ញា @ សម្រាប់សំណួរប្រព័ន្ធផ្សព្វផ្សាយ ការនាំចូល និងចលនាស៊ុមគន្លឹះ នេះអាចជាការយល់ច្រឡំសម្រាប់អ្នកអភិវឌ្ឍន៍។

និមិត្តសញ្ញា $ មិនត្រូវបានប្រើនៅក្នុង CSS ទេ។ និមិត្តសញ្ញា @ មានវត្តមាននៅក្នុង SCSS ប៉ុន្តែវាត្រូវបានប្រើសម្រាប់ការណែនាំ @if , @else , @each , @for និង @while ។

ខណៈ​ដែល​សេណារីយ៉ូ​នេះ​មិន​ប្រាកដ​ប្រជា​សម្រាប់​អ្នក​រាល់​គ្នា វា​ជា​ការ​ប្រសើរ​ក្នុង​ការ​ប្រើ​លេខ​សម្គាល់​ផ្សេងៗ​ដើម្បី​បំបែក​ធាតុ។

SCSS គាំទ្រប្រពៃណី កន្សោមឡូជីខលដូចជា if/else ប្លុក និងរង្វិលជុំ។ ល្បាយដែលមានការការពារនៅក្នុង LESS គឺងាយស្រួលជាងនៅលើភ្នែក ប៉ុន្តែពិបាកយល់។

អាចធ្វើបានដោយប្រើ LESS...

... ឬគ្រាន់តែប្រើ SCSS ។

LESS កំណត់តែ mixin ការពារមួយប៉ុណ្ណោះ។ ដូច្នេះ អ្នកមិនអាចឆ្លងកាត់អាគុយម៉ង់ទីពីរ ហើយដំណើរការវានៅក្នុង mixin ដូចគ្នា ដោយចម្លងកូដសម្រាប់ទាំងអស់គ្នា។ សេណារីយ៉ូដែលអាចកើតមាន. តាមពិត LESS (តិច) គឺច្រើន (ចេតនា)។

ខ្ញុំដឹងថាវាអាចទៅរួចក្នុងការបង្រួមកូដដោយប្រើតម្លៃបន្ថែមជាឈ្មោះអចលនទ្រព្យសម្រាប់ករណីនេះ ប៉ុន្តែបញ្ហាគឺថាខ្ញុំមិនអាចកំណត់លក្ខខណ្ឌពីរផ្នែកផ្សេងគ្នានៃ mixin ដូចគ្នាទៅជា LESS បានទេ។

ឈឺក្បាលទៀតហើយជាមួយកូដនេះ...

ឧបករណ៍ដំណើរការមុន។ ការចាប់ផ្តើមរហ័ស

រៀនមូលដ្ឋានគ្រឹះនៃការធ្វើការជាមួយ ឧបករណ៍ដំណើរការមុនតិចជាងនិង Sass ជាមួយ សូន្យពេញលេញក្នុងរយៈពេលតិចជាង 2 សប្តាហ៍

... ជាងនេះទៅទៀត។

ដើម្បីសម្រេចបានលទ្ធផលដូចគ្នាជាមួយ LESS ខ្ញុំត្រូវកំណត់អ្វីគ្រប់យ៉ាងជាមុន សរសេរ mixin ទទួលបានទីតាំងលិបិក្រម ធ្វើម្តងទៀតជាមួយតក្កវិជ្ជារបស់ខ្ញុំរហូតដល់តម្លៃលិបិក្រមគឺ ស្មើនឹងសូន្យហើយហៅទៅ mixin ដោយដៃ។

ខណៈដែលនេះជាគំនិតផ្ទាល់ខ្លួនរបស់ខ្ញុំ ខ្ញុំគិតថា SCSS ជាទូទៅគ្រប់គ្រងតម្លៃគណនា និងតម្លៃគណិតវិទ្យាបានប្រសើរជាង។

តើមានអ្វីខុសជាមួយនេះ?

ម៉្យាងវិញទៀត LESS គឺស្មុគស្មាញជាង។ ឧទាហរណ៍ នៅពេលខ្ញុំប្រើវា ខ្ញុំមិនព្យាយាមធ្វើការគណនាទេ។ ប៉ុន្តែទោះបីជាខ្ញុំបានធ្វើក៏ដោយ តើនៅពេលណាដែល 100% ដក 50px ស្មើនឹង 50%?

តិច ហេតុអ្វីបានជាអ្នកមិនអើពើតម្លៃជាមួយនឹងឯកតាផ្លាស់ប្តូរ?

ហេតុអ្វីបានជាអ្នកធ្វើឱ្យខ្ញុំរៀនឈើច្រត់របស់អ្នក នៅពេលដែលខ្ញុំស្គាល់ CSS រួចហើយ?

ហើយរឿងចុងក្រោយមួយ។ សូមអរគុណដល់គម្រោង LibSass SCSS មានកម្មវិធីរុំជាច្រើនសម្រាប់ភាសាផ្សេងទៀតដូចជា C, Go, PHP, Python, Dart ជាដើម។

ហេតុអ្វីបានជាយើងសម្រេចចិត្តបោះបង់ចោល LESS ដើម្បីគាំទ្រ SCSS?

ខណៈពេលដែលយើងកំពុងបង្កើតកាត JotForm យើងត្រូវដំណើរការតម្លៃអថេរជាមុន - ការចងក្រងជាមុន និងឃ្លាំងសម្ងាត់ផ្នែកខាងម៉ាស៊ីនមេក្នុងពេលតែមួយ។ ហើយទាំងអស់នេះត្រូវធ្វើយ៉ាងល្អឥតខ្ចោះ។

យើងចង់ឱ្យអ្នកប្រើប្រាស់អាចប្ដូរតាមបំណងបាន។ រូបរាងទម្រង់ ដូច្នេះការផ្លាស់ប្តូរណាមួយត្រូវបានបង្ហាញភ្លាមៗ និងក្នុងពេលដំណាលគ្នា និងដាក់ក្នុងឃ្លាំងសម្ងាត់នៅលើម៉ាស៊ីនមេ។ សម្រាប់ជាប្រយោជន៍ដល់អ្នកប្រើប្រាស់របស់យើង យើងមិនចង់ដំណើរការសែលម៉ាស៊ីនភ្ញៀវតិចទេ ព្រោះវានឹងទាមទារ ថាមពលកុំព្យូទ័រអតិថិជន - ហើយអ្វីៗជាច្រើនអាចខុស។

យើងមិនបានចាប់ផ្តើមវដ្តនៃការអភិវឌ្ឍន៍ដោយមានគោលដៅផ្លាស់ប្តូរពី LESS ទៅ SCSS ទេ។ ប៉ុន្តែពាក់កណ្តាលនៃការដោះស្រាយបញ្ហាតូចតាចទាំងនេះ កង្វះក្រដាសរុំសមរម្យសម្រាប់ LESS គឺជាចំបើងចុងក្រោយ។

ទោះជាយ៉ាងណាក៏ដោយ ភាពខុសគ្នារវាង LESS និង SCSS គឺមិនសូវសំខាន់ជាងអ្វីដែលពួកគេមានដូចគ្នានោះទេ។ នៅទីបញ្ចប់ វាមិនសំខាន់ទេដែលអ្នកប្រើ preprocessor ដរាបណាអ្នកប្រើវា។

ព្យាយាមគ្រប់គ្រងគម្រោងដ៏ធំជាមួយនឹងឯកសារ CSS តែមួយ និងបែបប្រពៃណី រចនាសម្ព័ន្ធ CSSពិបាកជាងការប្រើ preprocessor ដែលមានបញ្ហាមួយចំនួន។

ខ្ញុំចូលចិត្តវាក្យសម្ព័ន្ធ SASS ច្រើនជាង SCSS សម្រាប់ភាពសង្ខេបរបស់វា។ ប៉ុន្តែការស្ទីលស្ទីលដ៏ធំសម្បើមនៅក្នុង SASS អាចលុបបំបាត់អត្ថប្រយោជន៍នៃភាពខ្លីរបស់វា។ ក្នុងករណីណាក៏ដោយ ភាពខុសគ្នារវាង SASS និង SCSS មិនមែនជាមូលដ្ឋានទេ។ LESS បានប្រែក្លាយថានៅជិត SCSS ជាង SASS ។ ហើយជាទូទៅវាគឺជារឿងដូចគ្នា។ មិនមានភាពខុសគ្នាច្រើនទេ ប៉ុន្តែពួកគេពីរបីនាក់ផ្លាស់ប្តូរតុល្យភាពនៃអំណាចជាមូលដ្ឋាន។

1. តិច - ភាគីអតិថិជនអាចប្រើ JS ។

ច្បាស់ជាងនេះទៅទៀត វាមិនមែនថាគាត់អាចធ្វើបានទេ គាត់ត្រូវបានរចនាឡើងសម្រាប់រឿងនេះ។ ការអនុវត្តទូទៅសម្រាប់ការប្រើប្រាស់កូដតិច៖

ពេលនោះហើយដែលសមត្ថភាពក្នុងការចងក្រងនៅលើម៉ាស៊ីនមេ (ទាំង js និង ruby) ត្រូវបានបន្ថែមទៅវា។

នៅ glance ដំបូងវាហាក់ដូចជាទ្រព្យសម្បត្តិចម្លែក។ ហេតុអ្វីបានជាចងក្រងនៅខាងអតិថិជន ប្រសិនបើអ្នកអាចចងក្រងយ៉ាងល្អឥតខ្ចោះនៅលើម៉ាស៊ីនមេ និងបម្រើ CSS ដែលបានបង្ហាប់រួចរាល់ ដូចដែលយើងធ្លាប់ប្រើជាមួយ SASS?

ហេតុផលកាន់តែច្បាស់បន្ទាប់ពីបានសិក្សាពីបន្ទាត់ចុងក្រោយដែលមិនរៀបរាប់លម្អិតនៃឯកសារ LESS៖

@height: `document.body.clientHeight`;

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

នោះគឺឥឡូវនេះយើងមានឱកាសដើម្បីផ្ទុក DOM ដំបូងហើយបន្ទាប់មកបង្កើត CSS ពិសេសសម្រាប់វាដោយផ្ទាល់នៅលើផ្នែកអតិថិជន។ បន្ទាប់មកគិតដោយខ្លួនឯងថាតើវាបើកឱកាសអ្វីខ្លះ។

ថាតើគម្រោងរបស់អ្នកត្រូវការ នេះគឺជាសំណួរផ្សេង។ វាច្បាស់ណាស់ថាអ្នកគ្រប់គ្នាទម្លាប់នឹងភាពមិនប្រាកដប្រជា/ឯករាជ្យរបស់អតិថិជន និងប្លង់នៅក្នុងរចនាប័ទ្មនៃ "យើងធ្វើវាជាសកល ដូច្នេះវានឹងត្រូវបានបង្ហាញដល់មនុស្សគ្រប់គ្នានៅគ្រប់ដំណោះស្រាយទាំងអស់"។ ប៉ុន្តែនេះមិនមែនជាហេតុផលដើម្បីបំភ្លេចថាឥឡូវនេះឱកាសបែបនេះមានហើយជាមួយវាអ្នកអាចធ្វើបានឧទាហរណ៍ប្លង់ដែលអាចបត់បែនបាន។

2. តិច មិនដូច SASS/SCSS មិនមានតក្កវិជ្ជាទេ។

មិនមាន if/ then, for, etc. in LESS ទេ។ ទោះបីជាដោយពិចារណាថា JS ត្រូវបានបង្កើតឡើងយ៉ាងងាយស្រួលនៅក្នុងវាក៏ដោយ ខ្ញុំគិតថាវាពិតជាអាចទៅរួចក្នុងការដាក់បញ្ចូលក្នុងតក្កវិជ្ជា។ ខ្ញុំមិនទាន់បានសាកល្បងទេ។

3. ការលាយគឺកាន់តែងាយស្រួលនៅក្នុង LESS + អ្នកអាចលាយថ្នាក់បាន។

ខ្ញុំពិតជាចូលចិត្តការពិតដែលថានៅក្នុង LESS អ្នកអាចបញ្ចូលលក្ខណៈសម្បត្តិនៃថ្នាក់ផ្សេងទៀតនៅក្នុងនិយមន័យ។ ថ្នាក់ខ្លួនឯងគឺជា mixin ។ នេះគឺជាលក្ខណៈពិសេសមួយទៀតដែល SASS/SCSS មិនមាន។ អ្នកអាចបញ្ចូលឯកសារ CSS ធម្មតានៅក្នុង LESS ហើយប្រើថ្នាក់របស់វាដើម្បីកំណត់លក្ខណៈសម្បត្តិរបស់អ្នក។ ឧទាហរណ៍៖

រុំ (
text-wrap: រុំ;
ចន្លោះពណ៌ស៖ រុំមុន;
ចន្លោះពណ៌ស៖ -moz-pre-wrap;
word-wrap: break-word;
}
មុន (.រុំ)

បន្ត

លើកលែងតែចំណុចទី 1 ភាពខុសគ្នាគឺមិនអស្ចារ្យទេហើយជម្រើសគឺធំជាងសម្រាប់អ្នកស្ម័គ្រចិត្ត។

សម្រាប់ខ្ញុំផ្ទាល់ LESS មើលទៅគួរឱ្យទាក់ទាញជាងមុន ដោយសារតែភាពសាមញ្ញរបស់វា។ ខ្ញុំមិនដែលត្រូវការវដ្ត និងលក្ខខណ្ឌក្នុងរចនាប័ទ្មពីមុនមកទេ។ ឧបករណ៍ប្រើប្រាស់បុរាណដូចជា "ប្រអប់ស្រមោល ជម្រាលលីនេអ៊ែរ ធ្វើឱ្យងងឹត" មាននៅក្នុង LESS ។

បាទ បណ្ណាល័យដែលត្រៀមរួចជាស្រេចជាច្រើនត្រូវបានសរសេររួចហើយសម្រាប់ SASS (

ខ្ញុំបានសរសេរយ៉ាងច្រើន ថ្មីៗនេះអំពី Sass ប៉ុន្តែពីមតិយោបល់ថ្មីៗមួយចំនួនខ្ញុំបានដឹងថាមិនមែនគ្រប់គ្នាសុទ្ធតែមានគំនិតច្បាស់លាស់អំពីអ្វីដែល Sass នោះទេ។ សូមអោយកាន់តែច្បាស់បន្តិច៖

នៅពេលយើងនិយាយអំពី Sass យើងជាធម្មតាមានន័យថា preprocessor និងភាសាទាំងមូល។ យើងនិយាយឧទាហរណ៍ "យើងប្រើ Sass" ឬ "នេះគឺជា Sass mixin" ។

ទន្ទឹមនឹងនេះ Sass (ឧបករណ៍ដំណើរការមុន) អនុញ្ញាតឱ្យវាក្យសម្ព័ន្ធពីរផ្សេងគ្នា:

• Sass, ត្រូវបានគេស្គាល់ផងដែរថាជាវាក្យសម្ព័ន្ធចូលបន្ទាត់;
• វាក្យសម្ព័ន្ធដូច SCSS ។

រឿង

ដើមឡើយ Sass គឺជាផ្នែកមួយនៃឧបករណ៍ដំណើរការមុនមួយផ្សេងទៀតគឺ Haml ដែលត្រូវបានបង្កើត និងសរសេរដោយអ្នកអភិវឌ្ឍន៍ Ruby ។

ដូច្នេះរចនាប័ទ្ម Sass បានប្រើវាក្យសម្ព័ន្ធដូច Ruby គ្មានវង់ក្រចក គ្មានសញ្ញាក្បៀស និងគ្មានការចូលបន្ទាត់តឹងរ៉ឹងដូចនេះ៖

// អថេរ!primary-color= hotpink // Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary-color width= 100% overflow=លាក់ .my-other-element +border-radius(5px)

ដូចដែលអ្នកអាចឃើញបើប្រៀបធៀបទៅនឹង CSS ធម្មតា ភាពខុសគ្នាគឺគួរឱ្យកត់សម្គាល់! ទោះបីជាអ្នកជាអ្នកប្រើប្រាស់ Sass (preprocessor) អ្នកអាចមើលឃើញថាវាខុសពីអ្វីដែលយើងធ្លាប់ប្រើ។

អថេរ​ត្រូវ​បាន​តំណាង​ដោយ ! មិនមែន $ , value assignment symbol = , not : . ពិតជាមិនធម្មតា។

ប៉ុន្តែនេះជារបៀបដែល Sass មើលទៅមុនកំណែ 3.0 ដែលបានចេញផ្សាយនៅក្នុងខែឧសភា ឆ្នាំ 2010 ដែលបានណែនាំទាំងស្រុង វាក្យសម្ព័ន្ធថ្មី។ហៅថា SCSS ឬ Sassy CSS ។

គោលដៅរបស់គាត់គឺនាំយកវាក្យសម្ព័ន្ធ Sass ឱ្យកាន់តែជិតទៅនឹង CSS ដែលធ្វើឱ្យវាកាន់តែស៊ីគ្នាជាមួយ CSS៖

// អថេរ $primary-color: hotpink; // Mixin @mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) .my-element ( color: $primary -color; ទទឹង៖ 100% លើស៖ លាក់ .my-other-element ( @include border-radius(5px); )

SCSS គឺពិតជានៅជិត CSS ជាង Sass ។ អ្នកអភិវឌ្ឍន៍ Sass បានខិតខំប្រឹងប្រែងដើម្បីធ្វើឱ្យវាក្យសម្ព័ន្ធទាំងពីរកាន់តែខិតជិតគ្នាទៅវិញទៅមកដោយជំនួស !

(សញ្ញាអថេរ) និង = (សញ្ញាកិច្ចការ) លើ $ និង៖ ពី CSS ។

ដូច្នេះនៅពេលចាប់ផ្តើមគម្រោងថ្មី អ្នកប្រហែលជាឆ្ងល់ថាតើវាក្យសម្ព័ន្ធណាដែលត្រូវប្រើ។ ខ្ញុំសូមលើកយកប្រធានបទនេះ ហើយពន្យល់ពីគុណសម្បត្តិ និងគុណវិបត្តិនៃវាក្យសម្ព័ន្ធនីមួយៗ។

ទោះបីជាវាក្យសម្ព័ន្ធនេះហាក់ដូចជាចម្លែកបន្តិចសម្រាប់អ្នកក៏ដោយ វាមានច្រើន។ គ្រាគួរឱ្យចាប់អារម្មណ៍. ជាដំបូងវាខ្លីជាង និងងាយស្រួលក្នុងការវាយ។ មិនមានវង់ក្រចក ឬសញ្ញាក្បៀសទេ វាមិនចាំបាច់ទេ។

រឹតតែល្អ! វាមិនត្រូវការ @mixin ឬ @include នៅពេលដែលវាគ្រប់គ្រាន់ និមិត្តសញ្ញាសាមញ្ញ: = និង + ។

ដូចគ្នានេះផងដែរ វាក្យសម្ព័ន្ធ Sass ផ្តល់នូវស្តង់ដារកូដស្អាត ដោយសារការប្រើប្រាស់ការចូលបន្ទាត់។ ដោយសារការចូលបន្ទាត់មិនត្រឹមត្រូវអាចបំបែកសន្លឹករចនាប័ទ្ម .sass ទាំងមូល ជំហានដំបូងនៅទីនេះគឺត្រូវធានាថាលេខកូដស្អាត និងមានទម្រង់ត្រឹមត្រូវ។

មានវិធីតែមួយគត់ដើម្បីសរសេរកូដ Sass: សរសេរវាឱ្យបានត្រឹមត្រូវ។

តែប្រយ័ត្ន! ការចូលបន្ទាត់មានតម្លៃប៊ូលីននៅក្នុង Sass ។ នៅពេលដែលការចូលបន្ទាត់ប្លុករបស់ឧបករណ៍ជ្រើសរើសត្រូវបានអនុវត្ត វាមានន័យថាវាជាឧបករណ៍ជ្រើសរើសដែលបានដាក់។

ឧទាហរណ៍៖

Element-a color: hotpink .element-b float: left ... outputs the following code CSS: .element-a ( color: hotpink; ) .element-a .element-b ( float: left; )

ការពិតសាមញ្ញនៃការផ្លាស់ប្តូរ .element-b មួយកម្រិតទៅខាងស្តាំមានន័យថាវាគឺជា ធាតុរបស់កុមារពី .element-a ដែលផ្លាស់ប្តូរកូដ CSS លទ្ធផល។ ដូច្នេះសូមប្រយ័ត្នជាមួយការចូលបន្ទាត់!

ក្នុងនាមជាអ្នកខាងក្រៅ ខ្ញុំគិតថាវាក្យសម្ព័ន្ធដែលមានមូលដ្ឋានលើការចូលបន្ទាត់ប្រហែលជានឹងអំពាវនាវបន្ថែមទៀតដល់ក្រុមដែលធ្វើការជាចម្បងជាមួយ Ruby/Python ជាជាងក្រុមអ្នកសរសេរកម្មវិធី PHP/Java (មិនប្រាកដទេ ខ្ញុំចង់ស្តាប់ផ្ទុយពីនេះ)។

គុណសម្បត្តិនៃវាក្យសម្ព័ន្ធ SCSS

សម្រាប់អ្នកចាប់ផ្តើមដំបូង វាគឺជា CSS ដែលឆបគ្នាយ៉ាងពេញលេញ។ នេះមានន័យថាអ្នកអាចប្តូរឈ្មោះបាន។ ឯកសារ CSSនៅក្នុង .scss ហើយវានឹងដំណើរការដូចជាគ្មានអ្វីកើតឡើង។

ការធ្វើឱ្យ SCSS ឆបគ្នាយ៉ាងពេញលេញជាមួយ CSS តែងតែជាអាទិភាពសម្រាប់ការគាំទ្រ Sass ចាប់តាំងពីការចេញផ្សាយ SCSS ហើយតាមគំនិតរបស់ខ្ញុំ នេះគឺជាចំណុចខ្លាំង។

ពួកគេក៏ព្យាយាមតាមដានផងដែរនូវអ្វីដែលអាចក្លាយជាវាក្យសម្ព័ន្ធ CSS ដែលមានសុពលភាពនៅពេលអនាគត ហើយអនុវត្តវា (ហេតុនេះ @directives )។

ដោយសារ SCSS គឺត្រូវគ្នាជាមួយ CSS វាទាមទារស្ទើរតែគ្មានការបណ្តុះបណ្តាលបន្ថែម។ វាក្យសម្ព័ន្ធគឺដូចគ្នាបេះបិទ៖ បន្ទាប់ពីទាំងអស់ វាគ្រាន់តែជា CSS ជាមួយនឹងការបន្ថែមមួយចំនួន។

នេះមានសារៈសំខាន់សម្រាប់អ្នកអភិវឌ្ឍន៍ថ្មី ដូច្នេះពួកគេអាចចាប់ផ្តើមសរសេរកូដបានយ៉ាងឆាប់រហ័សដោយមិនចាំបាច់ដឹងច្រើនអំពី Sass ។

វា​ក៏​អាច​អាន​បាន​ច្រើន​ជាង​នេះ​ដែរ ដោយសារ​ការ​ស្ថាបនា​ជាក់លាក់​មាន​អត្ថន័យ​រួច​ហើយ។ នៅពេលអ្នកឃើញ @mixin អ្នកដឹងថាវាជាការប្រកាស mixin ។ នៅពេលអ្នកឃើញ @include អ្នកដឹងថាវាជាការហៅ mixin ។

គ្មាន​ខ្សែ​ភ្ជាប់​ទេ ហើយ​អ្វី​គ្រប់​យ៉ាង​មាន​ន័យ​ដោយ​គ្មាន​ការ​បកស្រាយ។

ដូចគ្នានេះផងដែរស្ទើរតែទាំងអស់ឧបករណ៍ដែលមានស្រាប់ កម្មវិធីជំនួយ និងការបង្ហាញសម្រាប់ Sass ត្រូវបានបង្កើតឡើងដោយប្រើវាក្យសម្ព័ន្ធ SCSS ។ វាក្យសម្ពន្ធនេះកាន់តែមានទិសដៅឆ្ពោះទៅរកអ្នកជំនាញ ហើយត្រូវបានជ្រើសរើសដោយពួកគេតាមលំនាំដើម (ប្រសិនបើវាមិនមែនតែមួយគត់ដែលអាចធ្វើទៅបាន)។

ភាគច្រើន​ដោយសារ​ហេតុផល​ដូច​រៀបរាប់​ខាងលើ​។ ជាឧទាហរណ៍ វាកាន់តែពិបាកស្វែងរកការបន្លិចសម្រាប់វាក្យសម្ព័ន្ធដែលចូលបន្ទាត់សុទ្ធរបស់ Sass ។ ជាទូទៅមានតែជម្រើស SCSS backlighting ប៉ុណ្ណោះដែលអាចប្រើបាន។

សេចក្តីសន្និដ្ឋាន

ជម្រើស​គឺ​ជា​របស់​អ្នក​យ៉ាង​ណា​ក៏​ដោយ ប៉ុន្តែ​ប្រសិន​បើ​អ្នក​មាន​ហេតុផល​គួរ​ឱ្យ​ចាប់​អារម្មណ៍​ក្នុង​ការ​ប្រើ​វាក្យសម្ព័ន្ធ​ចូល​បន្ទាត់ ខ្ញុំ​សូម​ណែនាំ​ឱ្យ​ប្រើ SCSS លើ Sass ។ វាមិនត្រឹមតែងាយស្រួលប៉ុណ្ណោះទេ ថែមទាំងងាយស្រួលទៀតផង។

ខ្ញុំបានសាកល្បងវាក្យសម្ព័ន្ធការចូលបន្ទាត់ម្តង ហើយចូលចិត្តវា។ ជាពិសេសភាពសាមញ្ញនិងភាពសាមញ្ញរបស់វា។ ខ្ញុំហៀបនឹងផ្លាស់ទីលេខកូដការងារទាំងអស់របស់ខ្ញុំទៅ Sass ប៉ុន្តែនៅនាទីចុងក្រោយខ្ញុំបានប្តូរចិត្ត។

ខ្ញុំ​រីករាយ​ដែល​ខ្ញុំ​មិន​បាន​អនុវត្ត​ជំហាន​នេះ​ទេ ព្រោះ​ឥឡូវ​នេះ​ខ្ញុំ​នឹង​មាន​ការ​លំបាក​ខ្លាំង​ក្នុង​ការ​ធ្វើ​ការ​ជាមួយ​ឧបករណ៍​មួយ​ចំនួន ប្រសិនបើ​ខ្ញុំ​ប្រើ​វាក្យសម្ព័ន្ធ​ចូល​បន្ទាត់។

សូមចំណាំផងដែរថា Sass មិនដែលសំដៅទៅដោយអក្សរកាត់អក្សរកាត់ទាំងអស់នោះទេ ទោះបីជាវាជាវាក្យសម្ព័ន្ធ ឬភាសាសរសេរកម្មវិធីក៏ដោយ។ ខណៈពេលដែល SCSS តែងតែត្រូវបានតំណាង ជាអក្សរធំ. ចង់ដឹងថាហេតុអ្វី? ពិនិត្យមើល SassnotSASS.com!

ការបកប្រែអត្ថបទ "តើអ្វីជាភាពខុសគ្នារវាង Sass និង SCSS" ត្រូវបានរៀបចំដោយក្រុមគម្រោងមិត្តភាព

រហូតដល់ខ្ញុំមានស្ថានភាពគួរឱ្យចាប់អារម្មណ៍មួយកាលពីពីរបីខែមុន។ CSS មិនដែលមានបញ្ហាសម្រាប់ខ្ញុំទេ (ទោះបីជាមិនមានអ្វីស្មុគស្មាញអំពីវា) ប៉ុន្តែខ្ញុំត្រូវបានបំផុសគំនិតដោយគំនិតនៃការប្រើប្រាស់អថេរដើម្បីបង្កើតអ្វីមួយដូចជាបន្ទាត់ជ្រើសរើសពណ៌សម្រាប់គំរូ និងគេហទំព័រ។ ក្ដារលាយ​ដែល​មាន​ជម្រើស​ចំនួន​ថេរ​ជួយ​ការពារ​ពណ៌​ពី​ការ​លាយ​បញ្ចូល​គ្នា​និង​លេច​ចេញ​ពី​រចនាប័ទ្ម​ដែល​បាន​ជ្រើសរើស។

តើអ្នកដឹងថាអ្វីត្រូវប្រើ LESS សម្រាប់អ្វី និង Sass សម្រាប់អ្វី? ជាគោលការណ៍ពួកគេគឺស្រដៀងនឹងគ្នាទៅវិញទៅមក។ សូមក្រឡេកមើលពួកគេ។ លក្ខណៈទូទៅ:

* Mixins - ថ្នាក់សម្រាប់ថ្នាក់។
* Parametric mixins - ថ្នាក់ដែលអ្នកអាចអនុវត្តប៉ារ៉ាម៉ែត្រប្រភេទមុខងារ។
* Nested Rules - ថ្នាក់នៅក្នុងថ្នាក់ដែលកាត់ផ្តាច់កូដដដែលៗ។
* ប្រតិបត្តិការ - គណិតវិទ្យានៅក្នុង CSS ។
* មុខងារពណ៌ - កែសម្រួលពណ៌។
* Namespaces - ក្រុមនៃរចនាប័ទ្មដែលអាចហៅតាមតំណ។
* វិសាលភាព - ការងារ ការផ្លាស់ប្តូរក្នុងស្រុកនៅក្នុងរចនាប័ទ្ម។
* ការវាយតម្លៃ javascript – កន្សោម javascript ដែលបានកំណត់ក្នុង CSS ។

ភាពខុសគ្នាសំខាន់រវាង LESS និង Sass គឺជាវិធីដែលពួកគេត្រូវបានផលិត។ តិចចូល បណ្ណាល័យ javascriptហើយតាមនោះ អនុវត្តការងារនៅខាងអតិថិជន។

Sass បើក Ruby ហើយរត់ ផ្នែកខាងម៉ាស៊ីនមេ. អ្នកអភិវឌ្ឍន៍ជាច្រើនមិនប្រើ LESS ទេ ដោយសារម៉ាស៊ីន javascript ចំណាយពេលយូរដើម្បីដំណើរការកូដ ដែលបណ្តាលឱ្យមានការកែប្រែ CSS សម្រាប់កម្មវិធីរុករក។ មានវិធីជាច្រើននៃប្រតិបត្តិការ។ ខ្ញុំប្រើវានៅពេលដែល LESS ត្រូវបានប្រើតែក្នុងអំឡុងពេលដំណើរការអភិវឌ្ឍន៍ប៉ុណ្ណោះ។ នៅពេលខ្ញុំរួចរាល់ ខ្ញុំចម្លង និងបិទភ្ជាប់លទ្ធផលដែលទទួលបានក្នុង LESS ទៅក្នុងកម្មវិធីកាត់បន្ថយកូដ ហើយបន្ទាប់មកចូលទៅក្នុង ឯកសារ CSS ដាច់ដោយឡែកដែលគួរតែត្រូវបានរួមបញ្ចូលជំនួសឱ្យឯកសារ LESS ។ វិធីមួយទៀតគឺប្រើ LESS ដើម្បីចងក្រង និងបង្រួមឯកសាររបស់អ្នក។ វិធីសាស្រ្តទាំងពីរនឹងកាត់បន្ថយការបិទភ្ជាប់នៃរចនាប័ទ្មរបស់អ្នក ហើយនឹងជួយជៀសវាងបញ្ហាដែលអាចកើតឡើងប្រសិនបើកម្មវិធីរុករករបស់អតិថិជនមិនគាំទ្រ javascript ។ រឿងនេះកើតឡើងកម្រណាស់ ប៉ុន្តែ ឱកាសនេះ។មិនអាចត្រូវបានដកចេញ។

សូមពិចារណាផងដែរនូវការពិនិត្យឡើងវិញនេះពី Adam Stacoviak ដែលត្រូវបានសរសេរបន្ទាប់ពីអត្ថបទទស្សនាវដ្តី Smashing ត្រូវបានពិភាក្សាយ៉ាងខ្លាំងនៅលើ Twitter ថា "ជាការពិត Sass ទាមទារ Ruby ទោះបីជាវាមិនចាំបាច់ត្រូវបានចងក្រងជាឯកសារ CSS នៅលើម៉ាស៊ីនមេក៏ដោយ។ វាអាចត្រូវបានចងក្រងក្នុងមូលដ្ឋាន (ដូចមានចែងក្នុង LESS) ហើយឯកសារដែលបានចងក្រងនេះអាចត្រូវបានផ្លាស់ទីរួមជាមួយនឹងគម្រោងរបស់អ្នក គំរូ WordPress, Expression Engine ជាដើម។ ដោយសារនេះគឺជា Smashing Magazine ហើយមូលដ្ឋានអ្នកប្រើប្រាស់ប្រែប្រួលយ៉ាងទូលំទូលាយ ខ្ញុំស្មានថាអ្នកជាច្រើនកំពុងប្រើ Macs។ ដូច្នេះ Ruby គឺជាលំនាំដើមសម្រាប់មនុស្សគ្រប់គ្នា ម៉ាស៊ីន Mac, ដូច្នេះ ការដំឡើងងាយស្រួល Sass អនុញ្ញាតឱ្យអ្នកចាប់ផ្តើមភ្លាមៗ។

នៅពេលដែលអ្នកបានដំឡើង Sass អ្នកអាចបំប្លែងវាទៅជា CSS ក្នុងស្រុក ហើយបញ្ជូនកូដជាមួយគម្រោងរបស់អ្នក ដូចដែលខ្ញុំបានគ្របដណ្តប់រួចហើយ។ ប្រសិនបើអ្នកមិនប្រាកដពីរបៀបចាប់ផ្តើមជាមួយ Sass (ឬត្រីវិស័យ) យើងបានសរសេរគ្រប់គ្រាន់ហើយ។ ការណែនាំលម្អិតហៅថា " "(ចាប់ផ្តើមជាមួយ Sass ឬ Compass)" ។ តោះអរគុណ Adam ទាំងអស់គ្នា!

តិច - ច្រើនទៀត!

ការដំឡើង

LESS គឺមានភាពងាយស្រួលក្នុងការអនុវត្តនៅក្នុងគម្រោងណាមួយដែលអ្នកកំពុងធ្វើការ៖

អថេរ

ប្រសិនបើអ្នកជាអ្នកអភិវឌ្ឍន៍ នោះអថេរគឺប្រហែលជារបស់អ្នក។ មិត្តល្អបំផុត. ប្រសិនបើអ្នកត្រូវការប្រើព័ត៌មានដូចគ្នា (ដូចជាពណ៌) ច្រើនដង ការកំណត់អថេរធ្វើឱ្យមានភាពខុសគ្នាខ្លាំង។ វិធីនេះ អ្នកធានាខ្លួនអ្នកនូវភាពស្អិតរមួតនៃឯកសារ និងដោះលែងខ្លួនអ្នកពីការរមូរឯកសារឥតឈប់ឈរ ដើម្បីស្វែងរកតម្លៃគោលដប់ប្រាំមួយដែលអ្នកចង់បាន ដើម្បីចម្លងវា ហើយប្រើវានៅក្នុងធាតុថ្មី។ អ្នកថែមទាំងអាចរីករាយក្នុងការបន្ថែម ឬការមិនរាប់បញ្ចូលតម្លៃ hex ដែលអ្នកត្រូវការដើម្បីបង្កើត។ តោះយកឧទាហរណ៍នេះ៖

@blue: #00c;
@light_blue៖ @blue + #333;
@dark_blue: @blue - #333;
ប្រសិនបើយើងអនុវត្តរចនាប័ទ្មទាំងនេះទៅ divs ទាំងបីនោះ យើងទទួលបានឥទ្ធិពល gradation ដែលបង្កើតឡើងដោយការបន្ថែម និងដកតម្លៃទៅ និងពីពណ៌ខៀវធម្មជាតិ៖

ការផ្លាស់ប្តូរពី @light_blue ទៅ @blue ទៅ @dark_blue ។

ភាពខុសគ្នាតែមួយគត់រវាងអថេរនៅក្នុង LESS និង Sass គឺថា LESS ប្រើ "@" ហើយ Sass ប្រើ "$" ។ មានភាពខុសគ្នាផ្សេងទៀតផងដែរ ប៉ុន្តែពួកគេមិនពិបាករៀននោះទេ។

ល្បាយ

ប្រសិនបើអាចធ្វើបាន យើងអាចបង្កើតរចនាប័ទ្មដែលមានបំណងប្រើឡើងវិញនៅក្នុងឯកសារសន្លឹករចនាប័ទ្មដូចគ្នា។ គ្មាននរណាម្នាក់រារាំងអ្នកពីការប្រើប្រាស់ថ្នាក់ច្រើនទេ ដោយអនុវត្តពួកវាទៅធាតុនៅក្នុង HTML ប៉ុន្តែអ្នកក៏អាចធ្វើវាបានដោយមិនចាំបាច់បិទ ឯកសារ CSS. អ្នកគ្រាន់តែត្រូវប្រើ LESS ។ ដើម្បីបង្ហាញវា ខ្ញុំបានបញ្ចូលកូដមួយចំនួនដែលអនុញ្ញាតឱ្យអ្នកធ្វើរចនាប័ទ្មធាតុពីរនៅលើទំព័រមួយ។

ព្រំដែន (
border-top: 1px ចំនុច #333;
}

article.post(
ផ្ទៃខាងក្រោយ៖ #eee;
.ព្រំដែន;
}

ul.menu (
ផ្ទៃខាងក្រោយ៖ #ccc;
.ព្រំដែន;
}
អ្នកនឹងបញ្ចប់ជាមួយនឹងអ្វីមួយដែលស្រដៀងនឹងអ្វីដែលអ្នកបានសង្ឃឹមថានឹងទទួលបានដោយត្រលប់ទៅឯកសារ HTML របស់អ្នក ហើយបន្ថែមថ្នាក់ ".bordered" ទៅធាតុទាំងពីរ។ ប៉ុន្តែអ្វីដែលសំខាន់ដែលត្រូវកត់សម្គាល់នោះគឺថាអ្នកបានអនុវត្តវាដោយមិនបិទឯកសារ CSS ។ វាដំណើរការដូចនេះ៖

ទាំង​អត្ថបទ និង​បញ្ជី​ដែល​មិន​បាន​តម្រៀប​ចែករំលែក​រចនាប័ទ្ម​ព្រំដែន។

ជាមួយនឹង Sass អ្នកប្រកាស "@mixin" ជាអាទិភាពរចនាប័ទ្មដើម្បីកំណត់វាជា mixin ។ បន្ទាប់មក អ្នកប្រកាស "@include" ដើម្បីហៅវា។

@mixin ព្រំដែន (
border-top: 1px ចំនុច #333;
}

article.post(
ផ្ទៃខាងក្រោយ៖ #eee;
@ រួមបញ្ចូលព្រំដែន;
}

ul.menu (
ផ្ទៃខាងក្រោយ៖ #ccc;
@ រួមបញ្ចូលព្រំដែន;
}
ប៉ារ៉ាម៉ែត្រ លាយ

ស្រដៀងគ្នាទៅនឹងរបៀបដែលអ្នកប្រើមុខងារនៅក្នុង CSS, មុខងារនេះ។ប្រហែលជាមានប្រយោជន៍ជាពិសេសសម្រាប់អ្នកដែលស្ម័គ្រចិត្ដប្រើហាក់ដូចជា លទ្ធភាពគ្មានដែនកំណត់ CSS ទំនើប. ឧទាហរណ៍ដ៏ល្អបំផុត និងមានប្រយោជន៍បំផុតនៃការប្រើប្រាស់របស់វាទាក់ទងនឹងបុព្វបទអ្នកលក់កម្មវិធីរុករកតាមអ៊ីនធឺណិតជាច្រើនដែលយើងជួបប្រទះក្នុងអំឡុងពេលផ្លាស់ប្តូរពី CSS2 ទៅ CSS3 ។ Nettuts+ បោះពុម្ពដោយ Jeffrey Way ដែលរួមមាន ព័ត៌មានលំអិតអំពីការអនុវត្តឯកសារដែលមានសមាសធាតុ parametric mixins ដែលមានប្រយោជន៍ទាំងស្រុង។ អត្ថបទគ្របដណ្តប់ជម្រើស CSS3 ដែលអ្នកចូលចិត្តជាមួយនឹងបុព្វបទរបស់អ្នកលក់។ ឧទាហរណ៍ mixin សាមញ្ញដើម្បីគ្រប់គ្រងជ្រុងមូលក្នុងរាងផ្សេងៗ៖

Border-radius(@radius: 3px) (
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
IN ក្នុងករណីនេះថ្នាក់ ".border-radius" មានកាំ 3 ភីកសែល តាមលំនាំដើម ប៉ុន្តែអ្នកអាចបញ្ចូលតម្លៃណាមួយដែលអ្នកចូលចិត្ត និងទទួលបាន ជ្រុងមូល. ឧទាហរណ៍ ".border-radius(10px)" នឹងបង្គត់ជ្រុងដោយ 10 ភីកសែល។

វាក្យសម្ព័ន្ធនៅក្នុង Sass គឺស្រដៀងទៅនឹង LESS ។ គ្រាន់តែប្រើ "$" សម្រាប់អថេរ ហើយហៅ mixins ដោយប្រើ "@mixin" និង "@include" method ដែលខ្ញុំបានលើកឡើងពីមុន។

មរតកអ្នកជ្រើសរើស

សូមក្រឡេកមើលអ្វីដែល LESS មិនមាន។ ជាមួយនឹងលក្ខណៈពិសេសនេះ អ្នកអាចអនុវត្តឧបករណ៍ជ្រើសទៅឧបករណ៍ជ្រើសដែលបានបញ្ជាក់ពីមុនដោយមិនចាំបាច់ងាកទៅរកទម្រង់ដែលបំបែកដោយសញ្ញាក្បៀស។

ម៉ឺនុយ (
ស៊ុម៖ 1px រឹង #ddd;
}

បាតកថា (
@extend .menu;
}

/* នឹងបង្ហាញដូចនេះ៖ */
.menu, .footer (
ស៊ុម៖ 1px រឹង #ddd;
}
ច្បាប់​ដែល​បាន​បង្កប់

ការបែងចែកថ្នាក់ និងលេខសម្គាល់នៅក្នុង CSS គឺប្រហែលជា វិធីល្អបំផុតការពារសន្លឹករចនាប័ទ្មល្បាក់របស់អ្នកពីការលាយឡំជាមួយ ឬផ្ទុយមកវិញ ដឹកនាំពួកវាឱ្យធ្វើអន្តរកម្មជាមួយតារាងបន្ថែមផ្សេងទៀត។ ប៉ុន្តែ វិធីសាស្រ្តនេះ។ជាញឹកញាប់អាចបញ្ចូលលេខកូដដ៏ល្អ។ ដោយប្រើឧបករណ៍ជ្រើសរើសដូចជា “#site-body .post .post-header h2” យើងទទួលបានកូដដែលមើលទៅស្អាតណាស់ ដែលប្រើកន្លែងទំនេរច្រើន។ ជាមួយនឹង LESS អ្នកអាចដាក់លេខសម្គាល់សាខា ថ្នាក់ និងធាតុតាមដែលអ្នកចង់បាន។ ដោយប្រើឧទាហរណ៍ខាងលើ អ្នកអាចធ្វើអ្វីមួយដូចនេះ៖

#គេហទំព័រ (…

បឋមកថាក្រោយ (...

&:បានទស្សនា (… )
&: លោត (… )
}
}
}
}
កូដខាងលើគឺដូចគ្នាបេះបិទទៅនឹងឧបករណ៍ជ្រើសរើសដែលមិនស្អាតដែលយើងបានលើកឡើងនៅក្នុងកថាខណ្ឌមុន ប៉ុន្តែវាកាន់តែងាយស្រួលអាន និងយល់ ហើយប្រើទំហំតិចជាងច្រើន។ អ្នកក៏អាចរចនាប័ទ្មធាតុដើម្បីយោងទៅធាតុ pseudo របស់ពួកគេដោយប្រើ "&" - ក្នុងករណីនេះមុខងារនេះគឺស្រដៀងទៅនឹង "នេះ" នៅក្នុង javascript ។

ប្រតិបត្តិការ

នេះ​គឺ​អំពី​អ្វី​ដែល​អ្នក​រំពឹង​ទុក៖ ​​ដោយ​ប្រើ​ចំនួន​ជាក់លាក់ ឬ​អថេរ​ដើម្បី​ផលិត ប្រតិបត្តិការគណិតវិទ្យានៅក្នុងរចនាប័ទ្ម។

@base_margin៖ 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
ដោយវិធីនេះខ្ញុំដឹងថាខ្ញុំក៏អាចបែងចែកធាតុដោយ 4 និងទទួលបាន ប្រភេទអថេរ"@quarter_page" ប៉ុន្តែខ្ញុំចង់បង្ហាញថាច្បាប់វង់ក្រចកក៏សមរម្យនៅទីនេះដែរ។ វង់ក្រចកក៏នឹងត្រូវបានទាមទារផងដែរ ប្រសិនបើអ្នកចង់ធ្វើប្រតិបត្តិការនៅក្នុងប៉ារ៉ាម៉ែត្រមួយ។ ឧទាហរណ៍ "border: (@width / 2) solid #000"។

Sass មានភាពចម្រុះច្រើននៅពេលនិយាយអំពីលេខតិចជាង LESS ។ វា​ត្រូវ​បាន​គេ​បង្កើត​ឡើង​ជា​តារាង​បំប្លែង​ដើម្បី​ផ្សំ​ឯកតា​ដែល​អាច​ប្រៀប​ធៀប​បាន។ Sass អាចធ្វើការជាមួយ និងរកឃើញឯកតារង្វាស់ដែលមិនបានកំណត់។ ទ្រព្យសម្បត្តិនេះ។ត្រូវបានណែនាំនៅក្នុងការប៉ុនប៉ងដើម្បីបង្កើតភាពពាក់ព័ន្ធរបស់បណ្ណាល័យប្រឆាំងនឹងការផ្លាស់ប្តូរដែលត្រូវបានធ្វើឡើងដោយ W3C ។

/*សាស*/
2in + 3cm + 2pc = 3.514in

/* តិច */
2in + 3cm + 2pc = កំហុស
មុខងារនៃពណ៌

ខ្ញុំបានរៀបរាប់ពីមុនពីរបៀបដែល LESS ជួយខ្ញុំជាមួយខ្ញុំ ពណ៌ចម្រុះនៅក្នុងដំណើរការនៃការសរសេរកូដ។ មុខងារនៃផ្កាក៏ត្រូវបានភ្ជាប់ដោយឡែកពីគ្នាជាមួយនឹងរឿងនេះផងដែរ។ ខ្ញុំនឹងសន្មត់ថាអ្នកកំពុងប្រើស្តង់ដារមួយ។ ខៀវនៅទូទាំងឯកសាររចនាប័ទ្មរបស់អ្នក ហើយអ្នកចង់អនុវត្តពណ៌នេះទៅប៊ូតុងដាក់ស្នើនៅលើទម្រង់របស់អ្នក។ អ្នកអាចបើកកម្មវិធី Photoshop ឬកម្មវិធីនិពន្ធផ្សេងទៀតដើម្បីទទួលបានតម្លៃគោលដប់ប្រាំមួយពីទីនោះ (សម្រាប់ពណ៌ដែលស្រាលជាង ឬងងឹតបន្តិច)។ ឬអ្នកអាចប្រើមុខងារពណ៌ដែលបានផ្តល់ជា LESS ។

ដាក់ស្នើ (
padding: 5px 10px;
ស៊ុម៖ 1px រឹង @blue;
ផ្ទៃខាងក្រោយ៖ -moz-linear-gradient(កំពូល, lighten(@blue, 10%), @blue 100%); /*Moz*/
ផ្ទៃខាងក្រោយ៖ -webkit-gradient(លីនេអ៊ែរ កំពូលកណ្តាល បាតកណ្តាល ពី(ពន្លឺ(@ខៀវ, 10%)), color-stop(100%, @blue)); /*Webkit*/
ផ្ទៃខាងក្រោយ៖ -o-linear-gradient(កំពូល ស្រាល(@blue, 10%) 0%, @blue 100%); /*ល្ខោនអូប៉េរ៉ា*/
ផ្ទៃខាងក្រោយ៖ -ms-linear-gradient(កំពូល ស្រាល(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
ផ្ទៃខាងក្រោយ៖ លីនេអ៊ែរ-ជម្រាល(កំពូល ស្រាល(@ខៀវ, ១០%) ០%, @ខៀវ ១០០%); /*W3C*/
ពណ៌៖ #ffff;
ស្រមោលអត្ថបទ៖ 0 -1px 1px rgba(0,0,0,0.4);
}
មុខងារ "បំភ្លឺ" បំភ្លឺពណ៌តាមមាត្រដ្ឋានភាគរយ។ ក្នុងករណីនេះមុខងារនឹងបំភ្លឺពណ៌ខៀវចម្បង 10% ។ វិធីសាស្រ្តនេះ។អនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរពណ៌នៃធាតុដែលបានបញ្ចប់ការសិក្សា និងធាតុផ្សេងទៀតដែលមានពណ៌ដូចគ្នា ដោយគ្រាន់តែផ្លាស់ប្តូរពណ៌មូលដ្ឋានដោយខ្លួនឯង។ នេះអាចផ្តល់ឱ្យអ្នកនូវថាមពលដ៏សំខាន់នៅក្នុងដំណើរការបោសសំអាត។ លើសពីនេះទៀត ប្រសិនបើអ្នកបានប្រើមុខងារប៉ារ៉ាម៉ែត្រ (ដូចអ្វីដែលបានពិពណ៌នាខាងលើ) អ្នកអាចធ្វើឱ្យបុព្វបទកម្មវិធីរុករករបស់អ្នកកាន់តែងាយស្រួលដោយប្រែក្លាយពួកវាទៅជាអ្វីមួយដូចជា ".linear-gradient(lighten(@blue), @blue, 100%) ;" ។

ម៉្យាងវិញទៀត អ្នកនឹងទទួលបានផលល្អគួរសម៖

នេះជារបៀបដែលយើងទទួលបានប៊ូតុងបញ្ជូនដែលបានបញ្ចប់ការសិក្សាដ៏ស្រស់ស្អាតរបស់យើងដោយផ្អែកលើអថេរមួយ។

មានមុខងារពណ៌ផ្សេងទៀតសម្រាប់ការធ្វើឱ្យងងឹត ឬផ្លាស់ប្តូរពណ៌នៃពណ៌ ក៏ដូចជាការបង្វិលកង់ពណ៌ទៅជាពណ៌ផ្សេងទៀត។ ខ្ញុំណែនាំអ្នកឱ្យសាកល្បងពួកវា ដើម្បីរកមើលថាលក្ខណៈពិសេសណាដែលមានប្រយោជន៍បំផុតសម្រាប់អ្នក។

លក្ខខណ្ឌ និងការគ្រប់គ្រង

របស់ដ៏មានប្រយោជន៍មួយទៀតដែលផ្តល់ជូននៅក្នុង LESS ។ ជាមួយ Sass អ្នកមានលទ្ធភាពប្រើប្រាស់ if ( ) else ( ) conditionals ក៏ដូចជាសម្រាប់ ( ) loops ផងដែរ។ វាគាំទ្រប្រតិបត្តិករ "និង", "ឬ" និង "មិន" ក៏ដូចជា "", "=" និង "==" ។

/* សេចក្តីថ្លែងការណ៍ Sass "ប្រសិនបើ" គំរូ */
@if lightness($color) > 30% (
ពណ៌ផ្ទៃខាងក្រោយ៖ #000;
) @else (
ពណ៌ផ្ទៃខាងក្រោយ៖ #ffff;
}

/* គំរូ Sass "សម្រាប់" រង្វិលជុំ */
@សម្រាប់ $i ពី 1px ដល់ 10px (
.border-#(i) (
ព្រំដែន៖ $i ពណ៌ខៀវរឹង;
}
}
ចន្លោះឈ្មោះ

Namespaces អាច​ត្រូវ​បាន​ប្រើ​ដើម្បី​បន្ថែម​ស្រទាប់​មួយ​ទៀត​ទៅ​កូដ CSS ដែល​អនុញ្ញាត​ឱ្យ​យើង​បង្កើត​ក្រុម​នៃ​រចនាប័ទ្ម​ដែល​គេ​ប្រើ​ទូទៅ​រួច​ជ្រើសរើស​ពួកវា​ភ្លាមៗ។ ឧទាហរណ៍ ប្រសិនបើយើងបង្កើតក្រុមនៃរចនាប័ទ្មដែលហៅថា "លំនាំដើម" យើងអាចជ្រើសរើសពីក្រុមនេះនូវអ្វីដែលយើងត្រូវការ នៅពេលដែលយើងនឹងដំណើរការធាតុជាក់លាក់មួយ។

#លំនាំដើម (
.nav_list() (
រចនាប័ទ្មបញ្ជី: គ្មាន;
រឹម៖ 0; ទ្រនាប់៖ ០;
}
.button()(...)
.quote ( ) ( … )
}
បន្ទាប់មក នៅក្នុងកូដរបស់យើង ប្រសិនបើយើងជួបប្រទះធាតុ "ul" នៅក្នុងធាតុ "nav" នោះ យើងនឹងដឹងថា យើងនឹងត្រូវការរចនាប័ទ្មលំនាំដើម។ ដូច្នេះយើងអាចអនុវត្តវាបានយ៉ាងងាយស្រួល។

Navul (
#defaults > .nav_list;
}
វិសាលភាព (ក្របខ័ណ្ឌយកទៅក្នុងគណនី)

ការពិចារណាលើព្រំដែនក្នុងការសរសេរកម្មវិធីគឺជាបទដ្ឋាន ដូច្នេះវាគឺជាបទដ្ឋានដូចគ្នានៅក្នុង LESS ។ ប្រសិនបើអ្នកកំណត់អថេរនៅកម្រិតឫសនៃសន្លឹករចនាប័ទ្មល្បាក់ នោះវានឹងមានសម្រាប់ឯកសារទាំងមូល។ ទោះយ៉ាងណាក៏ដោយ ប្រសិនបើអ្នកបដិសេធអថេរមួយ ហើយភ្ជាប់វាទៅឧបករណ៍ជ្រើសរើសប្រភេទលេខសម្គាល់ ឬថ្នាក់ នោះវានឹងអាចប្រើបានតែជាមួយតម្លៃនៅក្នុងឧបករណ៍ជ្រើសរើសនោះ។

@color: #00c; /* ខៀវ */

#បឋមកថា (
@color: #c00; /*ក្រហម*/

ស៊ុម៖ 1px រឹង @color; /* នឹង​មាន​ស៊ុម​ក្រហម */
}

#បាតកថា (
ស៊ុម៖ 1px រឹង @color; /* នឹង​មាន​ស៊ុម​ខៀវ */
}
ដោយសារយើងប្រកាសអថេរនៅក្នុងឧបករណ៍ជ្រើសរើស "#header" តម្លៃមុនអថេរនោះនឹងខុសគ្នា ហើយនឹងអាចអនុវត្តបានតែនៅក្នុងឧបករណ៍ជ្រើសរើសនោះប៉ុណ្ណោះ។ អ្វីក៏ដោយមុន ឬក្រោយវានឹងរក្សាអត្ថន័យនៃសេចក្តីប្រកាសដើម។

វិសាលភាពនៅក្នុង Sass ត្រូវបានធ្វើខុសគ្នាបន្តិចបន្តួច។ នៅក្នុងកូដខាងលើ នៅពេលដែលអថេរ "@color" ត្រូវបានប្តូរទៅជា "ក្រហម" វានឹងត្រូវបានបកស្រាយដូចនៅក្នុងកូដ។

មតិយោបល់

ផ្នែកនេះគឺសាមញ្ញណាស់។ មានប្រភេទមតិយោបល់ត្រឹមត្រូវចំនួនពីរនៅក្នុង LESS ។ មតិយោបល់ CSS ស្តង់ដារ “/* comment */” គឺត្រឹមត្រូវ ហើយនឹងត្រូវបានដំណើរការ ហើយបន្ទាប់មកបង្ហាញ។ មតិ​មួយ​បន្ទាត់ "//comment" ក៏​ដំណើរការ​ដែរ ប៉ុន្តែ​វា​នឹង​មិន​ត្រូវ​បាន​បន្ទរ ឬ​បញ្ចេញ​ទេ។ ដូច្នេះពួកគេអាចដាក់ស្លាកថា "ស្ងាត់" ។

នាំចូល

ការនាំចូលក៏មានស្តង់ដារផងដែរ។ ស្តង់ដារ "@import: "classes.less";" ដំណើរការល្អណាស់។ ទោះយ៉ាងណាក៏ដោយ ប្រសិនបើអ្នកនាំចូលឯកសារតិចជាងមុន នោះផ្នែកបន្ថែមឯកសារនឹងជាជម្រើស។ ដូច្នេះ "@ នាំចូល "ថ្នាក់";" ក៏នឹងដំណើរការល្អផងដែរ។ ប្រសិនបើអ្នកចង់នាំចូលអ្វីមួយដោយគ្មានជំហានដំណើរការក្នុង LESS នោះអ្នកអាចប្រើផ្នែកបន្ថែម .css (ឧទាហរណ៍ "@import: "reset.css";")។

ការបញ្ចូលខ្សែអក្សរ

ទិន្នន័យខ្សែអក្សរក៏អាចប្រើជាអថេរ និងហៅក្នុងរចនាប័ទ្មដោយប្រើ "@(ឈ្មោះ)"។

@base_url = "http://coding.smashingmagazine.com";
រូបភាពផ្ទៃខាងក្រោយ៖ url("@(base_url)/images/background.png");
ការរត់គេចខ្លួន

មានពេលខ្លះដែលអ្នកត្រូវបញ្ចូលតម្លៃដែលមិនត្រឹមត្រូវនៅក្នុងវាក្យសម្ព័ន្ធ CSS ឬ LESS មិនទទួលស្គាល់។ ជារឿយៗស្ថានភាពនេះកើតឡើងនៅពេលដែលវាចាំបាច់ដើម្បីអនុវត្តប្រភេទនៃការ hack មួយចំនួនដើម្បីធ្វើឱ្យដំណើរការធម្មតានៃកម្មវិធីនៅក្នុងផលិតផល Microsoft ។ ដើម្បីជៀសវាងកំហុសឆ្គង និងការគាំង LESS អ្នកនឹងត្រូវដកពួកវាចេញ។

ថ្នាក់ (
តម្រង៖ ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* នឹងត្រូវបានចេញដូចនេះ: */
.ថ្នាក់(
តម្រង៖ progid:DXImageTransform.Microsoft.Alpha(ភាពស្រអាប់=20);
}
ការវាយតម្លៃ javascript

នេះគឺជាផ្នែកមួយដែលខ្ញុំចូលចិត្តបំផុតអំពីការធ្វើការជាមួយ LESS៖ វាងាយស្រួលប្រើ javascript ក្នុងរចនាប័ទ្ម។ អ្នក​អាច​ប្រើ​កន្សោម ហើយ​ក៏​សំដៅ​ទៅ​មុខងារ​បរិស្ថាន​អភិវឌ្ឍន៍​ដោយ​ប្រើ​សញ្ញា​ថយក្រោយ (`)។

@string: `"howdy".toUpperCase()`; /* @string ក្លាយជា "HOWDY" */

/* អ្នកអាចធ្វើបានក៏ប្រើ interpolation ដែលបានរៀបរាប់ពីមុនផងដែរ: */
@string: "សួស្តី";
@var: ~`"@(string)".topUpperCase()`; /* ក្លាយជា "HOWDY" */

/* នៅទីនេះយើងចូលទៅកាន់ផ្នែកនៃឯកសារ */
@height = `document.body.clientHeight`;
ការធ្វើទ្រង់ទ្រាយលទ្ធផល

ទោះបីជា LESS មិនមានជម្រើសទិន្នផលក៏ដោយ Sass ផ្តល់នូវកំណែលទ្ធផលចំនួន 4៖ សាខា បង្រួម បង្រួម និងពង្រីក។

បន្ទាត់ខាងក្រោម

បណ្ណាល័យដ៏អស្ចារ្យទាំងពីរនេះចែករំលែកភាពស្រដៀងគ្នាជាច្រើន។ ទាំងពីរគឺជាឧបករណ៍ដ៏ល្អសម្រាប់អ្នករចនាដែលបង្កើតកូដ ហើយពួកគេក៏អាចជួយអ្នកអភិវឌ្ឍន៍ធ្វើការកាន់តែមានប្រសិទ្ធភាព និងរហ័សផងដែរ។ ប្រសិនបើអ្នកជាអ្នកគាំទ្រ Ruby ឬ HAML នោះ Sass គឺពិតជាសម្រាប់អ្នក។ ចំពោះខ្ញុំ (និងខ្ញុំ អ្នកអភិវឌ្ឍន៍ PHPនិង javascript) ខ្ញុំនៅជាប់នឹង LESS ព្រោះថាវាកាន់តែងាយស្រួលក្នុងការរួមបញ្ចូល ហើយក៏អាចចូលប្រើកន្សោម javascript និងគុណលក្ខណៈឯកសារផងដែរ។ ខ្ញុំ​សង្ស័យ​ថា​ខ្ញុំ​ធ្លាប់​ប្រើ​ជំនាញ​សរសេរ​កម្មវិធី​ធ្ងន់ធ្ងរ​ណា​មួយ​ពេល​រចនា​សន្លឹក​រចនាប័ទ្ម ប៉ុន្តែ​ខ្ញុំ​គិត​ថា​វា​មាន​តម្លៃ​សាកល្បង។ ប្រសិនបើអ្នកបានប្រើបណ្ណាល័យទាំងពីរ ខ្ញុំចង់ស្តាប់គំនិត និងដំបូន្មានរបស់អ្នក! ធនធានរបស់យើងគឺតែងតែរីករាយក្នុងការទទួលបានមតិយោបល់!