สไตล์ไซต์โดยใช้ Sass

คุณสามารถทำอะไรได้มากกับ CSS - บางทีมากกว่าที่คุณคิด - แต่ภาษาชีสไตล์ที่น่าเคารพนับถือมีข้อ จำกัด ในโครงการเว็บที่ทันสมัยพร้อมโมดูล NPM, กรอบ JavaScript, ES6 และอื่น ๆ มันสามารถรู้สึกถึงความผิดปกติที่จะถอยกลับเพื่อเขียน Vanilla CSS

โชคดีที่มีตัวเลือกที่นั่นซึ่งอนุญาตให้คุณใช้ภาษาอื่นที่รวบรวมเป็น CSS เรียกว่า 'preprocessors' เครื่องมือเหล่านี้รวมอยู่ในกระบวนการสร้างเว็บของคุณและสร้างสไตล์สไตล์ที่ใช้งานได้จากภาษานามสกุลที่คุณเลือก

SASS (Systactically Style Style Sheets) เป็นหนึ่งในตัวเลือกเหล่านี้ที่ได้รับความนิยมมากที่สุด - อ่านเพิ่มเติมกับไกด์ของเรา Sass คืออะไร SASS เพิ่มคุณสมบัติภาษาใหม่ที่มีค่ามากมายที่ไม่มี (ปัจจุบัน) ที่มีอยู่ใน CSS เพื่อช่วยให้เว็บไซต์ของคุณและแอปบำรุงรักษามากขึ้น สิ่งเหล่านี้รวมถึงสิ่งต่าง ๆ เช่น Mixins and Control Directives ซึ่งเสียงน่ากลัว แต่จริง ๆ แล้วค่อนข้างตรงไปตรงมาและเราจะดูสิ่งเหล่านี้ในบทช่วยสอนนี้ หากคุณต้องการให้สิ่งต่าง ๆ ง่ายขึ้นคุณสามารถใช้งานได้ สร้างเว็บไซต์ .

• แอนิเมชั่น CSS สุดเท่ที่จะสร้างใหม่

จริงๆแล้วมีสองไวยากรณ์ที่แตกต่างกันสำหรับ SASS ซึ่งใช้นามสกุลไฟล์ .scss และหนึ่งที่ใช้ .Sass อดีตดูเหมือน CSS (ในความเป็นจริงไฟล์. css ทั้งหมดเป็นไฟล์. scs ที่ถูกต้อง) ในขณะที่หลังกำจัดวงเล็บและอัฒภาคของ CSS ในความโปรดปรานของการเยื้องและเส้นไฟนวัตกรรม เราจะมุ่งเน้นไปที่ .scss แต่ทางเลือกเป็นเพียงการตั้งค่าส่วนตัว อัพเกรดเว็บไซต์ของคุณ? ตรวจสอบให้แน่ใจของคุณ เว็บโฮสติ้ง บริการทำสิ่งที่คุณต้องการและรับของคุณ การจัดเก็บเมฆ ขวาด้วย

ดาวน์โหลดไฟล์สำหรับบทช่วยสอนนี้ที่นี่ (ปัญหา 282)

01. ตั้งค่าคอมไพเลอร์

การใช้ Sass เป็นหลักต้องใช้คอมไพเลอร์ วิธีที่ง่ายที่สุดในการทำเช่นนี้จะอยู่ที่บรรทัดคำสั่ง คุณสามารถทำได้โดยใช้ Homebrew คอมไพเลอร์ SASS ถูกนำไปใช้ในหลายภาษาและ Homebrew จะติดตั้ง Dart Version ซึ่งรวดเร็ว

brew install sass/sass/sass

02. สร้างไฟล์ SASS

ลองสร้างไฟล์ SASS แบบง่าย ๆ เพื่อดูคอมไพเลอร์ในการดำเนินการ หนึ่งในแนวคิดที่ง่ายที่สุดใน Sass คือตัวแปรซึ่งสามารถระบุได้ครั้งเดียวด้วย เงิน คำนำหน้าแล้วใช้ตลอดรหัสของคุณ เราจะสร้าง sass-input.scss .

 $ ข้อความ - สี: #CCCCCC;
ร่างกาย {
    สี: $ text-color;
} 

