SASS

Sass is a meta-language whose purpose is to be processed into CSS. The file names are actually *.scss and can be compiled by a tool like Gulp or Webpack into a minified CSS file that can be read by any browser.

Sass helps with the task of writing CSS by allowing to divide the CSS code in different files, organize it a clean structure and it gives several tools as well as a more elegant and advanced syntax. Basically, it gives more power than flat CSS allows but it does not extend the CSS standard itself as it’s CSS that will be generated from the .scss files.

Object Oriented CSS

เราใช้ไฟล์ SCSS มาหลายปีแล้วและวิธีที่เราเขียนสไตล์ชีทได้รับการพัฒนาและดำเนินการต่อไป ตอนนี้เราชอบกระบวนทัศน์การเขียนโปรแกรมเชิงวัตถุ ซึ่งโดยทั่วไปเราคิดว่าการจัดเรียง HTML ควรอยู่ในรูปแบบของวัตถุหรือแบบส่วน (และเราพยายามที่จะนำมาใช้ใหม่ให้มากที่สุด) ดังนั้นคุณจึงมี “วัตถุ” ใน HTML และคลาส CSS อื่น ๆ ที่สามารถเพิ่มเพื่อเปลี่ยนวิ่งต่างๆเล็กน้อย

วัตถุประสงค์คือเพื่อให้สามารถเข้าใจได้อย่างชัดเจน ในขณะที่อ่านโค้ด HTML และคลาส CSS ว่าควรจะแสดงผลอย่างไรและจะสามารถคำนวณได้อย่างรวดเร็วเมื่อมีการกำหนด CSS (ในโฟลเดอร์ใดในโครงสร้างโค้ด SCSS)

สิ่งนี้ทำให้เรามีฐานของไฟล์ SCSS ที่เราสามารถนำมาใช้ใหม่ผ่านโครงการส่วนใหญ่ซึ่งประกอบด้วย:

  • รีเซ็ต: การรีเซ็ตแบบง่าย ๆ ของเราเองที่อยู่ด้านบนของ Normalize.css จะช่วยให้สามารถกำหนดรูปแบบระหว่างเบราว์เซอร์เพื่อให้แน่ใจว่าพวกเขาทั้งหมดทำงานเหมือนกัน
  • การกำหนดค่าระดับโครงการ: ตัวแปรหลัก SCSS , สี, แบบอักษร, ขนาด
    เป็นต้น
  • เครื่องมือ: media queries, clearfix, responsive classes
    เป็นต้น
  • องค์ประกอบพื้นฐาน: สไตล์ขององค์ประกอบ HTML เอง
  • รูปแบบวัตถุมาตราฐาน : wrapper, grid, lists, blocks,
    buttons, links
    เป็นต้น
  • ส่วนประกอบ : header, footer, sections, banners etc

scss