Preprocessor CSS: ภาพรวมการเลือกแอพลิเคชัน

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

วิธีทำ CSS preprocessor

เพื่อทำความเข้าใจลักษณะของเทคโนโลยีนี้สั้น ๆ เจาะลึกประวัติศาสตร์ของการนำเสนอภาพของหน้าเว็บ

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

ในปี 1994 นักวิทยาศาสตร์นอร์เวย์Håkonโกหกพัฒนาแผ่นลักษณะที่สามารถนำมาใช้สำหรับการปรากฏตัวของหน้าเว็บที่แยกต่างหากจาก HTML เอกสาร สมาชิกคิด priglanulas ของ W3C ที่ตั้งทันทีที่ออกจะเสร็จสิ้น ไม่กี่ปีต่อมาเขาได้รับการตีพิมพ์รุ่นแรกของสเปคแบบ CSS จากนั้นเธอได้รับการปรับปรุงอย่างต่อเนื่อง, การสรุปแนวคิด ... แต่ยังคงอยู่เหมือนกันทั้งหมด: แต่ละรูปแบบการตั้งค่าคุณสมบัติบางอย่าง

โดยใช้ตาราง CSS ได้เสมอที่มีปัญหา ยกตัวอย่างเช่นนักออกแบบเว็บมักจะมีปัญหากับการเรียงลำดับและการจัดกลุ่มคุณสมบัติและมรดกไม่ง่ายดังนั้น

และแล้วก็มาถึง 2000 เครื่องหมายมีมากขึ้นเริ่มที่จะมีส่วนร่วมในการพัฒนา front-end มืออาชีพซึ่งเป็นสิ่งสำคัญที่จะมีความยืดหยุ่นและแบบไดนามิกรูปแบบการทำงาน อยู่ในตำแหน่งที่เรียกร้องเวลา CSS คำนำหน้าและการติดตามสนับสนุนความสามารถใหม่ของเบราว์เซอร์ จากนั้นโดย JavaScript และผู้เชี่ยวชาญทับทิมได้ลงไปที่ธุรกิจสร้าง preprocessor - คอนเทนเนอร์สำหรับ CSS, คุณสมบัติใหม่ที่เพิ่มลงไป

CSS สำหรับมือใหม่: คุณสมบัติ preprocessor

พวกเขามีฟังก์ชั่นหลาย

• รวมคำนำหน้าเบราว์เซอร์และสีกากี;

• ลดความซับซ้อนของไวยากรณ์;

• ให้โอกาสในการทำงานร่วมกับตัวเลือกที่ซ้อนกันไม่มีข้อผิดพลาด;

• ปรับปรุงการจัดแต่งทรงผมตรรกะ

ในระยะสั้น: พรีโพรเซสเซอร์เพิ่มความสามารถในการเขียนโปรแกรมตรรกะ CSS ตอนนี้จัดแต่งทรงผมจะไม่ดำเนินการในรายการปกติของรูปแบบและมีเทคนิคง่ายๆไม่กี่และวิธีการ: ตัวแปรฟังก์ชัน hagfish เงื่อนไขรอบ นอกจากนี้ความสามารถในการใช้คณิตศาสตร์

เห็นความนิยมของเหล่า Add-in ที่ W3C ได้เริ่มต้นที่จะค่อยๆเพิ่มความเป็นไปได้ของพวกเขาในโค้ด CSS ยกตัวอย่างเช่นในสเปคเพื่อให้มีฟังก์ชั่น Calc () ซึ่งได้รับการสนับสนุนจากเบราว์เซอร์จำนวนมาก มันเป็นที่คาดว่าเร็ว ๆ นี้มันจะเป็นไปได้ที่จะตั้งค่าตัวแปรและสร้าง hagfish แต่นี้จะเกิดขึ้นในอนาคตไกลและ preprocessors ที่นี่แล้วและทำงานได้ดีอยู่แล้ว

preprocessors นิยม CSS Sass

ได้รับการออกแบบในปี 2007 แต่เดิมเป็นส่วนประกอบ Haml - แม่แบบ HTML คุณสมบัติใหม่สำหรับการควบคุมองค์ประกอบ CSS ชอบนักพัฒนาใน Ruby on Rails ซึ่งเริ่มที่จะแพร่กระจายมันทุกที่ Sass จำนวนมากของคุณสมบัติที่มีอยู่ในขณะนี้ใน preprocessor ใดตัวแปรฝังเตอร์ hagfish (แล้ว แต่ข้อโต้แย้งเหล่านี้ไม่สามารถที่เพิ่มขึ้น)

ประกาศตัวแปรใน Sass