03. การรวบรวมบรรทัดคำสั่ง

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

 Sass Sass-Input.scss CSS-output.css 

04. ทำให้การสร้างของคุณเป็นไปโดยอัตโนมัติ

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

 MKDIR SRC
MKDIR SRC / SASS
MKDIR สาธารณะ
MKDIR สาธารณะ / css
Sass - Watch SRC / SASS /: สาธารณะ / css /

05. เล่นกับสไตล์ Sass

ตอนนี้เรามาดูไซต์เริ่มต้นที่เรียบง่ายซึ่งเราสามารถใช้เล่นกับ Sass Styling ได้ เราสามารถเริ่มต้นได้โดยการโคลนไซต์ตัวอย่างที่ไม่หยุดยั้ง สิ่งสำคัญที่ควรทราบคือหน้า HTML ของเราไม่รู้อะไรเกี่ยวกับ Sass มันมีจุดเริ่มต้นไฟล์ CSS เดียวซึ่งเราจะสร้างต่อไป

 ซีดีสาธารณะ
Curl -o index.html https: // ดิบ
githubusercontent.com/simon-a-j/sass-
บทช่วยสอน /
ต้นแบบ / สาธารณะ / index.html 

06. สไตล์หลักหลัก

เรากำลังใช้สไตล์ CSS เป็นจุดเริ่มต้น CSS หลักของเราซึ่งต่อมาเราจะใช้เพื่อนำเข้าโมดูลอื่น ๆ ซึ่งหมายความว่าเราจำเป็นต้องบอก Sass เพื่อสร้างไฟล์นี้ดังนั้นเราจึงต้องสร้างไฟล์ styles.scss ในโฟลเดอร์ SRC / SASS ของเรา หากคุณกำลังทำงาน Sass --Watch เหมือนก่อนหน้านี้จะถูกรวบรวมเป็น CSS โดยอัตโนมัติใน สาธารณะ / css โฟลเดอร์และการรีเฟรชไซต์ของคุณจะแสดงการเปลี่ยนแปลง ลองทำการแก้ไขและรีเฟรชหน้า HTML ในเบราว์เซอร์ตามที่คุณไป

 // สไตล์. SCSS
ร่างกาย {
  ตัวอักษรตระกูล: Sans-Serif;
  จัดเรียงข้อความ: กึ่งกลาง;
}

07. จัดการโทนสี

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

 // _colours.scss
$ color-primary: # 231651;
$ color-sateary: # 2374ab;
$ color-light: # D6FFF6;
$ color-highlight1: # 4dccbd;
$ color-highlight2: # FF8484;

08. ใช้ตัวแปรสี

ในการใช้ตัวแปรสีเหล่านี้เราเพิ่งตั้งค่าเราสามารถบอก Sass เพื่อนำเข้าเนื้อหาของ _colours.scss เป็นแผ่นสไตล์หลักของเรา เราทำสิ่งนี้โดยใช้ @import คำให้การ. เมื่อคุณทำสิ่งนี้แล้วให้สังเกตว่าตัวแปรจะได้รับการแก้ไขภายในไฟล์ CSS เอาต์พุต

 // สไตล์. SCSS
@import "_colours.scss";
ร่างกาย {
  ตัวอักษรตระกูล: Sans-Serif;
  จัดเรียงข้อความ: กึ่งกลาง;
  พื้นหลัง: การไล่ระดับสีเชิงเส้น (155deg,
$ color-primary 70%, $ color-secondary
70%);
  สี: $ color-light;
  ขั้นต่ำความสูง: 100VH;
}
h1 {
    สี: $ color-highlight1;
}
h2 {
  สี: $ color-highlight2;
}

09. สไตล์รัง

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

 A {
  สี: $ Color-Secondary;
}
.Profile-header {
  {
    ขนาดตัวอักษร: 16px;
    Margin-Left: 10px;
    มาร์จิ้นขวา: 10px;
    padding: 10px;
    เส้นขอบรัศมี: 5px;
    สี: $ color-light;
    พื้นหลัง - สี: $ color-secondary;
  }
}

10. ทำกริดตอบสนอง

