CSS และ SCSS แตกต่างกันอย่างไร

ฉันรู้จัก CSS เป็นอย่างดี แต่สับสนเกี่ยวกับ Sass SCSS แตกต่างจาก CSS อย่างไรและถ้าฉันใช้ SCSS แทน CSS จะทำงานเหมือนกันหรือไม่

นอกเหนือจากคำตอบของIdriss :

CSS

ใน CSS เราเขียนโค้ดเป็นภาพร้องแบบเต็มความยาว

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

ใน SCSS เราสามารถย่อโค้ดนี้โดยใช้ a @mixinเพื่อที่เราจะได้ไม่ต้องเขียนcolorและwidthคุณสมบัติซ้ำแล้วซ้ำอีก เราสามารถกำหนดสิ่งนี้ผ่านฟังก์ชันคล้ายกับ PHP หรือภาษาอื่น ๆ

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

อย่างไรก็ตามใน SASS โครงสร้างทั้งหมดสามารถมองเห็นได้เร็วและสะอาดกว่า SCSS

• มีความไวต่อพื้นที่สีขาวเมื่อคุณใช้การคัดลอกและวาง

• ดูเหมือนว่าจะไม่รองรับ inline CSS ในขณะนี้

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

CSSเป็นภาษาสไตล์ที่เบราว์เซอร์ใด ๆ เข้าใจในการจัดรูปแบบหน้าเว็บ

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

cssมีตัวแปรเช่นกัน คุณสามารถใช้มันได้ดังนี้:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

และน้อยกว่านี้

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

นิยามตัวแปรถูกต้อง:

$      => SCSS, SASS
--     => CSS
@      => LESS

คำตอบทั้งหมดดี แต่คำถามต่างจากคำตอบเล็กน้อย

"เกี่ยวกับ Sass SCSS แตกต่างจาก CSS อย่างไร" : scss เป็นรูปแบบไวยากรณ์CSS3 ที่ดี ใช้ตัวประมวลผลล่วงหน้า sass เพื่อสร้างสิ่งนั้น

และถ้าฉันใช้ SCSS แทน CSS มันจะทำงานเหมือนเดิมหรือไม่? ใช่. หากไอเดียของคุณรองรับพรีโปรเซสเซอร์ sass กว่าจะได้ผล

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

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

• ข้อมูลเพิ่มเติมเกี่ยวกับ:

พรีโปรเซสเซอร์ CSS คืออะไร?

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

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

ต่อไปในบทความนี้เราจะมาดูตัวประมวลผล CSS ที่ได้รับความนิยมมากที่สุด 3 ตัวในปัจจุบันที่นักพัฒนาทั่วโลกใช้ ได้แก่ Sass, LESS และ Stylus ก่อนที่คุณจะตัดสินผู้ชนะระหว่าง Sass vs LESS vs Stylus ให้เราทำความรู้จักกับพวกเขาโดยละเอียดก่อน

Sass - สไตล์ชีทที่ยอดเยี่ยม

Sass เป็นคำย่อของ“ Syntactically Awesome Style Sheets” Sass ไม่เพียง แต่เป็นตัวประมวลผล CSS ที่ได้รับความนิยมมากที่สุดในโลก แต่ยังเป็นหนึ่งในตัวประมวลผลที่เก่าแก่ที่สุดซึ่งเปิดตัวในปี 2549 โดย Hampton Catlin และพัฒนาต่อมาโดย Natalie Weizenbaum แม้ว่า Sass จะเขียนด้วยภาษา Ruby แต่ Precompiler LibSass อนุญาตให้แยกวิเคราะห์ Sass เป็นภาษาอื่นและแยกออกจาก Ruby Sass มีชุมชนที่ใช้งานอยู่ขนาดใหญ่และแหล่งการเรียนรู้มากมายบนอินเทอร์เน็ตสำหรับผู้เริ่มต้น ด้วยความเป็นผู้ใหญ่ความมั่นคงและความกล้าหาญเชิงตรรกะที่ทรงพลัง Sass ได้สร้างตัวเองให้อยู่ในระดับแนวหน้าของ CSS Preprocessor ก่อนคู่แข่ง

Sass สามารถเขียนได้ 2 ไวยากรณ์โดยใช้ Sass หรือ SCSS อะไรคือความแตกต่างระหว่างทั้งสอง? มาหาคำตอบกัน

การประกาศไวยากรณ์: Sass vs SCSS

• SCSS ย่อมาจาก Sassy CSS ไม่เหมือนกับ Sass SCSS ไม่ได้ขึ้นอยู่กับการเยื้อง
• ส่วนขยาย. sass ใช้เป็นไวยากรณ์ดั้งเดิมสำหรับ Sass ในขณะที่ SCSS เสนอไวยากรณ์ที่ใหม่กว่าที่มีนามสกุล. scss
• SCSS แตกต่างจาก Sass ตรงที่มีวงเล็บปีกกาและอัฒภาคเช่นเดียวกับ CSS
• ตรงกันข้ามกับ SCSS Sass อ่านยากเนื่องจากค่อนข้างเบี่ยงเบนจาก CSS ด้วยเหตุนี้ SCSS จึงเป็นไวยากรณ์ของ Sass ที่แนะนำมากกว่าเนื่องจากอ่านง่ายกว่าและใกล้เคียงกับ Native CSS ในขณะเดียวกันก็เพลิดเพลินไปกับพลังของ Sass