ประกาศตัวแปรที่มีสัญลักษณ์ที่ $ พวกเขาสามารถรักษาคุณสมบัติและชุดของพวกเขาตัวอย่างเช่น: "$ borderSolid: สีแดง 1px ของแข็ง" ในตัวอย่างนี้เราประกาศตัวแปรที่เรียกว่า borderSolid และบันทึกไว้ค่าสีแดง 1px ของแข็ง ตอนนี้ถ้าใน CSS ที่เราจำเป็นต้องสร้างความกว้างขอบสีแดงของ 1px เพียงแค่แสดงให้เห็นว่าหลังจากที่ตัวแปรชื่อคุณสมบัติ หลังจากการประกาศของตัวแปรที่ไม่สามารถเปลี่ยนแปลงได้ มีหลายฟังก์ชั่นที่มี ยกตัวอย่างเช่นการประกาศตัวแปรที่มีค่าของ $ redcolor # FF5050 ขณะนี้ในโค้ด CSS ในคุณสมบัติขององค์ประกอบใด ๆ ที่ใช้ในการตั้งค่าสีตัวอักษร: p {สี: $ redColor; } คุณต้องการที่จะทดลองกับสี? ใช้ฟังก์ชั่นมืดหรือแบ่งเบา นี้จะกระทำเพื่อให้: p {สี: สีมืด ($ redColor 20%); } เป็นผลให้ redColor สีจะเบากว่า 20%

Sass หลายฟังก์ชั่นในตัว มูลค่าอย่างน้อยอ่านพวกเขา แต่ที่ดีกว่า - การเรียนรู้

การทำรัง

ก่อนหน้านี้จะบ่งบอกถึงการทำรังมีการใช้การออกแบบที่ยาวและอึดอัด ลองนึกภาพว่าเรามี div ซึ่งเป็นพีและในนั้นในการเปิดการตั้งค่าช่วง สำหรับ div ที่เราจำเป็นต้องตั้งค่าสีตัวอักษรสีแดงสำหรับพี - สีเหลืองสำหรับช่วง - สีชมพู ใน CSS ทั่วไปมันจะทำได้ดังนี้

div {

สี: สีแดง;

}

div P {

สี: สีเหลือง;

}

ช่วง div P {

สี: สีชมพู

}

ด้วย CSS preprocessor ทั้งหมดกลายเป็นเรื่องง่ายและมีขนาดกะทัดรัดมากขึ้น:

div {

สี: สีแดง;

P {

สี: สีเหลือง;

.span {

สี: สีชมพู

}

}

}

องค์ประกอบตัวอักษร "ลงทุน" อีกคนหนึ่ง

สั่ง preprocessor

การใช้คำสั่ง @import สามารถนำเข้าไฟล์ ตัวอย่างเช่นเรามีแฟ้ม fonts.sass ที่ประกาศรูปแบบสำหรับแบบอักษร เชื่อมต่อไปยังแฟ้ม style.sass หลัก: @import 'อักษร' ทำ! แทนที่จะเป็นไฟล์เดียวขนาดใหญ่ที่มีรูปแบบที่เรามีไม่กี่คนที่สามารถนำมาใช้สำหรับการเข้าถึงง่ายและรวดเร็วในการคุณสมบัติที่จำเป็น

hagfish

หนึ่งในความคิดที่น่าสนใจที่สุด จะช่วยให้เส้นหนึ่งที่จะถามชุดของคุณสมบัติ ดำเนินการดังต่อไปนี้:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: หนา;

}

hagfish นำไปใช้กับองค์ประกอบบนหน้าเว็บใช้ @include สั่ง ตัวอย่างเช่นเราต้องการที่จะนำไปใช้กับส่วนหัว h1 เรามีโครงสร้างต่อไปนี้: h1 {@include: largeFont; }

คุณสมบัติทั้งหมดของ hagfish ที่ได้รับมอบหมายเป็นองค์ประกอบ h1

preprocessor น้อย

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

ตัวแปรที่มีการประกาศใช้สัญลักษณ์ @ ตัวอย่างเช่น: @fontSize: 14px; รังงานบนหลักการเช่นเดียวกับใน Sass hagfish จะมีการประกาศดังต่อไปนี้: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: หนา; } ในการเชื่อมต่อก็ไม่จำเป็นที่จะใช้คำสั่ง preprocessor - เพียงแค่เพิ่ม hagfish ที่สร้างขึ้นใหม่ในคุณสมบัติขององค์ประกอบที่เลือก ตัวอย่างเช่น h1 {.largeFont; }

เหล็กจาร

preprocessor อีก สร้างขึ้นในปี 2011 โดยนักเขียนคนเดียวกันที่ทำให้โลกหยก Express และผลิตภัณฑ์ที่มีประโยชน์อื่น ๆ

ตัวแปรสามารถประกาศในสองวิธี - ทั้งชัดเจนหรือโดยปริยาย ตัวอย่างเช่นตัวอักษร = 'Times New Roman'; - ตัวเลือกโดยปริยาย แต่ตัวอักษร $ = 'Times New Roman' - ชัดเจน hagfish มีการประกาศและเชื่อมต่อโดยปริยาย ไวยากรณ์เป็นดังนี้ redColor () สีแดง ตอนนี้เราสามารถเพิ่มรายการตัวอย่างเช่น: redColor h1 ();

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

อะไร preprocessor เลือก?

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

• ถ้าคุณ - โปรแกรมเมอร์และต้องการที่จะทำงานร่วมกับทั้งสองรูปแบบในรหัสใช้ Sass;
• ถ้าคุณ - coder และต้องการที่จะทำงานที่มีรูปแบบเช่นเดียวกับรูปแบบเดิมให้ความสนใจกับน้อย;
• ถ้าคุณชอบ minimalism ใช้สไตลัส

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