SASS - कई फ़ाइलों में चर का उपयोग करें

Question

मैं एक केंद्रीय .scss फ़ाइल रखना चाहूंगा जो किसी परियोजना के लिए सभी SASS चर परिभाषाओं को संग्रहीत करता है।

// _master.scss 

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

अपनी प्रकृति के कारण परियोजना में बड़ी संख्या में सीएसएस फाइलें होंगी। यह महत्वपूर्ण है कि मैं एक ही स्थान पर सभी परियोजना-व्यापी शैली चर घोषित करूँ।

क्या एससीएसएस में ऐसा करने का कोई तरीका है?

Comments

मुझे पूरा यकीन है कि यह संभव नहीं है, मैंने कुछ समय पहले वही कोशिश की थी और काम करने के लिए नहीं मिला।

— DrCord

@ कॉर्ड इसके विपरीत यह SASS की एक केंद्रीय विशेषता है: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials

— Ennui

मिठाई! मुझे लगता है कि मैंने इस कथन को गलत समझा हो सकता है: "निर्देश जिन्हें केवल एक दस्तावेज़ के आधार स्तर पर अनुमति दी जाती है, जैसे मिक्सिन या चारसेट, उन फ़ाइलों में अनुमति नहीं है जो एक नेस्टेड संदर्भ में आयात की जाती हैं।" और "नेस्टेड संदर्भ" भाग को ठीक से नहीं पढ़ा।

— DrCord

Answer 1

आप इसे इस तरह से कर सकते हैं:

मेरे पास उपयोगिताओं का एक फ़ोल्डर है और उसके अंदर मेरे पास _variables.scss नाम की एक फ़ाइल है

उस फ़ाइल में मैं चर घोषित करता हूं जैसे:

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

तब मेरे पास style.scss फ़ाइल है जिसमें मैं अपनी अन्य सभी scss फाइलों को इस तरह आयात करता हूं:

// Utilities
@import "utilities/variables";

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

फिर, मेरे द्वारा आयात की गई किसी भी फाइल के भीतर, मैं उन चर का उपयोग करने में सक्षम होना चाहिए जो मैंने घोषित किए हैं।

बस यह सुनिश्चित करें कि आप जिस किसी अन्य का उपयोग करना चाहते हैं, उससे पहले चर फ़ाइल आयात कर लें।

Comments

उत्तम। बस मेरा मतलब और जरूरत थी। आखिरी सवाल: क्या सभी फाइलें आयातित हैं जो अंडरस्कोर से शुरू होने की उम्मीद है? आप अपना फ़ाइल नाम रेखांकित करते हैं, लेकिन @import घोषणाओं पर विफल रहते हैं।

— dthree

उन फ़ाइलों को आंशिक फ़ाइलें माना जाता है और नामों को अंडरस्कोर से शुरू करना पड़ता है, हालांकि आप इसे आयात करते समय इसे छोड़ देते हैं। वहाँ एक बहुत अच्छा लेख है कि यहाँ क्यों विवरण है: alistapart.com/article/getting-started-with-sass

— जोएल

ध्यान दें कि आप अपने मॉड्यूल के अंदर चूक की घोषणा कर सकते हैं $black: #000 !default;:। !defaultThingie रीसेट किया जा रहा है, तो वह पहले से मौजूद से चर को रोकता है।

— एंड्री मिखायलोव - lolmaus

हमें सभी वेरिएबल्स को एक ही फाइल में डंप क्यों करना है? क्या हम उन्हें संबंधित फाइल में विभाजित नहीं कर सकते हैं और उनकी जरूरत नहीं है? उदाहरण के लिए मोडल संवाद के लिए आवश्यक चर हम उन्हें _modal.scss में नहीं रख सकते हैं?

— वीजेएआई

यह उत्तर अब कई फ़ाइलों में चर का उपयोग करने के लिए अनुशंसित तरीका नहीं है। कृपया देखें stackoverflow.com/a/61500282/7513192

— whiscode

Answer 2

यह उत्तर दिखाता है कि मैंने इसका उपयोग कैसे किया और मेरे द्वारा मारे गए अतिरिक्त नुकसान।

मैंने एक मास्टर 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; }

जरूरी

अपनी _master.scssफ़ाइल में वैरिएबल, फ़ंक्शन डिक्लेरेशन और अन्य SASS फीचर्स के अलावा कुछ भी शामिल न करें । यदि आप वास्तविक सीएसएस को शामिल करते हैं, तो यह मास्टर को आयात करने वाली प्रत्येक फ़ाइल में इस सीएसएस की नकल करेगा।

Comments

एक अंडरस्कोर के साथ शुरू करने के लिए आवश्यक फ़ाइल के बारे में आपकी टिप्पणी के लिए बहुत बहुत धन्यवाद! मैंने सिर्फ 3 घंटे बिताए यह जानने की कोशिश कर रहा था कि मुझे फाउंडेशन शैलियों का एक गुच्छा क्यों याद आ रहा था। एक अंडरस्कोर और हे प्रेस्टो के साथ शुरू करने के लिए मेरी फाउंडेशन सेटिंग्स फ़ाइल का नाम बदला! लेकिन अब जब मैं फ़ाइल नाम को फिर से बदलूंगा, तो यह अभी भी काम कर रहा है? क्या....? ओह ठीक है ... आह और यह स्वीकार कर रहा है कि यह अब काम कर रहा है

— पॉज़हैघ्नेस

इसे वापस न बदलें - जब यह काम कर रहा था, तो संभवत: आपकी SCSS फ़ाइल से कुछ उत्पन्न सीएसएस को 'काम' कर रहा है। सिर्फ अंडरस्कोर का उपयोग करें। लेकिन अन्यथा, यह काम करने पर बहुत अच्छा!

— दिनरी

@poshaughnessy यह काम कर सकता है क्योंकि sass कैश का उपयोग करता है, इसलिए इसे कैश किया जा सकता है। के माध्यम से 100% निश्चित नहीं है।

— पीटरएम

sass के लिए भी यही ??

— Martian2049

सही है आप @rinogo हैं।

— dthree

Answer 3

यह प्रश्न बहुत समय पहले पूछा गया था, इसलिए मैंने सोचा कि मैं एक अद्यतन उत्तर दूंगा।

अब आपको इसके इस्तेमाल से बचना चाहिए @import। डॉक्स से लिया गया:

सास धीरे-धीरे अगले कुछ वर्षों में इसे समाप्त कर देगी, और अंततः इसे पूरी तरह से भाषा से हटा देगी। इसके बजाय @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;
}

Comments

यह अब चयनित उत्तर होना चाहिए, क्योंकि "आयात" को पदावनत के रूप में चिह्नित किया गया है और भविष्य में हटा दिया जाएगा।

— टायरियनग्राफिस्ट

यह एक और अधिक upvotes की जरूरत है

— ludovico

Answer 4

एक index.scss बनाएं और वहां आपके पास मौजूद सभी फ़ाइल संरचना को आयात कर सकते हैं। मैं आपको एक उद्यम परियोजना से अपना सूचकांक चिपकाऊंगा, शायद यह अन्य लोगों की मदद करेगा कि कैसे सीएसएस में फाइल तैयार की जाए:

@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';

और आप उन्हें गल्प / ग्रन्ट / वेबपैक आदि के साथ देख सकते हैं, जैसे:

gulpfile.js

// SASS टास्क

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']);

Comments

क्या आप @import स्टेटमेंट से अंडरस्कोर को छोड़ना नहीं चाहते हैं?

— क्वांटम 7

Sass '@import' या तो काम करता है। आप URI को अंडरस्कोर के साथ या उसके बिना लिख ​​सकते हैं। '.scss' के अंत के साथ या उसके बिना भी।

— पोनी

Answer 5

कैसे एक वैश्विक sass फ़ाइल में कुछ रंग-आधारित वर्ग लिखने के बारे में, इस प्रकार हमें यह ध्यान रखने की आवश्यकता नहीं है कि चर कहाँ हैं। निम्नलिखित की तरह:

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

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

और फिर, हम background-colorकिसी भी फाइल में क्लास का उपयोग कर सकते हैं । मेरा कहना है कि मुझे variable.scssकिसी फ़ाइल में आयात करने की आवश्यकता नहीं है , बस इसका उपयोग करें।

Comments

स्पष्ट एक बुरा विचार है, आपके पास कई चर हो सकते हैं और केवल आयात के साथ सूचकांक रखने के लिए अधिक साफ है, और प्रत्येक फ़ाइल का केवल प्रस्ताव है।

— कार्नारू वैलेंटाइन