การจัดการไฟล์ของ scss

หลายคนที่เขียน css นั้นต้องรู้จักเจ้า scss อยู่แล้ว ถ้าใครยังไม่รู้จักสามารถหาอ่านตามบทความได้ ถ้าคุณเริ่มเขียนไปซักพักจะเจอปัญหาเกี่ยวกับว่า เราจะจัดการเรื่องการแบ่งไฟล์ยังไง เหตุผลเพราะว่าเจ้า scss นั้นมันมีความสามารถในการ import พวกไฟล์อื่นๆได้ เข้ามาได้ทำให้การเขียน css นั้นเพิ่มขีดความสามารถไปได้อีกไกล ผมเองก็เจอปัญหานี้ครับว่า เอ๊ะ ? เขาวางระบบไฟล์กันยังไงนะให้มีประสิทธิภาพบทความนี้ไปดูกัน 

Simple Structure ( วางไฟล์แบบง่ายๆ )

การใช้เทคนิคการแบ่งไฟล์แบบง่ายๆจะเหมาะกับ project เล็กๆไม่ใหญ่มากอาจจะทำกันไม่เกิน 1 – 3 คนในทีม เป็น project แบบทำไม่ใช่ long term เพื่องานเล็กๆนะครับ โดยมีวิธีการดังนี้เลย

เราจะมี 3 ไฟล์หลักๆก่อนครับคือ 

_base.scss
_layout.scss
_components.scss

main.scss 

เราจะใช้เทคนิคที่เรียกว่า Partials หรือแบ่งเป็นส่วนเล็กๆ โดย 3 ไฟล์หลักๆ ทำงานดังนี้ครับ

_base.scss เก็บไฟล์ที่เกี่ยวกับ resets ต่างๆ , variables ( พวกตัวแปร ) ต่างๆ , mixins และพวก class ทั่วๆไป

_layout.scss เก็บพวกเกี่ยวกับ layout พวก container class หรือว่าพวก grid systems ต่างๆที่ออกแบบไว้เช่น 2 columns อะไรพวกนี้

_components.scss พวก reuse ทั้งหมดพวกปุ่ม nabbers, card 

ส่วนไฟล์ main.scss เราจะไม่ให้มี class อะไรเลยไว้สำหรับ import file เท่านั้น

ถ้าหากมีไฟล์ที่เริ่มใหญ่เราจะทำการแยกส่วนที่เร่ิมใหญ่ออกและสร้าง folder เพื่อจัดเก็บ เช่น ถ้า components มันเร่ิมใหญ่ก็สร้างไฟล์เกี่ยวกับเรื่องนั้นๆแทน สมมติว่า css เกี่ยวกับ button เริ่มเยอะแล้วก็แยกมาเป็น _button.scss หรือเกี่ยวกับ _carousel.scss ทำนองนี้

แต่อย่างไรก็ตามถ้าหากเราทำงานเกี่ยวกับ project ใหญ่ๆเราต้องการ การออกแบบที่เข้มงวดกว่านี้ เราจะไปเรียนถัดไป

The 7-1 Pattern

รูปแบบ 7-1 นั้นเป็นรูปแบบ 7 folder 1 file เป็นรูปแบบที่ใช้กันอย่างกว้างขวางโดยเหมาะสมกับพวก project ใหญ่ๆ โดยเราจะแบ่งส่วนใหญ่ๆ เป็น 7 folders และมีไฟล์เดียวอยู่ใน root level ( ส่วนใหญ่จะเป็น main.scss ) สำหรับการ import ไฟล์เท่านั้น

มาดูตัวอย่างกันว่าเขาออกแบบกันอย่างไร 

sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _functions.scss    // Sass Functions
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid system
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _forms.scss        // Forms
|
|– pages/
|   |– _home.scss         // Home specific styles
|   |– _about.scss        // About specific styles
|   |– _contact.scss      // Contact specific styles
|
|– themes/
|   |– _theme.scss        // Default theme
|   |– _admin.scss        // Admin theme
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
`– main.scss              // Main Sass file

Abstracts (or utilities):  ไว้เก็บพวกเกี่ยวกับ scss พวก variable, function, mixin แล้วก็ config file โดยหลักการคือจะเก็บพวก helper ต่างๆจะไม่มีพวก output ออกไปแสดงผล เช่น ไม่มีพวกเปลี่ยนสี เปลี่ยนความยาวนั่นเอง

Base: จะเก็บพวก code ที่อารมณ์แบบ copy / paste จาก internet แล้วก็พวก reset, typographic แล้วก็พวกไฟล์พื้นฐานที่ใช้ใน project

Components (or modules): เก็บทุก button, carousel, slider, พวกส่วนต่างๆของ page components ให้นึกถึง widget โดยไฟล์ส่วนใหญ่จะอยู่ใน folder นี้ค่อนข้างเยอะไม่ต้องแปลกใจ

Layout: เก็บพวกเกี่ยวกับ layout แล้วก็พวก header, footer , navigation , grid system

Pages: เก็บไฟล์ที่เกี่ยวกับ page นั้นๆแบบมีเฉพาะ page นั้น เช่น หน้า home page อาจจะมี class ที่หน้าอื่นไม่มีเลยก็เก็บใส่ใน home.scss ทำนองนี้

Themes: ปกติ folder นี้อาจจะไม่มีใน project อื่น โดยจะจัดเก็บเกี่ยวกับ theme นั้นๆ เช่น สีหลักของเว็บ เวลาจะปรับอะไรก็สามารถมาดูได้แก้ไขง่าย 

Vendors: เก็บเกี่ยวกับ code ที่เกี่ยวกับพวก thrid party และพวก framework เช่นพวก normalize, bootstrap , jqueryUI อย่างไรก็ตามจะมีหลายๆครั้งที่เราทำการเขียน code override เราก็จะทำการสร้าง folder ใหม่ที่ชื่อว่า vendors-extensions/ และให้ชื่อไฟล์ที่เราทำการ override ใส่ลงไปยกตัวอย่างจริง vendors-extensions/_bootstrap.scss โดยจะเก็บพวกไฟล์ override bootstrap 

Main.scss: ทำเหมือนใน simple project เก็บแต่ import file 

Note: ไม่ต้องใส่ _ หรือ .scss ตอน import นะครับ

หากใครขี้เกียจนั่งสร้าง folder ไป clone git ตามนี้ได้เลยจ้า

https://github.com/KittyGiraudel/sass-boilerplate

เล่าจากประสบการณ์ใช้จริงบ้าง

หลังจากเรียนรู้ไปแล้วไปลองใช้งานจริง ผมลองไปใช้กับ nextjs นะครับ มันเจอปัญหาที่เวลาที่เราต้องการจะใช้ style component แบบ on page นั้นๆ ถ้าในตัวอย่างของ next js มันจะให้ตั้งชื่อว่า home.module.scss ซึ่งเราจะสามารถเรียกใช้ในไฟล์หน้านั้นๆได้ทำให้เรา optimize สำหรับเรื่อง seo page speed ได้แต่ปัญหามันอยู่ตรงนี้ครับ

ในตัว style component มันไม่สามารถเรียกใช้ตัวแปรที่เราทำการเรียกจาก main.scsss ได้ มันบอกไม่รู้จักตัวแปรนี้ แต่สามารถแก้ไขด้วยการทำแบบนี้ครับ ทำการเปิดไฟล์ next.config.js แล้ว

/** @type {import('next').NextConfig} */
const path = require('path')

module.exports = {
  sassOptions: {
    prependData: `@import "../styles/abstracts/_variable.scss";`,
  },
}

ปัญหาต่อมาที่ผมเจอคือ การเรียกใช้แบบ nest ที่เป็น feature ของ scss ไม่สามารถใช้ได้ ทำให้การแบ่งไฟล์มันไม่สามารถใช้งานเกี่ยวกับ folder pages ได้ครับ เพราะเราอาจจะใช้ css เฉพาะเจาะจงกับหน้านั้นๆ นั่นเอง ตอนนี้ก็ยังนึกไม่ออกว่าจะแก้ปัญหานี้ยังไง ถ้าใครรู้บอกผมได้นะครับ

Message us