พิจารณาตัวอย่างด้านล่างด้วยไวยากรณ์ Sass vs SCSS พร้อมกับโค้ด CSS ที่คอมไพล์

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

ในทั้งสองกรณีไม่ว่าจะเป็น Sass หรือ SCSS โค้ด CSS ที่คอมไพล์จะเหมือนกัน -

#box {
      color: #fff;
      background: #00f;

การใช้ Sass

Bootstrap เฟรมเวิร์กส่วนหน้าที่ได้รับความนิยมมากที่สุดถูกเขียนด้วย Sass จนถึงเวอร์ชัน 3 Bootstrap เขียนด้วยภาษา LESS แต่ bootstrap 4 ใช้ Sass และเพิ่มความนิยม บริษัท ใหญ่บางแห่งที่ใช้ Sass ได้แก่ Zapier, Uber, Airbnb และ Kickstarter

น้อย - สไตล์ชีทแบบ Leaner

LESS เป็นคำย่อของ“ Leaner Stylesheets” เปิดตัวในปี 2009 โดย Alexis Sellier 3 ปีหลังจากการเปิดตัว Sass ครั้งแรกในปี 2006 ในขณะที่ Sass เขียนด้วย Ruby แต่ LESS เขียนด้วย JavaScript ในความเป็นจริง LESS เป็นไลบรารี JavaScript ที่ขยายการทำงานของ CSS วานิลลาดั้งเดิมด้วยมิกซ์อินตัวแปรการซ้อนและลูปชุดกฎ Sass vs LESS เป็นประเด็นถกเถียงกันอย่างดุเดือด ไม่แปลกใจเลยที่ LESS เป็นคู่แข่งที่แข็งแกร่งที่สุดของ Sass และมีฐานผู้ใช้มากเป็นอันดับสอง อย่างไรก็ตามเมื่อ bootstrap ทิ้ง LESS เพื่อสนับสนุน Sass ด้วยการเปิดตัว Bootstrap 4 LESS ก็ได้รับความนิยมลดลง ข้อเสียประการหนึ่งของ LESS over Sass คือไม่รองรับฟังก์ชัน ไม่เหมือนกับ Sass ตรงที่ LESS ใช้ @ เพื่อประกาศตัวแปรซึ่งอาจทำให้เกิดความสับสนกับ @media และ @keyframes อย่างไรก็ตาม ข้อได้เปรียบที่สำคัญอย่างหนึ่งของ LESS เหนือ Sass และ Stylus หรือตัวประมวลผลล่วงหน้าอื่น ๆ คือความสะดวกในการเพิ่มเข้าไปในโปรเจ็กต์ของคุณ คุณสามารถทำได้โดยใช้ NPM หรือโดยการรวมไฟล์ Less.js การประกาศไวยากรณ์: LESS ใช้ส่วนขยาย .less ไวยากรณ์ของ LESS ค่อนข้างคล้ายกับ SCSS ยกเว้นสำหรับการประกาศตัวแปรแทนที่จะใช้เครื่องหมาย $ LESS จะใช้ @

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

การใช้งาน LESS เฟรมเวิร์ก Bootstrap ที่เป็นที่นิยมจนถึงการเปิดตัวเวอร์ชัน 4 ถูกเขียนด้วยภาษา LESS อย่างไรก็ตามเฟรมเวิร์กยอดนิยมอื่นที่เรียกว่า SEMANTIC UI ยังคงเขียนเป็น LESS บริษัท ยักษ์ใหญ่ที่ใช้ Sass ได้แก่ - Indiegogo, Patreon และ WeChat

เหล็กจาร

สไตลัสเปิดตัวในปี 2010 โดยอดีตผู้พัฒนา Node JS TJ Holowaychuk เกือบ 4 ปีหลังจากการเปิดตัว Sass และ 1 ปีหลังจากการเปิดตัว LESS สไตลัสเขียน Node JS และเข้ากันได้ดีกับ JS stack สไตลัสได้รับอิทธิพลอย่างมากจากความกล้าหาญเชิงตรรกะของ Sass และความเรียบง่ายของ LESS แม้ว่า Stylus จะยังคงเป็นที่นิยมในหมู่นักพัฒนา Node JS แต่ก็ยังไม่สามารถแบ่งส่วนแบ่งที่มีขนาดใหญ่สำหรับตัวมันเองได้ ข้อดีอย่างหนึ่งของ Stylus เหนือ Sass หรือ LESS คือมีฟังก์ชั่นในตัวที่มีประสิทธิภาพสูงและสามารถจัดการกับคอมพิวเตอร์ขนาดใหญ่ได้

การประกาศไวยากรณ์: Stylus ใช้นามสกุล. styl Stylus มีความยืดหยุ่นอย่างมากในการเขียนไวยากรณ์รองรับ CSS แบบเนทีฟและอนุญาตให้ละเว้นเครื่องหมายทวิภาคและอัฒภาคของวงเล็บ นอกจากนี้โปรดทราบว่า Stylus ไม่ได้ใช้สัญลักษณ์ @ หรือ $ ในการกำหนดตัวแปร แต่ Stylus ใช้ตัวดำเนินการกำหนดเพื่อระบุการประกาศตัวแปร

STYLUS SYNTAX เขียนเหมือน NATIVE CSS

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

หรือ

STYLUS SYNTAX โดยไม่มีวงเล็บปีกกา

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

หรือ

STYLUS SYNTAX โดยไม่มี COLONS และ SEMICOLONS

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color