SCSS กับ Sass ต่างกันอย่างไร

จากสิ่งที่ฉันได้อ่าน Sass เป็นภาษาที่ทำให้ CSS มีประสิทธิภาพมากขึ้นด้วยการสนับสนุนตัวแปรและคณิตศาสตร์

ความแตกต่างกับ SCSS คืออะไร? มันควรจะเป็นภาษาเดียวกันหรือไม่? ที่คล้ายกัน? แตกต่างกันอย่างไร

Sass เป็นตัวประมวลผลล่วงหน้า CSS ที่มีความก้าวหน้าทางไวยากรณ์ สไตล์ชีทในไวยากรณ์ขั้นสูงถูกประมวลผลโดยโปรแกรมและเปลี่ยนเป็นสไตล์ชีต CSS ปกติ อย่างไรก็ตามมันจะไม่ขยายมาตรฐาน CSS เอง

สนับสนุนตัวแปร CSS และสามารถใช้งานได้ แต่ไม่รวมถึงตัวแปรตัวประมวลผลล่วงหน้า

สำหรับความแตกต่างระหว่าง SCSS และ Sass ข้อความนี้ในหน้าเอกสาร Sassควรตอบคำถาม:

มีสองไวยากรณ์สำหรับ Sass อันแรกเรียกว่า SCSS (Sassy CSS) และใช้ตลอดการอ้างอิงนี้เป็นส่วนเสริมของไวยากรณ์ของ CSS ซึ่งหมายความว่าสไตล์ชีท CSS ที่ถูกต้องทุกไฟล์เป็นไฟล์ SCSS ที่ถูกต้องซึ่งมีความหมายเหมือนกัน ไวยากรณ์นี้ได้รับการปรับปรุงด้วยคุณสมบัติ Sass ที่อธิบายไว้ด้านล่าง ไฟล์ที่ใช้ไวยากรณ์นี้มีนามสกุล. scss

ไวยากรณ์ที่สองและที่เก่ากว่าหรือที่เรียกว่าไวยากรณ์ที่เยื้อง (หรือบางครั้งเป็นเพียงแค่ "Sass") ให้วิธีการเขียน CSS ที่กระชับยิ่งขึ้น มันใช้การเยื้องแทนวงเล็บเพื่อระบุการทำรังของตัวเลือกและขึ้นบรรทัดใหม่มากกว่าอัฒภาคเพื่อแยกคุณสมบัติ ไฟล์ที่ใช้ไวยากรณ์นี้มีนามสกุล. sass

อย่างไรก็ตามทั้งหมดนี้ใช้งานได้เฉพาะกับ Sass pre-compiler ซึ่งในท้ายที่สุดจะสร้าง CSS มันไม่ได้เป็นส่วนขยายของมาตรฐาน CSS เอง

ฉันเป็นหนึ่งในนักพัฒนาที่ช่วยสร้าง Sass

ข้อแตกต่างคือ UI ภายใต้ภายนอกที่เป็นข้อความพวกเขาเหมือนกัน นี่คือเหตุผลที่ไฟล์ sass และ scss สามารถนำเข้าซึ่งกันและกัน ที่จริงแล้ว Sass มีตัวแยกวิเคราะห์ไวยากรณ์สี่ตัวคือ scss, sass, CSS และน้อยกว่า ทั้งหมดเหล่านี้แปลงไวยากรณ์ที่แตกต่างกันเป็นทรีบทคัดย่อไวยากรณ์ซึ่งถูกประมวลผลเพิ่มเติมในเอาต์พุต CSS หรือแม้แต่ไปยังหนึ่งในรูปแบบอื่นผ่านเครื่องมือ sass-convert

ใช้ไวยากรณ์ที่คุณชอบที่สุดทั้งคู่ได้รับการสนับสนุนอย่างเต็มที่และคุณสามารถเปลี่ยนได้ในภายหลังหากคุณเปลี่ยนใจ

.sassไฟล์Sass นั้นแตกต่างจาก.scssไฟล์เช่น

Example.sass - sass เป็นไวยากรณ์ที่เก่ากว่า

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css เป็นไวยากรณ์ใหม่ตั้งแต่ Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

