โฮมเพจ » การเข้ารหัส » Sass Tutorial สร้าง vCard ออนไลน์ด้วย Sass & Compass

    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 ของเราและเราหวังว่าคุณจะสนุกกับมัน หากคุณมีคำถามเกี่ยวกับหัวข้อนี้อย่าลังเลที่จะเพิ่มลงในช่องแสดงความคิดเห็นด้านล่าง.