สไตล์ชีทที่ยอดเยี่ยมโดยใช้เข็มทิศใน Sass

ในโพสต์ล่าสุดของเราเราได้พูดถึงเข็มทิศ ตามเว็บไซต์อย่างเป็นทางการก็อธิบายว่า CSS Authoring Framework โอเพนซอร์ซ.

กล่าวโดยย่อ Compass คือส่วนขยาย Sass และเช่นเดียวกับองค์ประกอบน้อยของ LESS มันมี CSS3 Mixins พร้อมใช้งานมากมายยกเว้นมันได้เพิ่มสิ่งอื่น ๆ อีกมากมายที่ทำให้เป็นเครื่องมือสหายที่มีประสิทธิภาพยิ่งกว่าไปยัง Sass ลองดูกัน.

การติดตั้งเข็มทิศ

เข็มทิศเช่น Sass, จะต้องติดตั้งในระบบของเรา. แต่ถ้าคุณใช้แอพพลิเคชั่นเช่น Scout App หรือ Compass.app สิ่งนี้ไม่จำเป็น.

หากไม่มีพวกเขาคุณต้องทำ “ด้วยมือ” ตลอด เทอร์มินัล / พร้อมรับคำสั่ง. โดยพิมพ์บรรทัดคำสั่งต่อไปนี้

บน Mac / Linux Terminal

 เข็มทิศ sudo gem ติดตั้ง 

บนพรอมต์คำสั่งของ Windows

 เข็มทิศติดตั้งเข็มทิศ 

หากการติดตั้งสำเร็จคุณควรได้รับการแจ้งเตือนตามที่แสดงด้านล่าง

จากนั้นรันบรรทัดคำสั่งต่อไปนี้ในไดเรกทอรีการทำงานของคุณเพื่อเพิ่ม ไฟล์โครงการเข็มทิศ.

 เข็มทิศ init 

อ่านเพิ่มเติม: เอกสารคู่มือบรรทัดคำสั่งของเข็มทิศ

การกำหนดค่าเข็มทิศ

หากคุณได้รันคำสั่งนี้ เข็มทิศ init, ตอนนี้คุณควรมีชื่อไฟล์ config.rb ในไดเรกทอรีทำงานของคุณ ไฟล์นี้ใช้เพื่อกำหนดค่าเอาท์พุทโครงการ ตัวอย่างเช่นเราสามารถเปลี่ยนชื่อไดเรกทอรีที่ต้องการ.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

ดึงแถบความคิดเห็นที่สร้างขึ้นโดย Compass เราตั้ง จริง ถ้าเราต้องการความคิดเห็นที่จะพิมพ์หรือ เท็จ ถ้ามันไม่จำเป็นต้อง.

 line_comments = false 

เรายังสามารถตัดสินใจ CSS output มีสี่ตัวเลือกที่เราสามารถเลือกได้ : ขยาย, : ขนาดกะทัดรัด, : การบีบอัดและ : ซ้อนกัน. สำหรับตอนนี้เราแค่ต้องการให้มันขยายออกไปเนื่องจากเรายังอยู่ในช่วงการพัฒนา.

 output_style =: ถูกขยาย 

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

สุดท้ายเราต้อง ดู ทุกไฟล์ในไดเรกทอรีด้วยบรรทัดคำสั่งนี้

 นาฬิกาเข็มทิศ 

บรรทัดคำสั่งนี้เช่นเดียวกับใน Sass จะเฝ้าดูการเปลี่ยนแปลงทุกไฟล์และสร้างหรืออัปเดตไฟล์ CSS ที่เกี่ยวข้อง แต่จำไว้ให้เรียกใช้บรรทัดนี้หลังจากคุณกำหนดค่าโครงการเสร็จแล้ว config.rb, มิฉะนั้นจะไม่สนใจการเปลี่ยนแปลงในไฟล์.

CSS3 Mixins