เอกสารใด ๆ ที่ถูกต้อง CSS สามารถแปลงเป็น Sassy CSS (SCSS) เพียงโดยการเปลี่ยนนามสกุลจากไป.css.scss

Sass ( Syntactically Awesome StyleSheets ) มีสองรูปแบบ:

• ใหม่กว่า: SCSS ( Sassy CSS )
• และเก่าเดิม: ไวยากรณ์เยื้องซึ่งเป็นต้นฉบับSassและจะเรียกว่าSass

ดังนั้นพวกเขาจึงเป็นส่วนหนึ่งของตัวประมวลผลล่วงหน้าSass ที่มีไวยากรณ์ที่เป็นไปได้สองแบบที่แตกต่างกัน

ความแตกต่างที่สำคัญที่สุดระหว่างSCSSและSassดั้งเดิม:

SCSS :

• ไวยากรณ์คล้ายกับCSS (มากว่าทุกCSS3ปกติที่ถูกต้องเป็นSCSS ที่ถูกต้องแต่ความสัมพันธ์ในทิศทางอื่นไม่ได้เกิดขึ้นอย่างเห็นได้ชัด)

• ใช้วงเล็บปีกกา {}

• ใช้เซมิโคลอน ;
• เครื่องหมายการมอบหมายคือ :
• เพื่อสร้างมิกซ์อินมันใช้@mixinคำสั่ง
• เมื่อต้องการใช้mixinมันนำหน้าด้วย@includeคำสั่ง
• ไฟล์มีนามสกุล. scss

Sassดั้งเดิม :

• ไวยากรณ์คล้ายกับRuby
• ไม่มีการจัดฟัน
• ไม่มีการเยื้องอย่างเข้มงวด
• ไม่มีกึ่งทวิภาค
• เครื่องหมายการมอบหมาย=แทน:
• ในการสร้างมิกซ์อินจะใช้=เครื่องหมาย
• หากต้องการใช้มิกซ์อินมันจะนำหน้าด้วย+เครื่องหมาย
• ไฟล์มีนามสกุล. sass

บางคนชอบSassไวยากรณ์เดิม - ในขณะที่คนอื่นชอบSCSS ทั้งสองวิธี แต่ก็เป็นที่น่าสังเกตว่าSass ของไวยากรณ์เว้า ๆ แหว่ง ๆ ไม่ได้และจะไม่เลิก

การแปลงด้วยsass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

เอกสารประกอบ Sass และ SCSS

ไวยากรณ์ของมันแตกต่างกันและเป็นโปรหลัก (หรือต่อต้านขึ้นอยู่กับมุมมองของคุณ)

ฉันจะพยายามไม่ทำซ้ำสิ่งที่คนอื่นพูดคุณสามารถ google ได้อย่างง่ายดาย แต่ฉันอยากจะบอกบางสิ่งจากประสบการณ์ของฉันที่ใช้ทั้งสองอย่างบางครั้งแม้แต่ในโครงการเดียวกัน

SASS pro

• ทำความสะอาด - ถ้าคุณจะมาจากงูหลาม, ทับทิม (คุณสามารถแม้แต่จะเขียนอุปกรณ์ประกอบฉากที่มีสัญลักษณ์เหมือนไวยากรณ์) หรือแม้กระทั่งโลก CoffeeScript ก็จะมาเป็นธรรมชาติมากให้คุณ - เขียน mixins ฟังก์ชั่นและโดยทั่วไปสิ่งที่นำมาใช้ใหม่ใด ๆ ใน.sassมากได้ง่ายขึ้น 'และสามารถอ่านได้มากกว่าใน.scss(ส่วนตัว)

ข้อเสีย SASS

• ช่องว่างที่ไวต่อความรู้สึก (อัตนัย) ฉันไม่รังเกียจมันในภาษาอื่น ๆ แต่ที่นี่ใน CSS มันทำให้ฉันรำคาญใจ (ปัญหา: การคัดลอก, แท็บ vs สงครามอวกาศ ฯลฯ )
• ไม่มีกฎแบบอินไลน์ (นี่เป็นเกมที่ทำเพื่อฉัน) คุณไม่สามารถทำbody color: redเช่นนั้นได้ใน. scssbody {color: red}
• การนำเข้าข้อมูลของผู้ขายรายอื่นคัดลอกตัวอย่างของวานิลลา CSS - ไม่เป็นไปไม่ได้ แต่น่าเบื่อมากในบางเวลา การแก้ปัญหาคืออาจมี.scssไฟล์ (ใกล้กับ.sassไฟล์) .sassในโครงการของคุณหรือแปลงให้

