Question

我在scss中需要这样的构造：

:host {
    background: #fff;

    &([active]) {
        background: #000;
    }
}

意思是输出：

:host {
    background: #fff;
}
:host([active]) {
    background: #000;
}

但是我无法以任何方式尝试它。有没有办法逃避我不知道的括号或不太复杂的东西？

在CoffeeScript中插入像`code`这样的原始css片段会很棒，但我在文档中看不到这样的内容。

Answer 1

如果你想在scss文件中使用这个影子DOM选择器，你现在不能使用:host(<selector>)嵌套。解决方法是重复：您要使用的每个选择器的主机。

<强> SCSS ：

:host {
    background: #fff;
}
:host([active]) {
    background: #000;
}

CSS（相同）：

:host {
  background: #fff;
}

:host([active]) {
  background: #000;
}

你可以在这里试试：http://sassmeister.com/

Answer 2

不幸的是，萨斯仍然不支持这一点。我做了一个额外的解决方法来支持嵌套状态选择器：host

假设您还使用gulp-sass将您的sass编译为css，您可以执行以下操作：

npm install gulp-replace

接下来，将以下内容添加到编译sass的gulp脚本的顶部：

var replace = require('gulp-replace');

并将以下内容添加到sass编译管道中：

.pipe(replace(':host:hover', ':host(:hover)'))

现在你可以在你的sass中使用以下构造：

萨斯

:host {
    &:hover {
        color: red;
    }
}

替换功能会将你的css改为：

CSS

:host(:hover) {
  color: red;
}

你的gulp脚本应该是这样的：

咕嘟咕嘟

var gulp = require('gulp');
var replace = require('gulp-replace');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    return gulp.src('./src/sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded',
            precision: 10,
        }))
        .pipe(replace(':host:hover', ':host(:hover)'))
        .pipe(gulp.dest('./dist/css'));
});

您可以通过展开gulp脚本的替换部分来添加更多状态。

SCSS和＆＃34;：主机（[主动]）＆＃34;

2 个答案:

萨斯

CSS

咕嘟咕嘟