ตัวแปลง CSS เป็น SCSS

แปลง CSS แบบแบนเป็น SCSS แบบซ้อน พร้อมรวม selector และดึงตัวแปรสีได้ คัดลอกหรือดาวน์โหลดในเบราว์เซอร์ ฟรีและเป็นส่วนตัว

Loading tool...

ตัวแปลง CSS เป็น SCSS คืออะไร?

ตัวแปลง CSS เป็น SCSS เป็นเครื่องมือฟรีในเบราว์เซอร์ที่เปลี่ยนกฎ CSS แบบแบนเป็น SCSS แบบซ้อน พร้อมรวม selector และดึงตัวแปรสีได้

ประโยชน์หลัก

เขียนรายการ selector ยาวให้เป็น Sass แบบซ้อนโดยไม่ต้องออกจากแท็บ
เห็นความสัมพันธ์ hover และ descendant ในบล็อกเดียว
ดึงสีที่ซ้ำเป็นตัวแปรที่ใช้ซ้ำได้
เป็นส่วนตัว: สไตล์ไม่ออกจากเบราว์เซอร์

กรณีการใช้งาน

•ย้ายสไตล์ชีตเก่าไปสู่ Sass partial
•เก็บ selector .card ที่ซ้ำก่อนรีแฟกเตอร์
•สอนว่า CSS nesting แม็ปกับไวยากรณ์ ampersand ของ SCSS อย่างไร
•เตรียม snippet เพื่อวางในไฟล์ .scss ที่มีอยู่

วิธีใช้ตัวแปลง CSS เป็น SCSS

วาง CSS: วางสไตล์ชีตหรือโหลดตัวอย่าง กฎจะเป็นแบบแบนหรือซ้อนอยู่แล้วก็ได้
เลือกตัวเลือก: เปิดการดึงตัวแปรสีเพื่อใช้สีที่ซ้ำ และเปิด BEM หากต้องการให้ .card-title อยู่ใต้ .card
ตรวจ SCSS ที่ซ้อน: ตรวจ descendant, สถานะ hover และบล็อก @media ว่าตรงกับ Sass ที่ต้องการ ปีกกาที่ไม่สมดุลจะมีคำเตือน
คัดลอกหรือดาวน์โหลด: คัดลอก SCSS ไปยังคลิปบอร์ด หรือดาวน์โหลดเป็น styles.scss ไม่มีการอัปโหลด

คุณสมบัติหลัก

ซ้อน descendant, combinator และ pseudo-class ใต้ parent ที่ใช้ร่วมกัน
คำต่อท้าย BEM แบบ ampersand เช่น &-title (ตัวเลือก)
ดึงสี hex, rgb และ hsl ที่ซ้ำเป็นตัวแปร $color-*
คง @media, @supports, @import และ @font-face
คัดลอกหรือดาวน์โหลดไฟล์ .scss โดยไม่อัปโหลด CSS

คำถามที่พบบ่อย

เครื่องมือนี้คอมไพล์ SCSS กลับเป็น CSS หรือไม่?

ไม่ มันแค่ซ้อน CSS แบบแบนเป็นไวยากรณ์ SCSS คุณยังต้องคอมไพล์ผลลัพธ์ด้วย Sass, Dart Sass หรือ bundler ของคุณ

รวม selector อย่างไร?

คำนำหน้าที่ใช้ร่วมกันกลายเป็นบล็อกแม่ .card h2 จะซ้อนเป็น h2 ใน .card และ .card:hover กลายเป็น &:hover ชื่อที่ไม่เกี่ยวข้องอย่าง .cardboard แยกไว้ เว้นแต่เปิด BEM

การดึงตัวแปรสีทำอะไร?

สี hex และสีแบบฟังก์ชันที่ปรากฏอย่างน้อยสองครั้งจะถูกประกาศครั้งเดียวเป็น $color-* ด้านบนแล้วใช้ซ้ำในประกาศ สีที่ไม่ซ้ำยังอยู่ inline

CSS ของฉันถูกอัปโหลดหรือไม่?

ไม่ การ parse และการซ้อนทำงานในเบราว์เซอร์ด้วย JavaScript ใช้แบบ offline ได้หลังจากโหลดหน้า

คู่มือฉบับละเอียด

แปลง CSS แบบ Flat เป็น SCSS แบบ Nested ได้ในไม่กี่วินาที

อ่านคู่มือฉบับเต็ม →

ตัวแปลง CSS เป็น SCSS

ดึงตัวแปรสีเปลี่ยนสี hex, rgb และ hsl ที่ซ้ำเป็นตัวแปร $color-*

ซ้อนแบบ BEM ด้วย ampersandซ้อน .card-title ใต้ .card เป็นคำต่อท้ายแบบ &-title

CSS

SCSS

$color-1a1a1a: #1a1a1a;

.card {
  color: $color-1a1a1a;
  background: #ffffff;
  padding: 16px;
  &:hover {
    background: #f8fafc;
  }

  h2 {
    color: $color-1a1a1a;
    font-size: 1.25rem;
    span {
      color: #2563eb;
    }
  }
}

.card-title {
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .card {
    padding: 24px;
    h2 {
      font-size: 1.5rem;
    }
  }
}

กฎ: 7 · ตัวแปร: 1

เกี่ยวกับตัวแปลง CSS เป็น SCSS

เครื่องมือฟรีในเบราว์เซอร์ที่แปลงกฎ CSS แบบแบนเป็น SCSS แบบซ้อน รวม parent ที่ใช้ร่วมกัน เปลี่ยน pseudo-class เป็น selector แบบ ampersand และดึงสีที่ซ้ำเป็นตัวแปรได้ ไม่มีการอัปโหลด

ทำไมต้องใช้ตัวแปลงนี้?

•เห็นโครงสร้างซ้อนแบบที่ Sass ต้องการโดยไม่ต้องเขียน selector ใหม่เอง
•รวม .card, .card h2 และ .card:hover ไว้ในบล็อกเดียวที่อ่านง่าย
•ดึงสีที่ซ้ำเป็นตัวแปร $color-* ได้ตามต้องการ
•ตัวเลือก BEM เปลี่ยน .card-title เป็นคำต่อท้ายแบบ ampersand
•ทำงานในเครื่องคุณ สไตล์ชีตไม่ออกจากอุปกรณ์

คุณสมบัติ

✓ซ้อน descendant, combinator และ pseudo-class
✓คำต่อท้าย BEM แบบ ampersand (ตัวเลือก)
✓ดึงสี hex และสีแบบฟังก์ชันที่ซ้ำ
✓คง @media, @supports และ @import
✓คัดลอกหรือดาวน์โหลดไฟล์ .scss

Loading tool...