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


217

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

// _master.scss 

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

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

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


ฉันค่อนข้างแน่ใจว่าเป็นไปไม่ได้ฉันลองสิ่งเดียวกันเมื่อไม่นานมานี้และไม่สามารถใช้งานได้
DrCord

8
@DrCord ตรงกันข้ามคุณลักษณะหลักของ SASS คือ: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
Ennui

หวาน! ฉันคิดว่าฉันอาจอ่านข้อความนี้ผิด: "คำสั่งที่อนุญาตเฉพาะที่ระดับฐานของเอกสารเช่น mixin หรือ charset ไม่ได้รับอนุญาตในไฟล์ที่นำเข้าในบริบทซ้อนกัน" และอ่านส่วน "บริบทที่ซ้อนกัน" ไม่ถูกต้อง
DrCord

คำตอบ:


325

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

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

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

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

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

// Utilities
@import "utilities/variables";

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

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

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


4
สมบูรณ์ สิ่งที่ฉันต้องการและจำเป็น คำถามสุดท้าย: ไฟล์ทั้งหมดที่นำเข้าคาดว่าจะเริ่มต้นด้วยการขีดเส้นใต้หรือไม่? คุณขีดเส้นใต้ชื่อไฟล์ของคุณ แต่ไม่สามารถประกาศ @import ได้
dthree

46
ไฟล์เหล่านั้นถือเป็นไฟล์บางส่วนและชื่อต้องเริ่มต้นด้วยเครื่องหมายขีดล่างคุณต้องปล่อยทิ้งเมื่อทำการอิมพอร์ต มีบทความที่ดีจริงๆที่ให้รายละเอียดว่าทำไมที่นี่: alistapart.com/article/getting-started-with-sass
Joel

7
โปรดทราบว่าคุณสามารถประกาศค่าเริ่มต้น$black: #000 !default;ภายในโมดูลของคุณ: !defaultthingie ป้องกันไม่ให้ตัวแปรจากการตั้งค่าถ้ามีอยู่แล้ว
Andrey Mikhaylov - lolmaus

2
ทำไมเราต้องถ่ายโอนตัวแปรทั้งหมดในไฟล์เดียว? เราแยกและวางในไฟล์ที่ต้องการหรือไม่? ตัวอย่างเช่นตัวแปรที่จำเป็นสำหรับกล่องโต้ตอบโมดัลเราไม่สามารถวางไว้ใน _modal.scss?
VJAI

3
คำตอบนี้ไม่ใช่วิธีที่แนะนำให้ใช้ตัวแปรหลาย ๆ ไฟล์อีกต่อไป โปรดดูstackoverflow.com/a/61500282/7513192
whiscode

82

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

ฉันสร้างไฟล์ 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 นี้ในทุก ๆ ไฟล์ที่คุณนำเข้าต้นแบบเข้าไป


5
ขอบคุณมากสำหรับความคิดเห็นของคุณเกี่ยวกับไฟล์ที่ต้องเริ่มต้นด้วยเครื่องหมายขีดล่าง! ฉันใช้เวลาประมาณ 3 ชั่วโมงพยายามหาสาเหตุว่าทำไมฉันถึงขาดสไตล์ของมูลนิธิ เปลี่ยนชื่อไฟล์ของไฟล์การตั้งค่าพื้นฐานของฉันเพื่อเริ่มต้นด้วยเครื่องหมายขีดล่างและเฮ้ presto! แต่ตอนนี้เมื่อฉันเปลี่ยนชื่อไฟล์กลับมาอีกครั้งมันยังคงทำงานอยู่หรือไม่ อะไร ....
อืม

4
อย่าเปลี่ยนกลับ - อาจเป็นเพราะ 'ปิด' CSS บางอย่างที่สร้างขึ้นจากไฟล์ SCSS ของคุณเมื่อทำงาน เพียงใช้ขีดล่าง แต่อย่างอื่นยอดเยี่ยมในการทำให้การทำงาน!
dthree

@poshaughnessy อาจใช้งานได้เนื่องจาก sass ใช้แคชดังนั้นจึงสามารถแคชได้ ไม่แน่ใจ 100%
PeterM

เหมือนกันสำหรับ sass?
Martian2049

1
ถูกต้องคุณเป็น @rinogo
dthree

19

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

ตอนนี้คุณควรหลีกเลี่ยงการ@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;
}

1
นี่ควรเป็นคำตอบที่เลือกเนื่องจาก "นำเข้า" ถูกทำเครื่องหมายว่าเลิกใช้แล้วและจะถูกลบออกในอนาคต
TyrionGraphiste

หนึ่งนี้ต้องการ upvotes เพิ่มเติม
ludovico

3

สร้าง 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']);

1
คุณไม่ควรละเว้นขีดล่างจากคำสั่ง @import หรือ
Quantum7

1
Sass '@import' ทำงานได้ทั้งสองทาง คุณสามารถเขียน URI ด้วยการขีดเส้นใต้หรือไม่ก็ได้ ยังมีหรือไม่สิ้นสุด '.scss'
Pony

1

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

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

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

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


เห็นได้ชัดว่าเป็นความคิดที่ไม่ดีคุณสามารถมีตัวแปรจำนวนมากและสะอาดกว่าเพื่อให้ดัชนีมีเพียงการนำเข้าและทุกไฟล์ที่จะมีเป็นข้อเสนอของตัวเอง
Carnaru Valentin
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.