SASS - ใช้ตัวแปรข้ามหลายไฟล์

ฉันต้องการเก็บไฟล์. scss ส่วนกลางหนึ่งไฟล์ที่เก็บคำจำกัดความตัวแปร SASS ทั้งหมดสำหรับโครงการ

// _master.scss 

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc... 

โปรเจ็กต์จะมีไฟล์ CSS จำนวนมากเนื่องจากลักษณะของมัน เป็นสิ่งสำคัญที่ฉันต้องประกาศตัวแปรสไตล์โครงการทั้งหมดในที่เดียว

มีวิธีการทำเช่นนี้ใน SCSS หรือไม่?

คุณสามารถทำได้เช่นนี้:

ฉันมีโฟลเดอร์ชื่อยูทิลิตี้และภายในที่ฉันมีไฟล์ชื่อ _variables.scss

ในไฟล์นั้นฉันประกาศตัวแปรดังนี้:

$black: #000;
$white: #fff;

จากนั้นฉันมีไฟล์ style.scss ซึ่งฉันนำเข้าไฟล์ scss อื่น ๆ ทั้งหมดของฉันดังนี้:

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

จากนั้นภายในไฟล์ใด ๆ ที่ฉันนำเข้ามาฉันควรจะสามารถเข้าถึงตัวแปรที่ฉันประกาศไว้ได้

เพียงให้แน่ใจว่าคุณนำเข้าไฟล์ตัวแปรก่อนที่คนอื่น ๆ ที่คุณต้องการใช้มัน

คำตอบนี้แสดงให้เห็นว่าฉันสิ้นสุดการใช้สิ่งนี้และข้อผิดพลาดเพิ่มเติมที่ฉันได้รับ

ฉันสร้างไฟล์ SCSS หลัก ไฟล์นี้จะต้องมีขีดล่างที่จุดเริ่มต้นเพื่อที่จะนำเข้า:

// assets/_master.scss 
$accent: #6D87A7;           
$error: #811702;

จากนั้นในส่วนหัวของไฟล์. SCSS อื่น ๆ ทั้งหมดของฉันฉันนำเข้าต้นแบบ:

// When importing the master, you leave out the underscore, and it
// will look for a file with the underscore. This prevents the SCSS
// compiler from generating a CSS file from it.
@import "assets/master";

// Then do the rest of my CSS afterwards:
.text { color: $accent; }

สำคัญ

อย่ารวมอะไรเลยนอกจากตัวแปรการประกาศฟังก์ชันและคุณสมบัติ SASS อื่น ๆ ใน_master.scssไฟล์ของคุณ หากคุณรวม CSS จริงมันจะทำซ้ำ CSS นี้ในทุก ๆ ไฟล์ที่คุณนำเข้าต้นแบบเข้าไป

คำถามนี้ถูกถามมานานแล้วดังนั้นฉันคิดว่าฉันโพสต์คำตอบที่ปรับปรุงแล้ว

ตอนนี้คุณควรหลีกเลี่ยงการ@importใช้ นำมาจากเอกสาร:

Sass จะทยอยนำออกมาในอีกไม่กี่ปีข้างหน้าและในที่สุดก็ลบออกจากภาษาทั้งหมด ชอบกฎ @use แทน

รายการเหตุผลทั้งหมดสามารถพบได้ที่นี่

ตอนนี้คุณควรใช้ @useดังที่แสดงด้านล่าง:

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

คุณยังสามารถสร้างนามแฝงสำหรับเนมสเปซ:

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

สร้าง index.scss และคุณสามารถนำเข้าโครงสร้างไฟล์ทั้งหมดที่คุณมี ฉันจะวางดัชนีของฉันจากโครงการองค์กรบางทีมันอาจช่วยวิธีอื่นในการจัดโครงสร้างไฟล์ใน css:

@import 'base/_reset';

@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'helpers/_helpers';
@import 'helpers/_placeholders';

@import 'base/_typography';

@import 'pages/_versions';
@import 'pages/_recording';
@import 'pages/_lists';
@import 'pages/_global';

@import 'forms/_buttons';
@import 'forms/_inputs';
@import 'forms/_validators';
@import 'forms/_fieldsets';

@import 'sections/_header';
@import 'sections/_navigation';
@import 'sections/_sidebar-a';
@import 'sections/_sidebar-b';
@import 'sections/_footer';

@import 'vendors/_ui-grid';

@import 'components/_modals';
@import 'components/_tooltip';
@import 'components/_tables';
@import 'components/_datepickers';

และคุณสามารถดูพวกเขาด้วยอึก / grunt / webpack ฯลฯ เช่น:

gulpfile.js

// SASS Task

var gulp = require('gulp');
var sass = require('gulp-sass');
//var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});

gulp.task('watch', function () {
    gulp.watch('sass/**/*.scss', ['styles']);
});

gulp.task('default', ['watch']);

วิธีการเกี่ยวกับการเขียนคลาสสีในไฟล์ sass ทั่วโลกดังนั้นเราไม่จำเป็นต้องสนใจว่าตัวแปรอยู่ที่ไหน เหมือนดังต่อไปนี้:

// base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

จากนั้นเราสามารถใช้background-colorคลาสในไฟล์ใดก็ได้ จุดของฉันคือฉันไม่จำเป็นต้องนำเข้าvariable.scssในไฟล์ใด ๆ เพียงแค่ใช้มัน