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

— মানসিক ক্লান্তি

খুব সুন্দর! আমি মনে করি আমি এই বিবৃতিটি ভুলভাবে লিখে থাকতে পারি: "নিখরচায় প্রসঙ্গে আমদানি করা ফাইলগুলিতে কেবল মিক্সিন বা চারসেটের মতো নথির ভিত্তি স্তরে অনুমতিপ্রাপ্ত নির্দেশিকা"। এবং "নেস্টেড প্রসঙ্গ" অংশটি সঠিকভাবে না পড়ুন।

— ড্রকর্ড

Answer 1

আপনি এটি এর মতো করতে পারেন:

আমার কাছে ইউটিলিটি নামে একটি ফোল্ডার রয়েছে এবং এর ভিতরে আমার _variables.scss নামে একটি ফাইল রয়েছে

সেই ফাইলটিতে আমি ভেরিয়েবলগুলি এর মতো ঘোষণা করি:

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

তারপরে আমার কাছে স্টাইল.এসএসএস ফাইল রয়েছে যার মধ্যে আমি আমার অন্যান্য স্ক্যাস ফাইলগুলি এর মতো করে আমদানি করি:

// Utilities
@import "utilities/variables";

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

তারপরে, আমি আমদানি করা যে কোনও ফাইলের মধ্যে আমার ঘোষিত ভেরিয়েবলগুলি অ্যাক্সেস করতে সক্ষম হওয়া উচিত।

আপনি যে অন্যটিতে এটি ব্যবহার করতে চান তার কোনওটির আগেই আপনি ভেরিয়েবল ফাইলটি আমদানি করে নিন।

Comments

পারফেক্ট। আমি যা বোঝাতে চেয়েছিলাম এবং প্রয়োজনীয় ছিল। শেষ প্রশ্ন: আমদানি করা সমস্ত ফাইল কি আন্ডারস্কোর দিয়ে শুরু হবে বলে আশা করা হচ্ছে? আপনি নিজের ফাইলের নামটিকে আন্ডারস্কোর করেন তবে @ গুরুত্বপূর্ণ প্রতিবেদনগুলিতে ব্যর্থ হন।

— dthree

এই ফাইলগুলিকে আংশিক ফাইল হিসাবে বিবেচনা করা হয় এবং নামগুলি আন্ডারস্কোর দিয়ে শুরু করতে হবে, যদিও এটি আমদানি করার সময় আপনি এটিকে ছেড়ে চলে যান। সত্যিই একটি ভাল নিবন্ধ রয়েছে যা এখানে এখানে বিশদ জানিয়েছে

— জোয়েল

মনে রাখবেন ডিক্লেয়ার করতে পারেন অক্ষমতা আপনার মডিউল ভিতরে: $black: #000 !default;। !defaultThingie রিসেট হচ্ছে যদি এটা আগে থেকেই আছে থেকে পরিবর্তনশীল বাধা দেয়।

— আন্দ্রে মিখায়লোভ - লোলমাস

কেন আমাদের একক ফাইলে সমস্ত ভেরিয়েবল ডাম্প করতে হবে? আমরা কি তাদের প্রয়োজনীয় ফাইলগুলিতে ভাগ করে তা ফেলে দিতে পারি না? উদাহরণস্বরূপ, মডেল ডায়লগের জন্য প্রয়োজনীয় ভেরিয়েবলগুলি কি আমরা সেগুলিকে _ আধুনিক ম্যাসেএসএসে রাখতে পারি না?

— ভিজেআইএআই

এই উত্তরটি আর একাধিক ফাইল জুড়ে ভেরিয়েবলগুলি পুনরায় ব্যবহার করার প্রস্তাবিত উপায় নয়। দয়া করে দেখুন stackoverflow.com/a/61500282/7513192

— whiscode

Answer 2

এই উত্তরটি দেখায় যে কীভাবে আমি এটি ব্যবহার করে শেষ করেছি এবং আমার যে অতিরিক্ত অতিরিক্ত আঘাত হিট করেছে।

আমি একটি মাস্টার এসসিএসএস ফাইল তৈরি করেছি। এই ফাইলটি আবশ্যক এটা আমদানি করতে জোর জন্য শুরুতে একটি আন্ডারস্কোর আছে:

