Question

我正在尝试使用sass设置一些按钮的样式，使它们看起来都一样，但是我的样式没有显示。我是sass的新手，所以我猜我有一些语法在忽略。我需要更改什么才能使其开始工作？这些按钮都具有相同的代码。

HTML

<link rel="stylesheet" type="text/css" href="_base.css">
<button type="button" class="removeButton">Remove</button>

_base.scss

.removeButton {
    button:active {
        background: #dd4646;
    }
    button:focus {
        background: #dd4646;
    }
    button {
        background: #fb4e4e;
    }
    background: #fb4e4e;
}

Answer 1

您必须将scss文件编译为css。链接HTML中的CSS。

Answer 2

您需要将Sass编译为CSS。

为此，您可以使用Gulp，Webpack或其他。

如果您想使用Gulp

npm i gulp-sass

然后在您的Gulp文件中，您可以编写如下内容：

'use strict';

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

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

有关更多信息，请check the npm site。

Answer 3

嵌套选择器会转换为后代关系。基本上

.removeButton {
  button:active {
      background: #dd4646;
  }
}

编译为

.removeButton button:active {
    background: #dd4646;
}

检查CSS输出以进行验证。您真正想要的是将它们连接以选择单个元素。您可以使用&字符来做到这一点。 See the docs

.removeButton {
  &:active {
    background: #dd4646;
  }
}

&表示匹配父选择器。将所有出现的button替换为&，就可以了。

Sass样式未在课堂上显示

3 个答案: