มูลนิธิ - สสส

SASS ช่วยให้โค้ดมีความยืดหยุ่นและปรับแต่งได้มากขึ้นใน Foundation

ความเข้ากันได้

ในการติดตั้งเวอร์ชันที่ใช้ SASS สำหรับรากฐานควรติดตั้ง Ruby บน Windows มูลนิธิสามารถรวบรวมด้วย Ruby SASS และ libsass เราแนะนำnode-sass 3.4.2+ เวอร์ชันเพื่อรวบรวม SASS

จำเป็นต้องใช้ Autoprefixer

Autoprefixer จัดการไฟล์ SASS gulp-autoprefixerใช้ในการสร้างกระบวนการ การตั้งค่า autoprefixer ต่อไปนี้ใช้เพื่อรับการสนับสนุนเบราว์เซอร์ที่เหมาะสม

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

กำลังโหลด Framework

เราสามารถติดตั้งไฟล์เฟรมเวิร์กโดยใช้ NPM ด้วยการใช้อินเตอร์เฟสบรรทัดคำสั่ง (CLI) เราสามารถคอมไพล์ไฟล์ Sass ต่อไปนี้เป็นคำสั่งในการโหลดกรอบงาน -

npm install foundation-sites --save

หลังจากเรียกใช้รหัสบรรทัดคำสั่งด้านบนคุณจะได้รับบรรทัดต่อไปนี้ -

รวบรวมด้วยตนเอง

ไฟล์เฟรมเวิร์กสามารถเพิ่มเป็นพา ธ การนำเข้าได้ขึ้นอยู่กับกระบวนการสร้างของคุณ แต่พา ธ จะเป็นแพ็กเกจ _ โฟลเดอร์ / ฐานราก - ไซต์ / scssเดียวกัน @importงบรวมอยู่ที่ด้านบนของมูลนิธิ sites.scssไฟล์ บรรทัดถัดไปในรหัสที่กำหนดจะอธิบายไว้ในไฟล์Adjusting CSS Output มาตรา.

@import 'foundation';
@include foundation-everything;

ใช้คอมไพล์ CSS

คุณสามารถรวมไฟล์ CSS ที่คอมไพล์ไว้ล่วงหน้า ไฟล์ CSS มีสองประเภท ได้แก่ แบบย่อขนาดและแบบรวม Minified version ใช้สำหรับการผลิตและเวอร์ชัน unminified ใช้เพื่อแก้ไข CSS ของเฟรมเวิร์กโดยตรง

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

การปรับเอาต์พุต CSS

สำหรับส่วนประกอบต่างๆผลลัพธ์ของ Foundation ประกอบด้วยหลายคลาส ใช้เพื่อควบคุมเอาต์พุต CSS ของเฟรมเวิร์ก เพิ่มโค้ดบรรทัดเดียวต่อไปนี้เพื่อรวมส่วนประกอบทั้งหมดพร้อมกัน

@include foundation-everything;

ต่อไปนี้เป็นรายการส่วนประกอบที่นำเข้าเมื่อคุณเขียนโค้ดด้านบนในไฟล์ scss ของคุณ ส่วนประกอบที่ไม่จำเป็นสามารถแสดงความคิดเห็นได้ คุณสามารถดูด้านล่างได้รับสายรหัสในYour_folder_name / node_modules / มูลนิธิไซต์ / SCSS / foundation.scssไฟล์

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

ไฟล์การตั้งค่า

ตั้งค่าที่ไฟล์จะรวมอยู่ในโครงการรากฐานคือ_settings.scss หากคุณใช้ Yeti Launch หรือ CLI เพื่อสร้างโครงการ Foundation for Sites คุณจะพบไฟล์การตั้งค่าใน src / assets / scss /

เราได้ติดตั้งมูลนิธิใช้ NPM เพราะฉะนั้นคุณสามารถพบการตั้งค่าไฟล์รวมภายใต้your_folder_name / node_modules / มูลนิธิเว็บไซต์ / SCSS / การตั้งค่า / _settings.scss คุณสามารถย้ายสิ่งนี้ไปไว้ในไฟล์ Sass ของคุณเองเพื่อใช้งานได้

คุณสามารถเขียน CSS ของคุณเองได้หากคุณไม่สามารถปรับแต่งด้วยตัวแปรได้ ต่อไปนี้เป็นชุดของตัวแปรซึ่งจะเปลี่ยนรูปแบบเริ่มต้นของปุ่ม

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;