แปลง Sass เป็น CSS
คอมไพล์ Sass และ SCSS เป็น CSS ออนไลน์ แปลงแบบเรียลไทม์ ผลลัพธ์แบบขยายหรือบีบอัด ระบุบรรทัดข้อผิดพลาด รองรับตัวแปร มิกซิน และการซ้อนครบถ้วน
Sass กับ SCSS ต่างกันอย่างไร?
SCSS เป็นไวยากรณ์ใหม่ที่เหมือน CSS ใช้วงเล็บปีกกาและเซมิโคลอน ส่วน Sass (ไวยากรณ์แบบย่อหน้า) ใช้การย่อหน้าและขึ้นบรรทัดใหม่แทน เครื่องมือนี้คอมไพล์ได้ทั้งสองแบบ เพียงเลือกไวยากรณ์จากเมนู
รองรับฟีเจอร์ Sass อะไรบ้าง?
ตัวคอมไพเลอร์ใช้เอนจิน Dart Sass ทางการ จึงรองรับตัวแปร การซ้อน มิกซิน @include ฟังก์ชัน @use @extend คำสั่งควบคุมอย่าง @if และ @each รวมถึงรูปแบบผลลัพธ์แบบบีบอัด
จะได้ CSS แบบบีบอัดได้อย่างไร?
เปลี่ยนเมนูรูปแบบผลลัพธ์เป็น "บีบอัด" ก่อนคอมไพล์ ช่องว่างและเซมิโคลอนตัวสุดท้ายจะถูกตัดออก ได้สไตล์ชีตที่เล็กที่สุด
ทำไมข้อผิดพลาดถึงระบุเลขบรรทัด?
เมื่อโค้ดมีข้อผิดพลาดทางไวยากรณ์ เอนจิน Sass จะรายงานบรรทัดและคอลัมน์ที่แน่นอนที่แปลงไม่ผ่าน เครื่องมือจะแสดงไว้เหนือผลลัพธ์เพื่อให้แก้ไขได้เร็ว
โค้ด Sass ของฉันถูกอัปโหลดไปเซิร์ฟเวอร์ไหม?
ไม่ เอนจิน Dart Sass ทั้งหมดถูกแพ็กมากับหน้าเว็บและคอมไพล์ในเครื่องผ่านเบราว์เซอร์ สไตล์ชีตของคุณไม่เคยออกจากอุปกรณ์ ปลอดภัยแม้กับโปรเจกต์ส่วนตัว
คอมไพล์ @import ไฟล์ในเครื่องได้ไหม?
ไม่ได้ ตัวคอมไพล์ทำงานกับโค้ดชิ้นเดียวในหน่วยความจำและเข้าถึงระบบไฟล์ของคุณไม่ได้ จึงแก้ไข import แบบไฟล์และ @use ของพาร์เชียลภายนอกไม่ได้
ใช้แบบออฟไลน์ได้ไหม?
ได้ เมื่อโหลดหน้าเว็บและแพ็กเกจคอมไพเลอร์ครั้งหนึ่งแล้ว การคอมไพล์เกิดขึ้นบนเครื่องของคุณทั้งหมด ไม่ต้องใช้อินเทอร์เน็ต
ใช้ผลลัพธ์อย่างไร?
คัดลอก CSS ที่คอมไพล์แล้วหรือดาวน์โหลดเป็น style.css จากปุ่มใต้ผลลัพธ์ แล้วอ้างอิงใน HTML หรือวางลงสไตล์ชีตของโปรเจกต์
วิธีใช้ แปลง Sass เป็น CSS
คอมไพเลอร์นี้รันเอนจิน Dart Sass ตัวทางการทั้งหมดในเบราว์เซอร์ของคุณ วาง SCSS หรือ Sass แบบย่อหน้าแล้วได้ CSS สะอาดทันที รองรับตัวแปร มิกซ์อิน การซ้อนกัน และฟังก์ชัน โดยไม่อัปโหลดข้อมูลใดๆ
- วางโค้ด Sass หรือ SCSS ลงในช่องอินพุต หรือกดตัวอย่างเพื่อโหลดตัวอย่างที่ใช้งานได้จริงซึ่งมีตัวแปรและมิกซ์อิน
- เลือกไวยากรณ์ (SCSS หรือ Sass แบบย่อหน้า) และสไตล์เอาต์พุต (Expanded หรือ Compressed) จากเมนูแบบเลื่อน
- เมื่อเปิดคอมไพล์สดไว้ CSS จะแสดงขณะพิมพ์ หรือกดปุ่มคอมไพล์เพื่อรันด้วยมือ
- หากมีข้อผิดพลาดทางไวยากรณ์ จะมีเลขบรรทัดที่แม่นยำและข้อความแสดงเหนือเอาต์พุต เพื่อแก้ไขได้เร็ว
- ใช้ปุ่มคัดลอกหรือดาวน์โหลดใต้เอาต์พุตเพื่อเก็บสไตล์ชีตที่คอมไพล์แล้วเป็น style.css
เลือกสไตล์เอาต์พุต Compressed เพื่อมินิฟายสไตล์ชีต เหมาะกับการบิลด์สำหรับ production จากซอร์สโดยตรง
เครื่องมือที่เกี่ยวข้อง
- จัดรูปแบบ CSS จัดรูปแบบและทำให้โค้ด CSS สวยงามทันที แปลง CSS ที่บีบอัดเป็นโค้ดที่อ่านง่ายพร้อมตัวเลือกที่ปรับได้
- ตัวบีบอัด CSS ตัวบีบอัด CSS ออนไลน์ฟรี บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ทันทีโดยลบช่องว่าง ความคิดเห็น และอักขระที่ไม่จำเป็น ลดขนาดไฟล์เพื่อประสิทธิภาพเว็บที่เร็วขึ้น
- ตัวสร้าง CSS Gradient สร้าง CSS gradient ที่สวยงามแบบภาพ สร้าง gradient เชิงเส้น รัศมี และกรวยด้วยจุดหยุดสีหลายจุด มุมและตำแหน่งที่กำหนดเอง คัดลอกโค้ด CSS ที่พร้อมใช้งานทันที
- ตัวสร้าง CSS Flexbox ตัวสร้าง CSS Flexbox แบบภาพพร้อมตัวอย่างสด ปรับคุณสมบัติ flex และรับโค้ด CSS พร้อมใช้งาน
- เครื่องคำนวณ Chmod เครื่องคำนวณ chmod ออนไลน์ฟรีเพื่อแสดงและคำนวณสิทธิ์ไฟล์ Linux ด้วยช่องทำเครื่องหมาย แปลงระหว่างสัญกรณ์ตัวเลข (755, 644) และสัญลักษณ์ (rwxr-xr-x) ทันที รองรับสิทธิ์พิเศษเช่น setuid, setgid, sticky bit
- ตาราง ASCII ข้อมูลอ้างอิงการเข้ารหัสอักขระ ASCII ครบถ้วนพร้อมรหัสทศนิยม เลขฐานสิบหก ฐานแปด ฐานสอง เอนทิตี HTML และคำอธิบายอักขระ ค้นหาและกรองได้ทันที
- เครื่องมือทดสอบคำขอ HTTP ทดสอบ REST API โดยตรงในเบราว์เซอร์ของคุณ ส่งคำขอ GET, POST, PUT, DELETE ด้วย header, body และพารามิเตอร์ที่กำหนดเอง ดูสถานะ header และ body JSON ของการตอบกลับทันที
- ตัวสร้าง .htaccess สร้างกฎ Apache .htaccess สำหรับการเปลี่ยนเส้นทาง เขียนใหม่ ส่วนหัวความปลอดภัย แคช และอื่นๆ