ตอนนี้เรามาจัดเนื้อหาของเราในรูปแบบกริดที่ตอบสนองได้ SASS มีคุณสมบัติสองประการที่ทำให้การจัดการง่ายขึ้นอย่างมาก รวมถึงการใช้ตัวแปรเพื่อระบุเบรกพอยต์ของเราเราสามารถทำรัง @Media แบบสอบถามภายในสไตล์อื่น ๆ ซึ่งทำให้พฤติกรรมเฉพาะสำหรับขนาดหน้าจออ่านได้มากขึ้น

 $ Breakpoint: 800px;
.Profile-body {
  จอแสดงผล: Flex;
  จัดเรียงรายการ: ยืด;
  แสดงให้เห็นถึงเนื้อหา: พื้นที่รอบ;
  อัตรากำไรขั้นต้น: 32px;
  Margin-Left: 10VW;
  มาร์จิ้นขวา: 10vw;
  @Media Screen และ (ความกว้างสูงสุด:
$ breakpoint) {
      Flex-Direction: คอลัมน์;
  }
}
.Profile-section {
  พื้นหลัง - สี: $ color-highlight1;
  สี: $ color-primary;
  มาร์จิ้น: 16px;
  เส้นขอบรัศมี: 10px;
  ความกว้าง: 340px;
  .Profile-content {
    padding: 20px;
  }
  @Media Screen และ (ความกว้างสูงสุด:
$ breakpoint) {
    ความกว้าง: 100%;
  }
}

11. แนะนำ Mixins

Mixins เป็นอีกคุณสมบัติของ SASS ที่ทรงพลังซึ่งคุณสามารถคิดเป็นวิธีการกำหนดฟังก์ชั่นสไตล์ชีทที่นำกลับมาใช้ใหม่ได้ Mixin ถูกกำหนดไว้หนึ่งครั้งสามารถใช้พารามิเตอร์และสามารถเรียกใช้ได้ทุกที่ในรหัส SASS ของคุณ กรณีการใช้งานหนึ่งสำหรับสิ่งนี้คือการจัดการการเพรฟิกซ์ผู้ขาย หากเราต้องการให้ CSS เปลี่ยนไปทำงานในเบราว์เซอร์รุ่นเก่าสิ่งนี้อาจต้องใช้ -webkit ตัวอย่างสำหรับ Chrome และ Safari เรามานิยามมิสซาที่ดูแลสิ่งนี้ให้เรา

12. Mixins และตัวแปร

นอกจากนี้เรายังสามารถใช้ mixin ที่มีหลายพารามิเตอร์รวมกับตัวแปรบางอย่างที่เรากำหนดเพื่อจัดการกับสไตล์ที่หรูหรามากขึ้นของส่วนต่าง ๆ ของหน้า หากเราสร้าง Mixin ที่กำหนดสีพื้นหน้าและพื้นหลังสิ่งนี้จะช่วยให้เราสามารถเลือกการปรากฏตัวสำหรับส่วนต่าง ๆ จากรายการตัวแปรสไตล์ จำกัด

 $ style1: (เบื้องหน้า: $ color-light,
พื้นหลัง: $ color-sateary);
$ style2: (เบื้องหน้า: $ color-primary,
พื้นหลัง: $ color-highlight1);
$ style3: (เบื้องหน้า: $ color-primary,
พื้นหลัง: $ color-highlight2);
@Mixin Content-Style ($ เบื้องหน้า
$ พื้นหลัง) {
  สี: $ เบื้องหน้า;
  พื้นหลัง - สี: พื้นหลัง $;
} 

13. ใช้ Mixin ใหม่ของคุณ

 .Profile-header {
  {
    @Include Content-Style ($ style1 ... );
    // ...
  }
}
.Profile-section {
    @Include เนื้อหาสไตล์ ($ style2 ... );
  // ...
}

14. เข้าใจการสืบทอด

อีกคุณสมบัติที่ทรงพลังของ SASS คือการสืบทอด ตอนนี้เรามีสองรูปแบบสำหรับลิงก์ในหน้าของเรา หากเราต้องการใช้รูปแบบทั่วไปในทั้งสองแทนที่จะคัดลอกและวาง CSS ทำไมเราไม่ใช้คลาสตัวยึดตำแหน่งแสดงให้เห็นว่า '%' ซึ่งสามารถขยายได้ทั้งสองอย่างทำให้พวกเขาสามารถสืบทอดสไตล์ของมันได้หรือไม่?

