SASS

CSS Preprocessor ที่เพิ่มตัวแปร โมดูล การซ้อนโครงสร้าง และ Logic ที่นำกลับมาใช้ได้ในระบบสไตล์ขนาดใหญ่

Sass เป็นภาษาเมตา ซึ่งมีวัตถุประสงค์ที่จะดำเนินการใน CSS มันช่วยในการเขียน CSS โดยอนุญาตให้แบ่ง CSS ในไฟล์ต่าง ๆ จัดระเบียบโครงสร้างให้สะอาดและให้เครื่องมือหลายอย่างรวมถึงไวยากรณ์ที่หรูหราและทันสมัยยิ่งขึ้น

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