it-swarm.dev

SASS - استخدام المتغيرات عبر ملفات متعددة

أرغب في الاحتفاظ بملف واحد .scss مركزي يخزّن جميع تعريفات المتغير SASS لمشروع.

// _master.scss 

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

سيحتوي المشروع على عدد كبير من ملفات CSS ، نظرًا لطبيعته. من المهم أن أعلن جميع متغيرات النمط على مستوى المشروع في مكان واحد.

هل هناك طريقة للقيام بذلك في SCSS؟

169
dthree

يمكنك القيام بذلك مثل هذا:

لدي مجلد باسم الأدوات المساعدة وداخل ذلك لدي ملف باسم _variables.scss

في هذا الملف ، أعلن متغيرات مثل:

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

ثم لدي ملف style.scss الذي أستورد فيه جميع ملفات scss الأخرى مثل هذا:

// Utilities
@import "utilities/variables";

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

بعد ذلك ، ضمن أي من الملفات التي قمت باستيرادها ، يجب أن أكون قادرًا على الوصول إلى المتغيرات التي أعلنتها.

فقط تأكد من استيراد الملف المتغير قبل أي من الملفات الأخرى التي ترغب في استخدامه.

274
Joel

توضح هذه الإجابة كيف انتهى بي المطاف باستخدام هذا والمخاطر الإضافية التي أصابتها.

لقد تقدمت ملف 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 عبر كل ملف تقوم باستيراده إلى.

68
dthree

إنشاء 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';

ويمكنك مشاهدتها من خلال gulp/grunt/webpack وغيرها ، مثل:

gulpfile.js

// ساس المهمة

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
Carnaru Valentin

ماذا عن كتابة بعض الفصول المستندة إلى اللون في ملف sass العالمي ، وبالتالي لا نحتاج إلى الاهتمام بمكان وجود المتغيرات. تماما مثل ما يلي:

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

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

وبعد ذلك ، يمكننا استخدام فئة background-color في أي ملف. نقطتي هي أنني لست بحاجة إلى استيراد variable.scss في أي ملف ، فقط استخدمه.

0
gary gao