% แบ่งปันลิงค์ {
  ขนาดตัวอักษร: 16px;
  Margin-Left: 10px;
  มาร์จิ้นขวา: 10px;
  padding: 10px;
  เส้นขอบรัศมี: 10px;
}

15. ขยายชั้นเรียน

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

 .Profile-header {
  {
    @extend% แบ่งปันลิงค์;
    @Include Content-Style ($ style1 ... );
  }
}
{
  @extend% แบ่งปันลิงค์;
  @Include Content-Style ($ style3 ... );
}

16. ปรับเปลี่ยนชุดรูปแบบ

ตอนนี้เรามาดูกันว่า Sass ง่ายเพียงใดในการแก้ไขชุดรูปแบบของเว็บไซต์ของเรา สีปัจจุบันอาจไม่สมบูรณ์แบบ เราไม่สามารถปรับเปลี่ยนตัวแปรสีได้เท่านั้น แต่นอกจากนี้เรายังสามารถใช้ฟังก์ชั่น SASS เพื่อสร้างสีที่ตรงกับหลักของการเลือกของเรา

 // _colours.scss
$ color-primary: # 2E1F27;
$ color-secondary: Lighten ($ color-primary,
25%);
$ color-light: Lighten ($ color-primary,
75%);
$ color-highlight1:
Lighten (เติมเต็ม ($ color-primary), 50%);
$ color-highlight2:
Lighten (เติมเต็ม ($ color-secondary), 50%);

17. เลือกชุดสีใหม่

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

 $ แดง: สุ่ม (255);
$ Green: สุ่ม (255);
$ blue: สุ่ม (255);
$ color-primary: RGB ($ แดง, $ green, $ blue); 

18. ใช้ไลบรารี

ระบบโมดูลของ Sass ยังทำให้ตรงไปตรงมามากในการใช้ไลบรารีบุคคลที่สามด้วยความพยายามน้อยที่สุดและไม่มีการจัดส่งไฟล์รันไทม์ขนาดใหญ่ไปยังผู้ใช้ปลายทางของคุณ ลองลองไลบรารีขอบมุมที่เราสามารถใช้เพื่อสร้างขอบที่ลาดสำหรับวัตถุในหน้าของเรา

 git clone https://github.com/josephfusco/
Angled-Edges.git SRC / Sass / Angled-Edges

19. ขอบขอบผสมมิกซ์

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

 @import "Angled-edges / _angled-edges.scss";
.Profile-section {
  @Include Angled-edge ("ด้านนอกด้านนอก"
"ขวาล่าง", $ color-highlight1);
  @Include Angled-edge ("ด้านนอกด้านนอก"
"ขวาบน", $ color-highlight1);
  มาร์จิ้น: 120px 16px 120px 16px;
  // ...
}

20. การจัดรูปแบบเอาท์พุท

ลองทำเสร็จด้วยการดูที่เอาท์พุท SASS สร้าง หากคุณติดตามไฟล์ CSS ของคุณตามที่เราได้ทำการเปลี่ยนแปลงคุณจะสังเกตเห็นว่าพวกเขายังอ่านได้ค่อนข้างมาก อย่างไรก็ตามคุณสามารถสร้าง Sass Build CSS แบบย่อซึ่งสามารถอ่านได้น้อยลง แต่ก็พร้อมที่จะจัดส่ง คุณสามารถทำได้โดยใช้ - สไตล์ ธงบรรทัดคำสั่ง

 SASS SRC / SASS /: สาธารณะ / css / - สไตล์
บีบอัด 

21. Sass มากขึ้น

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 282 ของ นักออกแบบเว็บไซต์ . ซื้อ ปัญหา 282 หรือ สมัครสมาชิกที่นี่ .

อ่านเพิ่มเติม:

• 10 เทคโนโลยี CSS ใหม่ที่น่าตื่นตาตื่นใจ
• 3 คุณสมบัติ CSS ใหม่ที่เป็นประกายใหม่ที่จะลองวันนี้
• เว็บไซต์เลื่อน Parallax ที่ยอดเยี่ยม