Sass Tutorial สร้าง vCard ออนไลน์ด้วย Sass & Compass
วันนี้เราจะพูดคุยเรื่อง Sass ต่อไปและนี่จะเป็นส่วนสุดท้ายของซีรี่ส์ Sass ของเรา เวลานี้แทนที่จะเป็นวิธีการทางทฤษฎีนี่จะเป็นประโยชน์มากกว่า เราจะสร้าง vCard ออนไลน์โดยใช้ Sass พร้อมกับเข็มทิศ.
แนวคิดก็คือ vCard ควรปรับได้ง่ายสำหรับสีและขนาด ในกระบวนการนี้เราจะใช้คุณสมบัติ Sass และเข็มทิศบางอย่างเช่น ตัวแปร, Mixins, การดำเนินการ, ตัวเลือกของมรดก, กฎซ้อน และ ผู้ช่วยเข็มทิศ. หากคุณพลาดโพสต์ก่อนหน้าของเราจากซีรีส์นี้เราขอแนะนำให้คุณดูพวกเขาก่อนที่จะดำเนินการต่อ.
การวางแผนและการวางลวด
เมื่อทำงานกับ Sass และ Compass, การวางแผนเป็นสิ่งจำเป็น. โดยทั่วไปเราต้องมีภาพรวมว่าผลลัพธ์สุดท้ายของเรา (เช่นหน้าเว็บหรือเว็บไซต์) เป็นอย่างไร มันจะมีประโยชน์ในการเรียกดูบางเว็บไซต์เช่น Behance หรือ Dribbble สำหรับแนวคิด จากนั้นเราสามารถร่างแนวคิดลงบนกระดาษหรือสร้างเป็นโครงร่างเช่นตัวอย่างด้านล่าง.
ดังที่คุณเห็นจากภาพด้านบน vCard ของเรามี ข้อมูลติดต่อ about 'John' - โปรไฟล์รูปภาพข้อมูลเกี่ยวกับ John เช่นชื่อของเขาที่อยู่อีเมลหมายเลขโทรศัพท์และคำอธิบายสั้น ๆ เกี่ยวกับว่าเขาเป็นใครหรือทำอะไร นั่นจะเป็นส่วน 'ชีวภาพ' ของเรา.
ด้านล่างคืออัตลักษณ์ทางสังคมของเขาในรูปแบบของปุ่มโซเชียล นี่จะเป็นส่วน 'สังคม' ของเรา.
การเตรียมสินทรัพย์
ก่อนที่เราจะเริ่มเขียนโค้ดต่อไปนี้เป็นสิ่งสำคัญที่จะต้องเตรียมพร้อม ฉันรวบรวมสิ่งนั้นโดยตอนนี้คุณควรติดตั้ง Sass และ Compass ในเครื่องของคุณ.
(หากคุณไม่แน่ใจว่าติดตั้งไว้หรือไม่คุณสามารถเรียกใช้คำสั่งนี้ได้ sass -v
หรือ เข็มทิศ -v
ตลอด Command Prompt หรือ Terminal หรือคุณสามารถใช้แอปพลิเคชันเช่นแอป Scout ได้ตลอดเวลาหากคุณต้องการทำงานกับ GUI)
นอกจากนี้เรายังต้องการเนื้อหาบางส่วนเช่นไอคอนแบบอักษรและไอคอนโซเชียลมีเดียซึ่งคุณสามารถรับได้จากสถานที่เช่น ModernPictograms.
สุดท้ายเนื่องจากเรากำลังใช้ Command Prompt / Terminal สำหรับบทช่วยสอนนี้เราจำเป็นต้องนำทางไปยังไดเรกทอรีของเราและเรียกใช้โครงการ Compass ด้วยคำสั่งสองคำนี้: เข็มทิศ init
และ นาฬิกาเข็มทิศ
.
HTML Markup
ด้านล่างคือมาร์กอัพ HTML ของ vCard ของเราตรงไปตรงมา ทุกส่วนถูกห่อด้วยแท็ก HTML5 แบบลอจิคัล .
- Thoriq Firdaus
- [email protected]
- (+62) 1.2345.678.9
- Lorem ipsum dolor sit amet, consetetur adipiscing elit. Suspendisse dque neque, eleifend ที่ pellentesque quis, ในขณะที่เธอนั่งอยู่กับที่ Etiam et auctor arcu.
ดังที่คุณเห็นด้านบนอัตลักษณ์ทางสังคมที่รวมอยู่ใน 'สังคม'ส่วนมีโครงสร้างภายในองค์ประกอบรายการเพื่อให้เราสามารถแสดงได้แบบคู่ขนาน แต่ละคนจะได้รับชื่อชั้นตามอนุสัญญานี้ สังคม Facebook
, สังคมทวิตเตอร์
, สังคม-google
และอื่น ๆ.
การกำหนดค่าเข็มทิศ
เราต้องกำหนดค่าเข็มทิศสักครู่โดยไม่ใส่เครื่องหมายความคิดเห็นสองสามบรรทัด config.rb
ไฟล์ดังต่อไปนี้:
# คุณสามารถเลือกรูปแบบการแสดงผลที่คุณต้องการได้ที่นี่ (สามารถเขียนทับผ่านบรรทัดคำสั่ง): output_style =: ส่วนขยาย # เมื่อต้องการเปิดใช้งานเส้นทางสัมพัทธ์กับสินทรัพย์ผ่านฟังก์ชั่นตัวช่วยเข็มทิศ Uncomment: relative_assets = true # เพื่อปิดใช้งานการดีบักความคิดเห็นที่แสดงตำแหน่งดั้งเดิมของตัวเลือกของคุณ Uncomment: line_comments = false
หากคุณไม่สามารถหา config.rb
ไฟล์คุณอาจยังไม่ได้รันคำสั่งนี้ เข็มทิศ init
ในไดเรกทอรีโครงการของคุณ.
การนำเข้าไฟล์
เนื่องจากเราจะใช้เข็มทิศเราจึงจำเป็นต้องนำเข้าโดยใช้
@ นำเข้า "เข็มทิศ";
และเป็นความชอบส่วนตัวของฉันในการรีเซ็ตรูปแบบเริ่มต้นจากเบราว์เซอร์เพื่อให้การแสดงผลมีความสม่ำเสมอยิ่งขึ้น เข็มทิศในกรณีนี้มีโมดูลรีเซ็ต โมดูลนี้ขึ้นอยู่กับการรีเซ็ต CSS ของ Eric Meyer และสามารถนำเข้าโดยใช้;
@import "compass / reset";
อย่างไรก็ตามฉันชอบใช้ Normalize ที่ขอบคุณ ยังมาในรูปแบบ Sass / Scss. ดาวน์โหลดไฟล์ที่นี่บันทึกไว้ เขื่อง
ไดเรกทอรีการทำงานและนำเข้ามาในสไตล์ชีทของเรา.
@import "normalize";
อ่านหนังสือที่แนะนำ: การตรวจสอบระดับความสำคัญของ CSS สไตล์
ตัวแปร
เราจะมีค่าคงที่บางอย่างในสไตล์ชีทดังนั้นเราจะเก็บไว้ในตัวแปรและตัวแปรทั้งสองด้านล่างจะกำหนดสีพื้นฐานของ vCard ของเรา.
$ base: #fff; $ dark: มืดลง ($ base, 10%);
ในขณะที่ ความกว้าง $
ตัวแปรด้านล่างจะเป็นความกว้างของหน้าของเรา มันจะเป็นพื้นฐานสำหรับการกำหนดขนาดองค์ประกอบอื่น ๆ.
$ width: 500px; $ space: $ width / 25; // = 20px
และ พื้นที่ $
ตัวแปรอย่างที่คุณเห็นจะเป็นระยะห่างเริ่มต้นหรือขนาดคอลัมน์ใน vCard ของเราซึ่งในตัวอย่างนี้จะเป็น 20px
;
เข็มทิศยังมีผู้ช่วยในการตรวจจับขนาดภาพและเราจะใช้ประโยชน์จากคุณสมบัตินี้ในโปรไฟล์ภาพของเราดังต่อไปนี้;
$ img: ความกว้างของภาพ ("me.jpg") + (($ space / 4) * 2);
ความพิเศษ การเพิ่ม ของ (($ space / 4) * 2)
ในรหัสข้างต้นคือการคำนวณความกว้างของภาพรวมรวมถึงเส้นขอบที่จะกรอบภาพ เฟรมโดยทั่วไปมีสองด้าน ด้านบนและด้านล่าง / ซ้ายและขวา, นั่นคือเหตุผลที่เราคูณ ผลการหาร โดย 2
.
ตัวเลือกการสืบทอด
เห็นได้ชัดว่ามีตัวเลือกไม่กี่ตัวในสไตล์ชีทของเราที่จะมีกฎการจัดแต่งทรงผมเหมือนกัน เพื่อหลีกเลี่ยงการซ้ำซ้อนในรหัสของเราเราจะต้องระบุสไตล์เหล่านี้ตั้งแต่แรก @extend
คำสั่งเมื่อใดก็ตามที่จำเป็น วิธีการนี้ใน Sass เรียกว่า ตัวเลือกการสืบทอด, คุณสมบัติที่มีประโยชน์มากที่ขาดหายไปใน LESS.
.float-left float: left; .box-sizing @ รวมขนาดกล่อง (ชายแดนกล่อง);
รูปแบบ
เมื่อสิ่งที่จำเป็นได้รับการติดตั้งแล้วก็ถึงเวลาที่จะจัดรูปแบบ vCard ของเราโดยเริ่มจากสีพื้นหลังไปยังเอกสาร HTML ของเรา
html height: 100%; พื้นหลังสี: $ ฐาน;
vCard
รูปแบบต่อไปนี้กำหนดตัวคลุม vCard หากคุณเคยทำงานกับ LESS มาก่อนหน้านี้รหัสนี้จะคุ้นเคยกับคุณและย่อยง่าย.
.vcard width: $ width; กำไร: อัตโนมัติ 50px; พื้นหลังสี: มืดลง ($ ฐาน 5%); เส้นขอบ: 1px แข็ง $ dark; @ รวมเส้นขอบรัศมี (3px) ul padding: 0; กำไรขั้นต้น: 0; li list-style: none;
ความกว้างของ wrapper รับค่าจาก ความกว้าง $
ตัวแปร. สีพื้นหลังเข้มขึ้น 5%
จากสีพื้นฐานในขณะที่สีเส้นขอบจะเข้มขึ้น 10%
. สีนี้สามารถทำได้โดยใช้ฟังก์ชั่นสี Sass.
vCard ก็จะมีเช่นกัน 3PX
รัศมีของมุมโค้งมนที่สามารถทำได้โดยใช้ Compass CSS3 Mixins; border-radius (3PX)
.
แผนกชีวภาพ
ดังที่เราได้กล่าวถึงในตอนต้นของบทช่วยสอนนี้ vCard สามารถแบ่งออกเป็นสองส่วน สไตล์ที่ซ้อนกันด้านล่างนี้จะกำหนดส่วนแรกที่มีโปรไฟล์รูปภาพพร้อมรายละเอียดเล็กน้อย (ชื่ออีเมลและโทรศัพท์).
.ชีวภาพ border-bottom: 1px solid $ dark; การขยาย: $ space; @extend .box-sizing; img @extend .float-left; จอแสดงผล: บล็อก; เส้นขอบ: ($ space / 4) solid #ffffff; .detail @extend .float-left; @extend .box-sizing; สี: มืดลง ($ ฐาน 50%); ชายขอบ: ซ้าย: $ space; ด้านล่าง: $ space / 2; width: $ width - (($ space * 3) + $ img); li &: ก่อนหน้า width: $ space; ความสูง: $ space; ระยะขอบขวา: $ space; แบบอักษรตระกูล: "ModernPictogramsNormal"; & .name: ก่อนหน้า เนื้อหา: "f"; & .email: ก่อนหน้า content: "m"; & .phone: ก่อนหน้า เนื้อหา: "N";
มีสิ่งหนึ่งจากรหัสด้านบนที่เราคิดว่าคุณต้องแจ้งให้ทราบล่วงหน้า ความกว้างใน .รายละเอียด
ตัวเลือกถูกระบุด้วยสมการนี้ $ width - (($ space * 3) + $ img);
.
สมการนี้ใช้ในการคำนวณรายละเอียดแบบไดนามิก ความกว้าง
โดยการลบความกว้างของโปรไฟล์ภาพและช่องว่าง (การขยายและเว้นระยะห่าง) จากความกว้างทั้งหมดของ vCard.
หมวดสังคม
ลักษณะด้านล่างใช้สำหรับส่วนที่สองใน vCard จริงๆแล้วมันไม่มีความแตกต่างกับ CSS ธรรมดา ๆ ที่นี่ตอนนี้มันซ้อนกันและค่าบางค่าถูกกำหนดด้วยตัวแปร.
.โซเชียล background-color: $ dark; ความกว้าง: 100%; การขยาย: $ space; @extend .box-sizing; ul text-align: center; li display: inline-block; ความกว้าง: 32px; ความสูง: 32px; a ตกแต่งข้อความ: ไม่มี; จอแสดงผล: บล็อกแบบอินไลน์; ความกว้าง: 100%; ความสูง: 100%; เยื้องข้อความ: 100%; พื้นที่สีขาว: nowrap; ล้น: ซ่อนอยู่;
ในส่วนนี้เราจะแสดงไอคอนโซเชียลมีเดียโดยใช้เทคนิคสไปรต์รูปภาพและเข็มทิศมีคุณสมบัติในการทำงานให้เร็วขึ้น.
ก่อนอื่นเราต้องใส่ไอคอนของเราในโฟลเดอร์พิเศษ - ลองตั้งชื่อโฟลเดอร์ก่อน /สังคม/, ตัวอย่างเช่น. กลับไปที่สไตล์ชีตเชื่อมไอคอนเหล่านั้นเข้าด้วยกันดังต่อไปนี้ @import
กฎ.
@ นำเข้า "social / *. png";
สังคม/
ด้านบนอ้างถึงโฟลเดอร์ที่เราจัดเก็บไอคอน โฟลเดอร์นี้ควรซ้อนอยู่ในโฟลเดอร์รูปภาพ ทีนี้ถ้าเราดูในโฟลเดอร์รูปภาพของเราเราจะเห็นภาพสไปรต์ที่สร้างด้วยตัวอักษรแบบสุ่มเช่น สังคม sc805f18607.png. ณ จุดนี้ไม่มีอะไรเกิดขึ้นที่ front-end จนกว่าเราจะใช้สไตล์กับบรรทัดต่อไปนี้.
@ รวมทุกสังคมสไปรต์;
ผลสุดท้าย
ในที่สุดหลังจากการทำงานหนักทั้งหมดเราสามารถเห็นผลลัพธ์ดังนี้:
ในกรณีที่เราคิดว่า 500px
กว้างเกินไปในภายหลังเราจะต้องเปลี่ยนค่าใน ความกว้าง $
ตัวแปร - ตัวอย่างเช่น, 350px
- ส่วนที่เหลือจะ “อย่างน่าอัศจรรย์” จะถูกปรับ คุณยังสามารถทดลองกับตัวแปรสี.
- ดูการสาธิต
- แหล่งดาวน์โหลด
ข้อสรุป
ในบทช่วยสอนนี้เราได้แสดงวิธีสร้าง vCard ออนไลน์ง่ายๆด้วย Sass และ Compass; นี่เป็นเพียงตัวอย่างเท่านั้น Sass และ Compass นั้นทรงพลังอย่างแน่นอน แต่บางครั้งก็ไม่จำเป็น ตัวอย่างเช่นเมื่อเรากำลังทำงานบนเว็บไซต์ที่มีหน้าไม่กี่หน้าและอาจจะต้องการสไตล์ที่น้อยลงการใช้ Sass และ Compass ก็ถือว่ามากเกินไป.
โพสต์นี้จะปิดซีรี่ส์ Sass ของเราและเราหวังว่าคุณจะสนุกกับมัน หากคุณมีคำถามเกี่ยวกับหัวข้อนี้อย่าลังเลที่จะเพิ่มลงในช่องแสดงความคิดเห็นด้านล่าง.