// 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ফাইলে ভেরিয়েবল, ফাংশন ঘোষণা এবং অন্যান্য এসএএসএস বৈশিষ্ট্যগুলি ছাড়া আর কিছু অন্তর্ভুক্ত করবেন না । আপনি যদি সত্যিকারের সিএসএস অন্তর্ভুক্ত করেন তবে এটি মাস্টার আমদানি করা প্রতিটি ফাইল জুড়েই এই সিএসএসটিকে নকল করবে।

Comments

একটি আন্ডারস্কোর দিয়ে শুরু করা দরকার ফাইল সম্পর্কে আপনার মন্তব্যের জন্য আপনাকে অনেক ধন্যবাদ! আমি কেন একগুচ্ছ ফাউন্ডেশন শৈলী অনুপস্থিত তা সনাক্ত করার জন্য আমি প্রায় 3 ঘন্টা ব্যয় করেছি। আন্ডারস্কোর এবং আরে প্রেস্টো দিয়ে শুরু করতে আমার ফাউন্ডেশন সেটিংস ফাইলের ফাইলের নাম পরিবর্তন হয়েছে! কিন্তু এখন আমি যখন আবার ফাইলের নামটি পরিবর্তন করি, তখনও এটি কাজ করছে? কি ....? ওহ ভাল ... দীর্ঘশ্বাস এবং গ্রহণ এখন এটি কাজ করছে

— প্রশংসাপূর্ণ

এটিকে আর পরিবর্তন করবেন না - এটি কাজ করা অবস্থায় সম্ভবত আপনার এসসিএসএস ফাইল থেকে কিছু উত্পন্ন সিএসএস বন্ধ করে 'কাজ' করছে। কেবল আন্ডারস্কোর ব্যবহার করুন। তবে অন্যথায়, এটি কাজ করে দুর্দান্ত!

— dthree

@ পোশাগনেসি এটি কাজ করতে পারে কারণ সাস ক্যাশে ব্যবহার করে, তাই এটি ক্যাশে করা যেতে পারে। এর মাধ্যমে 100% নিশ্চিত নয়।

— পিটারএম

sass জন্য একই ??

— মার্টিয়ান2049

আপনি @rinogo সঠিক করুন।

— dthree

Answer 3

এই প্রশ্নটি অনেক আগে জিজ্ঞাসা করা হয়েছিল তাই আমি ভেবেছিলাম একটি আপডেট উত্তর পোস্ট করব।

আপনার এখন ব্যবহার এড়ানো উচিত @import। ডক্স থেকে নেওয়া:

সাস পরবর্তী কয়েক বছর ধীরে ধীরে এটিকে পর্যালোচনা করবে এবং শেষ পর্যন্ত ভাষা থেকে পুরোপুরি সরিয়ে ফেলবে। পরিবর্তে @ ব্যবহারের নিয়ম পছন্দ করুন।

কারণগুলির একটি সম্পূর্ণ তালিকা এখানে পাওয়া যাবে

আপনার এখন @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

// এসএএসএস টাস্ক

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

আপনার কি @ ইমপোর্ট স্টেটমেন্টগুলি থেকে আন্ডারস্কোর বাদ দেওয়ার কথা নয়?

— কোয়ান্টাম 7

সাস '@ আইম্পোর্ট' যেভাবেই কাজ করে। আপনি আন্ডারস্কোর সহ বা ছাড়াই ইউআরআই লিখতে পারেন। 'এসএসএসএস' শেষ হওয়ার সাথে বা ছাড়াও।

— পনি

Answer 5

কোনও গ্লোবাল সাস ফাইলে কিছু রঙ-ভিত্তিক বর্গ লেখার বিষয়ে, সুতরাং আমাদের কোথায় ভেরিয়েবলগুলি যত্ন করার প্রয়োজন নেই। ঠিক নীচের মত:

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

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

এবং তারপরে, আমরা যে background-colorকোনও ফাইলে ক্লাসটি ব্যবহার করতে পারি । আমার বক্তব্যটি হ'ল আমার variable.scssকোনও ফাইল আমদানি করার দরকার নেই , কেবল এটি ব্যবহার করুন।

Comments

স্পষ্টত একটি খারাপ ধারণা, আপনার অনেকগুলি ভেরিয়েবল থাকতে পারে এবং কেবল আমদানি করে সূচক রাখতে আরও পরিষ্কার এবং প্রতিটি ফাইলের নিজস্ব প্রস্তাবনা থাকে।

— কার্নারু ভ্যালেনটিন