កែសម្រួលជាមួយ sass

ប្រើ Sass ដើម្បីកំណត់ពីរូបរាង និងសកម្មភាពរបស់ធាតុនីមួយៗរបស់ Rachana.

កែសម្រួលនៅក្នុងប្រភពដើមនៃ sass របស់ Rachana

អ្នកអាចរកប្រភពដើមនៃ Sass របស់ Rachana នៅក្នុងទីតាំង
node_modules/@dgtdept/rachana/sass

site-folder/
├── scss
│   └── custom.scss
└── node_modules/
    └── @dgtdept/rachana/sass/
        └── cgds.scss

ទោះបីជាការកែប្រែពីក្នុងប្រភពដើម @dgtdept/rachana/sass/ ជាជម្រើសមួយ តែយើងមិនណែនាំឱ្យអ្នកកែប្រែក្នុងប្រភពដើមនេះទេ ចូរជៀសវាងប្រសិនជាអាចជៀសវាងបាន។

ការបញ្ចូល

នៅក្នុង custom.scss, អ្នកអាចបញ្ជូលនូវ cgds-theme ទាំងអស់ ឬបញ្ចូលតែធាតុណាដែលអ្នកត្រូវការ។ ប៉ុន្តែចូរចងចាំថាធាតុនីមួយៗអាចទាមទារ dependencies មួយចំនួនសម្រាប់ដំណើរការ។

ការបញ្ចូលធាតុទាំងអស់

// Custom.scss
// ជម្រើសទី១: បញ្ចូលគំរូរចនារបស់ Rachana ទាំងអស់

// កែប្រែបុរេជម្រើសរបស់ Rachana នៅក្រោមនេះ

@import "~@dgtdept/rachana/sass/cgds.scss";

// បន្ថែមការកែសម្រួលផ្សេងទៀតនៅទីនេះ

ការរួមបញ្ចូលធាតុនៃ Rachana

/// Custom.scss
// ជម្រើសទី១: បញ្ចូលគំរូរចនារបស់ Rachana ដោយផ្នែក

// 1. បញ្ចូល functions មុនគេ (ដូច្នះអ្នកអាចប្តូរ ពណ៌, SVGs, calc ។ល។)
@import "~@dgtdept/rachana/sass/functions";

// 2. កែប្រែបុរេជម្រើសរបស់ Rachana នៅក្រោមនេះ

// 3. បញ្ចូលផ្នែកចាំបាច់របស់ Rachana នៅក្រោមនេះ
@import "~@dgtdept/rachana/sass/variables";

// 4. បន្ថែមការកែសម្រួលផ្សេងទៀតនៅទីនេះ

// 5. បញ្ចូលផ្នែកចាំបាច់របស់ Rachana ផ្សេងទៀតនៅក្រោមនេះ

@import "~@dgtdept/rachana/sass/mixins";
@import "~@dgtdept/rachana/sass/root";

// 6. បញ្ចូលផ្នែកផ្សេងទៀតដែលអ្នកចង់បាននៅទីនេះ
@import "~@dgtdept/rachana/sass/utilities";
@import "~@dgtdept/rachana/sass/reboot";
@import "~@dgtdept/rachana/sass/type";
@import "~@dgtdept/rachana/sass/images";
@import "~@dgtdept/rachana/sass/containers";
@import "~@dgtdept/rachana/sass/grid";
@import "~@dgtdept/rachana/sass/helpers";

// 7. អ្នកអាចបញ្ចូល utilities API នៅខាងក្រោមគេប្រសិនបើអ្នកត្រូវការ `_utilities.scss`
@import "~@dgtdept/rachana/sass/utilities/api";

// 8. Add additional custom code here

ប្រសិនបើអ្នកប្រើប្រាស់ Webpack, អ្នកមិនចាំបាច់បញ្ចូល node_modules directory ទេ។

@import "~@dgtdept/rachana/sass/accordion";

អញ្ញាត្តិ

អ្នកអាចចូលមើលបញ្ជីនៃអញ្ញាត្តិទាំងអស់ក្នុង @dgtdept/rachana/sass/_variables.scss និងក្នុង GitLab repository របស់ Rachana។

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីការប្តូរ background-color និង color សម្រាប់ body បន្ទាប់ពីការបញ្ជូល cgds-theme តាម npm:

// Required
@import "~@dgtdept/rachana/sass/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "~@dgtdept/rachana/sass/cgds-variables";


// Optional components here
@import "~@dgtdept/rachana/sass/accordion";
@import "~@dgtdept/rachana/sass/alert";
@import "~@dgtdept/rachana/sass/badge";
@import "~@dgtdept/rachana/sass/breadcrumb";
// etc