Sass Tutorial สร้าง vCard ออนไลน์ด้วย Sass & Compass

 
 
  
 
 
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+
 
Dribbble
 
 
 
 

ดังที่คุณเห็นด้านบนอัตลักษณ์ทางสังคมที่รวมอยู่ใน 'สังคม'ส่วนมีโครงสร้างภายในองค์ประกอบรายการเพื่อให้เราสามารถแสดงได้แบบคู่ขนาน แต่ละคนจะได้รับชื่อชั้นตามอนุสัญญานี้ สังคม 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 ของเราและเราหวังว่าคุณจะสนุกกับมัน หากคุณมีคำถามเกี่ยวกับหัวข้อนี้อย่าลังเลที่จะเพิ่มลงในช่องแสดงความคิดเห็นด้านล่าง.