นอกเหนือจากนี้ - พวกเขาทำงานเดียวกัน

ตอนนี้สิ่งที่ฉันชอบทำคือเขียน mixins และตัวแปรใน.sassและโค้ดที่จะคอมไพล์ CSS เป็นจริง.scssถ้าเป็นไปได้ (เช่น Visual Studio ไม่ได้รับการสนับสนุน.sassแต่เมื่อใดก็ตามที่ฉันทำงานในโครงการ Rails ในหนึ่งไฟล์ ofc)

เมื่อเร็ว ๆ นี้ฉันกำลังพิจารณาให้โอกาสStylus (สำหรับตัวประมวลผลล่วงหน้าแบบเต็มเวลา CSS) เพราะมันช่วยให้คุณสามารถรวมสองไวยากรณ์ในไฟล์เดียว (ท่ามกลางคุณสมบัติอื่น ๆ ) นั่นอาจไม่ใช่ทิศทางที่ดีสำหรับทีมที่จะทำ แต่เมื่อคุณดูแลคนเดียว - มันก็โอเค สไตลัสมีความยืดหยุ่นมากที่สุดเมื่อมีปัญหาเกี่ยวกับไวยากรณ์

และ Finaly mixin สำหรับ.scssVS .sassเปรียบเทียบไวยากรณ์:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

จากโฮมเพจของภาษา

Sass มีสองรูปแบบ ไวยากรณ์หลักใหม่ (ณ Sass 3) เป็นที่รู้จักกันในชื่อ "SCSS" (สำหรับ "Sassy CSS")และเป็นส่วนเสริมของไวยากรณ์ของ CSS3 ซึ่งหมายความว่าทุกสไตล์ชีท CSS3 ที่ถูกต้องเป็น SCSS ที่ถูกต้องเช่นกัน ไฟล์ SCSS ใช้นามสกุล. scss

ไวยากรณ์ที่สองที่เก่ากว่าเรียกว่าไวยากรณ์ที่เยื้อง (หรือเพียงแค่“ Sass”) แรงบันดาลใจจากความคลาดเคลื่อนของ Haml เหมาะสำหรับผู้ที่ต้องการความกระชับมากกว่าความคล้ายคลึงกับ CSS แทนที่จะใช้เครื่องหมายวงเล็บและเครื่องหมายอัฒภาคจะใช้การเยื้องของบรรทัดเพื่อระบุบล็อก แม้ว่าจะไม่มีไวยากรณ์หลักอีกต่อไป แต่จะสนับสนุนไวยากรณ์ที่เยื้องเข้าไป ไฟล์ในไวยากรณ์ที่เยื้องใช้ส่วนขยาย. sass

SASS เป็นภาษาตีความที่แยกออกจาก CSS โครงสร้างของ Sass ดูเหมือน CSS (จากระยะไกล) แต่สำหรับฉันแล้วดูเหมือนว่าคำอธิบายจะทำให้เข้าใจผิดเล็กน้อย มันไม่ได้เปลี่ยนสำหรับ CSS หรือส่วนขยาย มันเป็นล่ามที่ถ่มน้ำลาย CSS ในที่สุดดังนั้น Sass ยังคงมีข้อ จำกัด ของ CSS ปกติ แต่มันปิดบังพวกมันด้วยรหัสง่าย ๆ

ความแตกต่างพื้นฐานคือไวยากรณ์ ในขณะที่ SASS มีไวยากรณ์หลวมที่มีช่องว่างและไม่มีเครื่องหมายอัฒภาค SCSS จะคล้ายกับ CSS มากขึ้น

SASS ย่อมาจาก Syntactically Awesome StyleSheets มันเป็นส่วนเสริมของ CSS ที่เพิ่มพลังและความสง่างามให้กับภาษาพื้นฐาน SASS ได้รับการตั้งชื่อใหม่เป็น SCSS พร้อมบางบท แต่ SASS อันเก่าก็มีเช่นกัน ก่อนที่คุณจะใช้ SCSS หรือ SASS โปรดดูความแตกต่างด้านล่าง

