Question

我想知道使用前缀命名引导3 CSS类的最佳方法是什么。

这个问题不仅仅是关于命名空间引导程序，因此它仅适用于特定容器（请参阅此处：How to namespace Twitter Bootstrap so styles don't conflict），但是要使用预定义的前缀逐步更改所有生成的CSS类。

我开始在几乎所有地方的LESS文件中添加前缀pl-，但我必须遗漏一些东西，因为我打破了样式的某些部分。所以我正在寻找更智能的解决方案......

例如，.alert中的alerts.less课程必须成为.pl-alert。

这样做的关键是我正在编写一个可供其他人使用的插件（包含在他们的网站中），我必须避免他们错误地覆盖我的样式（他们可能有{{1}哪个类会与我合并并造成混乱），所以我想通过使用特定的前缀来避免这种情况。

Answer 1

我一直有同样的问题，并寻找一些建议......我发现对我来说最好的方法是在我的bootstrap节点项目中有一个namespace.less文件。

.namespace {
    @import (less) "../dist/css/bootstrap.css";
}

在我的Gruntfile中，我将创建一个任务来编译另一个发行版。像这样：

less: {
      compileCore: {
        options: {
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        src: 'less/bootstrap.less',
        dest: 'dist/css/<%= pkg.name %>.css'
      },
      compileTheme: {
        options: {
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>-theme.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
        },
        src: 'less/theme.less',
        dest: 'dist/css/<%= pkg.name %>-theme.css'
      },
      **compileNamespace: {
        options: {
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        src: 'less/namespace.less',
        dest: 'dist/css/ml.<%= pkg.name %>.css'
      },** 
...

但事后我需要做一些清理工作。特别是normalize.less和scaffolding.less创建的所有样式。

我会使用RegExp创建I grunt任务，将以.namespace html开头的样式替换为html，将以.namespace body开头的样式替换为body.namespace < / p>

然后在我的HTML标记中，我只是将命名空间类添加到body标记。

Namespacing Bootstrap 3个带前缀的类

1 个答案: