Warum sollten wir in Sass-Stylesheets @use zum Importieren von Code verwenden, anstatt @import direkt zu verwenden?
P粉493534105
P粉493534105 2023-09-15 21:45:03
0
1
699

Ich setze ein Projekt um und soweit ich weiß, befindet sich@use只会将代码导入到我们使用@usein einem Stylesheet, nicht in irgendeinem anderen Stylesheet.

sass-Dokumentation:

@use geladene Mitglieder (Variablen, Funktionen und Mixins) sind nur in dem Stylesheet sichtbar, das sie geladen hat. Wenn andere Stylesheets darauf zugreifen möchten, müssen sie ihre eigenen @use-Regeln schreiben.

Ich habe also so etwas namens_b.scss的文件,它是我编译为css的sass的主文件,然后我有一个名为a.scss的文件,我在其中通过@use导入了_b.scss,然后,我有一个名为project.scss的文件,在其中我导入了a.scss,所以根据这个层次结构,_b.scss不应该在project.scss中可访问,但是当我将project.scss编译为css时,在我的css文件中,我编译了来自_b.scss的scss代码(然而,如果我在project.scss中写入像@debug map-get($colors."red")und es gibt einen Fehler aus. Warum passiert das also?

PS:Ich verwendegulp, um mein SCSS und CSS zu kompilieren, zu bereinigen und zu überwachen.

//文件层次结构 index.html gulpfile.js a.scss _b.scss project project.scss css project.css
//index.html        Document 
hey
hey
//_b.scss $colors:( "red":red, "blue":blue, "green":green, "yellow":yellow, "brown":brown, "purple":purple ); @each $key,$val in $colors{ .bg-#{$key}{ background: $val; } }
//a.scss @use "b";
//project.scss @use "../a";
//project.css .bg-red { background: red; } .bg-purple { background: purple; }
//gulpfile.js const { src, dest, watch, series } = require('gulp') const sass = require('gulp-sass')(require('sass')) const purgecss = require('gulp-purgecss') function buildStyles() { return src('project/*.scss') .pipe(sass({})) .pipe(purgecss({ content: ['*.html'] })) .pipe(dest('css')) } function watchTask() { watch(['project/*.scss', '*.html'], buildStyles) } exports.default = series(buildStyles, watchTask)

P粉493534105
P粉493534105

Antworte allen (1)
P粉316423089

根据您自己的引用(重点是我的):

请注意,这不包括样式规则。根据文档,样式规则仍然“加载”到生成的样式表中:

因此,@use用于隔离可见的成员(变量、函数和混合),同时输出样式规则。

    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!