SASS - sử dụng các biến trên nhiều tệp

Tôi muốn giữ một tệp .scss trung tâm lưu trữ tất cả các định nghĩa biến SASS cho một dự án.

// _master.scss 

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

Dự án sẽ có một số lượng lớn các tệp CSS, do tính chất của nó. Điều quan trọng là tôi khai báo tất cả các biến kiểu toàn dự án trong một vị trí.

Có cách nào để làm điều này trong SCSS không?

Bạn có thể làm như thế này:

Tôi có một thư mục có tên tiện ích và bên trong tôi có một tệp có tên _variables.scss

trong tập tin đó tôi khai báo các biến như vậy:

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

sau đó tôi có tệp style.scss trong đó tôi nhập tất cả các tệp scss khác của mình như thế này:

// Utilities
@import "utilities/variables";

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

sau đó, trong bất kỳ tệp nào tôi đã nhập, tôi sẽ có thể truy cập các biến tôi đã khai báo.

Chỉ cần đảm bảo bạn nhập tệp biến trước bất kỳ tệp nào bạn muốn sử dụng.

Câu trả lời này cho thấy tôi đã kết thúc việc này bằng cách nào và những cạm bẫy bổ sung mà tôi gặp phải.

Tôi đã tạo một tệp SCSS chính. Tập tin này phải có dấu gạch dưới ở đầu để được nhập:

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

Sau đó, trong tiêu đề của tất cả các tệp .SCSS khác của tôi, tôi nhập tệp chính:

// 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; }

QUAN TRỌNG

Không bao gồm bất cứ điều gì ngoại trừ các biến, khai báo hàm và các tính năng SASS khác trong _master.scsstệp của bạn . Nếu bạn bao gồm CSS thực tế, nó sẽ sao chép CSS này trên mọi tệp bạn nhập chủ vào.

Câu hỏi này đã được hỏi từ lâu rồi nên tôi nghĩ tôi đã đăng câu trả lời cập nhật.

Bây giờ bạn nên tránh sử dụng @import. Lấy từ các tài liệu:

Sass sẽ dần dần loại bỏ nó trong vài năm tới, và cuối cùng loại bỏ nó hoàn toàn khỏi ngôn ngữ. Thay vào đó, hãy ưu tiên quy tắc @use.

Một danh sách đầy đủ các lý do có thể được tìm thấy ở đây

Bây giờ bạn nên sử dụng @usenhư hình dưới đây:

_variabled.scss

$text-colour: #262626;

_therFile.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;
}

Bạn cũng có thể tạo bí danh cho không gian tên:

_therFile.scss

@use 'variables' as v;

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

Tạo một index.scss và ở đó bạn có thể nhập tất cả cấu trúc tệp bạn có. Tôi sẽ dán cho bạn chỉ mục của tôi từ một dự án doanh nghiệp, có thể nó sẽ giúp người khác cách cấu trúc các tệp trong 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';

Và bạn có thể xem chúng với gulp / grunt / webpack, v.v., như:

gulpfile.js

// Nhiệm vụ 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']);

Làm thế nào về việc viết một số lớp dựa trên màu sắc trong một tệp sass toàn cầu, do đó chúng ta không cần quan tâm đến các biến ở đâu. Cũng giống như sau:

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

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

và sau đó, chúng ta có thể sử dụng background-colorlớp trong bất kỳ tệp nào. Quan điểm của tôi là tôi không cần phải nhập variable.scssbất kỳ tập tin nào, chỉ cần sử dụng nó.