ก่อนที่จะเดินผ่าน CSS3 ในเบื้องต้นของเรา .SCSS ไฟล์เราจำเป็นต้องนำเข้าเข็มทิศด้วยบรรทัดต่อไปนี้ @ นำเข้า "เข็มทิศ";, สิ่งนี้จะนำเข้าส่วนขยายทั้งหมดในเข็มทิศ แต่ถ้าเราต้องการ CSS3 เพียงอย่างเดียวเราสามารถทำได้โดยเฉพาะกับบรรทัดนี้มากขึ้น @ นำเข้า "compass / css3".

อ่านเพิ่มเติม: เข็มทิศ CSS3.

ตอนนี้เรามาเริ่มสร้างบางสิ่งกับ Saas and Compass ในเอกสาร HTML สมมติว่าคุณได้สร้างไว้เราจะใส่มาร์กอัพแบบง่าย ๆ ดังต่อไปนี้:

ความคิดก็ง่ายเช่นกัน เราจะสร้างกล่องหมุนที่มีมุมโค้งมนและด้านล่างคือรูปแบบที่ซ้อนกันของ Sass สำหรับผู้เริ่มต้น

 เนื้อหา background-color: # f3f3f3;  ส่วน กว้าง: 500px; กำไร: 50px อัตโนมัติ 0; div width: 250px; ความสูง: 250px; สีพื้นหลัง: #ccc; กำไรขั้นต้น: 0 อัตโนมัติ;  

และเพื่อให้สี่เหลี่ยมมุมมนเราสามารถรวม Compass CSS3 Mixins ดังนี้

 เนื้อหา background-color: # f3f3f3;  ส่วน กว้าง: 500px; กำไร: 50px อัตโนมัติ 0; div width: 250px; ความสูง: 250px; สีพื้นหลัง: #ccc; กำไรขั้นต้น: 0 อัตโนมัติ; @ รวมรัศมีของเส้นขอบ  

นี้ border-radius มิกซ์อินจะสร้างคำนำหน้าเบราว์เซอร์ทั้งหมดและตามค่าเริ่มต้นรัศมีของมุมจะเป็น 5px. แต่เราสามารถระบุรัศมีตามที่เราต้องการได้เช่นกัน @ รวมรัศมีของขอบ (10px) .

 ส่วน div ความกว้าง: 250px; ความสูง: 250px; สีพื้นหลัง: #ccc; กำไรขั้นต้น: 0 อัตโนมัติ; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; รัศมีเส้นขอบ: 10px;  

ถัดไปตามแผนเราจะหมุนกล่องด้วย มันง่ายมากที่จะทำกับ Compass สิ่งที่เราต้องทำคือเพียงเรียกวิธีการแปลงเช่นนั้น

 เนื้อหา background-color: # f3f3f3;  ส่วน กว้าง: 500px; กำไร: 50px อัตโนมัติ 0; div width: 250px; ความสูง: 250px; สีพื้นหลัง: #ccc; กำไรขั้นต้น: 0 อัตโนมัติ; @ รวมรัศมีของขอบ (10px) @ รวมการหมุน  

มิกซ์อินนี้จะสร้างคำนำหน้าผู้ขายที่น่าเบื่อเหล่านั้นและการหมุนจะใช้เวลา 45 องศาตามค่าเริ่มต้น ดู CSS ที่สร้างขึ้นด้านล่าง.

 ส่วน div ความกว้าง: 250px; ความสูง: 250px; สีพื้นหลัง: #ccc; กำไรขั้นต้น: 0 อัตโนมัติ; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; รัศมีเส้นขอบ: 10px; -webkit-transform: หมุน (45deg); -moz-transform: หมุน (45deg); -ms-transform: หมุน (45deg); -o-transform: หมุน (45deg); แปลง: หมุน (45deg);  

ผู้ช่วยเข็มทิศ

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

การเพิ่มไฟล์ @ Font-face

