我用SASS部分模块化我的样式表,就像这样:
@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues
有没有办法包括整个partials目录(它是一个充满sas -partials的目录),比如@import compass之类的?
你可以生成SASS文件,自动导入所有东西,我使用这个Gulp任务:
concatFilenames = require('gulp-concat-filenames')
let concatFilenamesOptions = {
root: './',
prepend: "@import '",
append: "'"
}
gulp.task('sass-import', () => {
gulp.src(path_src_sass)
.pipe(concatFilenames('app.sass', concatFilenamesOptions))
.pipe(gulp.dest('./build'))
})
你也可以控制导入顺序的文件夹,像这样:
path_src_sass = [
'./style/**/*.sass', // mixins, variables - import first
'./components/**/*.sass', // singule components
'./pages/**/*.sass' // higher-level templates that could override components settings if necessary
]
如果您在Rails项目中使用Sass,则Sass - Rails gem https://github.com/rails/sass-rails具有glob导入功能。
@import "foo/*" // import all the files in the foo folder
@import "bar/**/*" // import all the files in the bar tree
在另一个回答“如果导入一个目录,如何确定导入顺序?”不可能不引入一些新的复杂程度。”
有些人会认为将文件组织到目录中可以降低复杂性。
我所在组织的项目是一个相当复杂的应用程序。在17个目录中有119个Sass文件。这些大致对应于我们的视图,主要用于调整,繁重的工作由我们的自定义框架处理。对我来说,几行导入的目录比119行导入的文件名要简单一些。
为了解决加载顺序问题,我们将需要先加载的文件(mixin、变量等)放在一个早期加载目录中。否则,加载顺序是和应该是无关的…如果我们做得正确的话。
这可能是一个老问题,但在2020年仍然相关,所以我可能会发布一些更新。
自19年10月的更新以来,我们通常应该使用@use而不是@import,但这只是一个注释。这个问题的解决方案是使用索引文件来简化包括整个文件夹。下面的例子。
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
// foundation/_index.scss
@use 'code';
@use 'lists';
// style.scss
@use 'foundation';
https://sass-lang.com/documentation/at-rules/use#index-files
我也在寻找你问题的答案。对应的答案正确导入所有函数不存在。
这就是为什么我写了一个python脚本,你需要把它放在你的scss文件夹的根目录下,就像这样:
- scss
|- scss-crawler.py
|- abstract
|- base
|- components
|- layout
|- themes
|- vender
然后它将遍历树并找到所有scss文件。一旦执行,它将创建一个名为main.scss的scss文件
#python3
import os
valid_file_endings = ["scss"]
with open("main.scss", "w") as scssFile:
for dirpath, dirs, files in os.walk("."):
# ignore the current path where the script is placed
if not dirpath == ".":
# change the dir seperator
dirpath = dirpath.replace("\\", "/")
currentDir = dirpath.split("/")[-1]
# filter out the valid ending scss
commentPrinted = False
for file in files:
# if there is a file with more dots just focus on the last part
fileEnding = file.split(".")[-1]
if fileEnding in valid_file_endings:
if not commentPrinted:
print("/* {0} */".format(currentDir), file = scssFile)
commentPrinted = True
print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile)
一个输出文件的例子:
/* abstract */
@import './abstract/colors';
/* base */
@import './base/base';
/* components */
@import './components/audioPlayer';
@import './components/cardLayouter';
@import './components/content';
@import './components/logo';
@import './components/navbar';
@import './components/songCard';
@import './components/whoami';
/* layout */
@import './layout/body';
@import './layout/header';