ตัวอย่างของไวยากรณ์ SCSS และ SASS บางส่วน:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

CSS เอาต์พุตหลังจากการคอมไพล์ (เหมือนกันสำหรับทั้งคู่)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

สำหรับคำแนะนำเพิ่มเติมที่คุณสามารถมองเห็นอย่างเป็นทางการของเว็บไซต์

Sass เป็นคนแรกและไวยากรณ์แตกต่างกันเล็กน้อย ตัวอย่างเช่นรวมถึง mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass ไม่สนใจวงเล็บปีกกาและอัฒภาคและวางบนรังซึ่งฉันพบว่ามีประโยชน์มากกว่า

ความแตกต่างระหว่างบทความSASS และ SCSSอธิบายความแตกต่างของรายละเอียด อย่าสับสนกับตัวเลือก SASS และ SCSS แม้ว่าตอนแรกฉันจะเป็น. scss คือ Sassy CSS และเป็นรุ่นต่อไปของ. sss

หากไม่เหมาะสมคุณสามารถเห็นความแตกต่างในรหัสด้านล่าง

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

ในรหัสข้างต้นเราใช้; เพื่อแยกการประกาศ ฉันยังได้เพิ่มการประกาศทั้งหมดสำหรับ. order ไปยังบรรทัดเดียวเพื่อแสดงจุดนี้เพิ่มเติม ในทางตรงกันข้ามรหัส SASS ด้านล่างจะต้องอยู่ในบรรทัดที่แตกต่างกันด้วยการเยื้องและไม่มีการใช้;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

คุณสามารถเห็นได้จาก CSS ด้านล่างว่าสไตล์ SCSS นั้นคล้ายกับ CSS ปกติมากกว่า SASS แบบเก่า

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

ฉันคิดว่าส่วนใหญ่ในวันนี้ถ้ามีคนกล่าวว่าพวกเขากำลังทำงานกับ Sass พวกเขาหมายถึงการเขียนใน. scss มากกว่าวิธีการทางประเพณี

ต้นฉบับsassมีลักษณะเหมือนทับทิมคล้ายกับทับทิมหยก ฯลฯ ...

ในซินแท็กซ์เหล่านั้นเราไม่ได้ใช้{}แทนการใช้ช่องว่างสีขาวและไม่มีการใช้;...

ในซินscssแท็กซ์มีลักษณะคล้ายกันมากกว่าCSSแต่ด้วยตัวเลือกเพิ่มเติมเช่น: การทำรังการประกาศ ฯลฯ คล้ายกับlessและการประมวลผลล่วงหน้าอื่น ๆCSS...

พวกเขาโดยทั่วไปทำสิ่งเดียวกัน แต่ฉันใส่คู่สายของแต่ละคนที่จะเห็นความแตกต่างไวยากรณ์ดูที่{}, ;และspaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

คำตอบที่กะทัดรัด:

SCSS หมายถึงไวยากรณ์หลักสนับสนุนโดย Sass CSS ก่อนประมวลผล

• ไฟล์ที่ลงท้ายด้วย.scssแสดงถึงไวยากรณ์มาตรฐานที่ Sass รองรับ SCSS เป็นชุดของ CSS
• ไฟล์ที่ลงท้ายด้วย.sassแสดงถึงไวยากรณ์ "เก่ากว่า" ที่ Sass สนับสนุนในโลกทับทิม

SASS เป็นสไตล์ชีตที่น่ากลัวและเป็นส่วนขยายของ CSS ซึ่งให้คุณสมบัติของกฎที่ซ้อนกัน, การสืบทอด, Mixins ในขณะที่ SCSS คือ Sassy Cascaded Style Sheets ที่คล้ายกับ CSS และเติมช่องว่างและความไม่ลงรอยกันระหว่าง CSS และ SASS มันได้รับใบอนุญาตภายใต้ใบอนุญาต MIT บทความนี้มีความแตกต่างเพิ่มเติมเกี่ยวกับ: https://www.educba.com/sass-vs-scss/