ในตัวอย่างนี้เราจะเพิ่มตระกูลแบบอักษรที่กำหนดเองด้วย @ font-face กฎ. ใน CSS3 ธรรมดารหัสอาจมีลักษณะดังนี้ด้านล่างประกอบด้วยสี่ประเภทแบบอักษรที่แตกต่างกันและมันก็ยากที่จะจำสำหรับบางคน.

 @ font-face font-family: "MyFont"; รูปแบบ src: url ('/ fonts / font.ttf') ('truetype'), รูปแบบ url ('/ fonts / font.otf') ('opentype'), รูปแบบ url ('/ fonts / font.woff') ('woff'), รูปแบบ URL ('/ fonts / font.eot') ('embedded-opentype');  

ด้วยเข็มทิศ เราสามารถทำสิ่งเดียวกันได้ง่ายขึ้นด้วย ตัวอักษรไฟล์ () ผู้ช่วย;

 @ รวมแบบอักษรหน้า ("MyFont", แบบอักษรไฟล์ ("font.ttf", "font.otf", "font.woff", "font.eot")); 

โค้ดด้านบนจะสร้างผลลัพธ์ที่ตรงกับโค้ดแรกมันจะตรวจจับชนิดตัวอักษรโดยอัตโนมัติและเพิ่มลงใน รูปแบบ () วากยสัมพันธ์.

อย่างไรก็ตามหากเราดูรหัสอย่างใกล้ชิดคุณจะเห็นว่าเราไม่ได้เพิ่มเส้นทางตัวอักษร (/ fonts /) ดังนั้น Compass รู้ได้อย่างไรว่าตัวอักษรอยู่ที่ไหน อย่าสับสนเส้นทางนี้มาจากจริง config.rb กับ fonts_path ทรัพย์สิน

 fonts_dir = "fonts" 

สมมุติว่าเราเปลี่ยนมันเป็น fonts_dir = "myfonts", จากนั้นรหัสที่สร้างจะเป็น URL ( '/ myfonts / font.ttf'). ตามค่าเริ่มต้นเมื่อเราไม่ได้ระบุเส้นทางเข็มทิศจะนำไปที่ สไตล์ชีต / แบบอักษร.

กำลังเพิ่มรูปภาพ

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

 div background-image: url ('/ img / the-image.png');  

ในเข็มทิศแทนที่จะใช้ URL () ฟังก์ชั่นเราสามารถแทนที่ด้วย ภาพ URL () ผู้ช่วยเหลือและคล้ายกับการเพิ่ม @ font-face ด้านบนเราสามารถเพิกเฉยต่อเส้นทางทั้งหมดและปล่อยให้เข็มทิศจัดการส่วนที่เหลือ.

รหัสนี้จะสร้างการประกาศ CSS ที่แน่นอนเช่นเดียวกับในตัวอย่างแรก.

 div background-image: image-url (the-image.png);  

นอกจากนี้ Compass ยังมี Image Dimension Helpers โดยส่วนใหญ่จะตรวจจับความกว้างและความสูงของรูปภาพดังนั้นในกรณีที่เราต้องการให้ทั้งคู่ระบุใน CSS ของเราเราสามารถเพิ่มอีกสองบรรทัดดังนี้

 div background-image: image-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png");  

ผลลัพธ์จะเป็นแบบนี้

 div background-image: url ('/ img / images.png? 1344774650'); ความกว้าง: 80px; ความสูง: 80px;  

อ่านเพิ่มเติม: ฟังก์ชั่นตัวช่วยเข็มทิศ

ความคิดสุดท้าย

เอาล่ะเราได้พูดคุยกันมากมายเกี่ยวกับเข็มทิศในวันนี้และอย่างที่คุณเห็นว่ามันเป็นเครื่องมือที่ทรงพลังจริงๆและให้เราเขียน CSS ในแบบที่สวยงามกว่า.

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

• แหล่งดาวน์โหลด