Sass เป็นตัวประมวลผลล่วงหน้า / ส่วนขยาย CSS ที่ย่อมาจาก Syntactically Awesome StyleSheets ติดตั้งง่าย เพียงพิมพ์npm install -g sassบรรทัดคำสั่ง และตอนนี้คุณสามารถใช้ไฟล์ .scss แทนไฟล์ .css ได้ สิ่งที่ดีเกี่ยวกับไฟล์ .scss ก็คือมันเข้ากันได้กับ C SSดังนั้นคุณจึงไม่ต้องเปลี่ยนแปลงสิ่งที่คุณอาจมีในไฟล์ที่มีอยู่ของคุณ การแปลงเป็นSCSSช่วยให้คุณทำสิ่งต่างๆ ได้มากขึ้น ซึ่งฉันจะอธิบายด้านล่าง

ตัวแปรใน Sass

หากคุณกำลังใช้สีเดียวกันซ้ำแล้วซ้ำอีกในการออกแบบเว็บของคุณ ซึ่งคุณควรจะใช้เพื่อให้มีธีมที่สอดคล้องกัน คุณสามารถตั้งค่าสี ฟอนต์ น้ำหนักฟอนต์ ฯลฯ ให้เป็นตัวแปรได้ คุณสามารถตั้งชื่อตัวแปรบางอย่างเช่นprimary-colorและsecondary-colorหรือmain-fontหรือnavbar-fontว่าคุณถูกจำกัดด้วยจินตนาการและคำศัพท์ของคุณ จากนั้น คุณสามารถใช้ตัวแปรแทนการจำรหัสฐานสิบหกสำหรับสีได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณใช้การไล่ระดับสีหรือออกแบบหน้าเว็บด้วยไฟล์สไตล์ชีตที่มีความยาวหลายร้อยบรรทัด ใน Sass สิ่งนี้ทำได้โดยใช้$สัญลักษณ์เป็นคำนำหน้า

$background: #05b1a8;
$main-font: basic-sans, sans-serif;
$gradient: linear-gradient(45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871)
.home_screen_h1 {
font-family: $main-font;
font-weight: 900;
font-size: 4rem;
background-image: $gradient;
background-size: 400%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: gradient-animation 10s infinite alternate;
}

:root {
--background: #05b1a8;
--main-font: basic-sans, sans-serif;
--gradient: linear-gradient(45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871);}
.home_screen_h1 {
font-family: var(--main-font);
font-weight: 900;
font-size: 4rem;
background-image: var(--gradient);
background-size: 400%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: gradient-animation 10s infinite alternate;
}

การซ้อนสามารถอธิบายได้ดีที่สุดเมื่อกำหนดชายด์ของแท็กหรือคลาสหรือ id ภายในสไตล์ของแท็กนั้น หากฟังดูสับสน ไม่ต้องกังวล มีตัวอย่างด้านล่างที่จะทำให้คุณพูดว่า “โอ้ นั่นคือสิ่งที่เขาหมายถึง” นี่อาจเป็นสิ่งที่ฉันโปรดปรานเกี่ยวกับการใช้ Sass ฉันลองทำสิ่งนี้เมื่อเร็ว ๆ นี้และไม่ทราบว่าฉันกำลังใช้ไฟล์ .css แทน .scss จนกระทั่งฉันไปดูหน้าเว็บของฉันและหน้าเว็บก็สับสนเหมือนฉัน โชคดีที่ทั้งหมดที่ฉันต้องทำคือเปลี่ยนไฟล์เป็น .scss และฉันก็พร้อมใช้ แอปของฉันก็เช่นกัน

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

โปรดสังเกตว่าแท็ก ul, li และ a ซ้อนอยู่ภายในแท็กการนำทาง

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

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

โมดูล

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

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

ในการสร้างมิกซ์อินให้เริ่มต้นด้วย@mixinตามด้วยสิ่งที่คุณต้องการตั้งชื่อมิกซ์อิน มิกซ์อินช่วยให้คุณสร้างการประกาศ CSS ซึ่งคุณสามารถใช้ซ้ำได้ในภายหลัง

CSS

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

ในตัวอย่างด้านล่างมีมิกซ์อินที่ตั้งชื่อธีมรวมถึงตัวแปรของ$theme. โดยพื้นฐานแล้ว สิ่งที่เกิดขึ้นคือมีมิกซ์อินชื่อธีมที่ใช้ในคลาสข้อมูล การแจ้งเตือน และความสำเร็จ ชั้นแรก, ข้อมูล, ใช้สี DarkGray เป็นพื้นหลังของกล่องเงากับสีของ DarkGray ที่มี 25% #fffความทึบแสงและสี คลาสการแจ้งเตือนและความสำเร็จใช้รูปแบบมิกซ์อินของธีมเดียวกันกับพื้นหลัง กล่องเงา และสี แต่แทนที่จะเป็น DarkGray สีจะเป็น DarkRed และ DarkGreen สำหรับคลาสนั้น ๆ

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}