使用 Foundation、Grunt、Sass 创建多个主题（css 个文件）

Question

我想为我的 Foundation 网络应用程序创建许多不同的基础主题（基本上是为不同的客户切换配色方案）。我对 Sass、libsass 和 grunt 还是很陌生。

基本上我想要的是：有两个不同的 _settings.scss 文件

_settingsA.css

$primary_color: #cc3333;
...

_settingsB.css

$primary_color: #3333cc;
...

然后用这两个文件生成 foundationA.css 和 foundationB.css。我目前在 Sass/Grunt.

中使用 Foundation

Answer 1

我刚刚发现解决方案是编辑 Gruntfile.js 并将文件添加到 "sass" 任务：

sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/app.css': 'scss/app.scss',
          'css/app2.css': 'scss/app2.scss',
          'css/app3.css': 'scss/app3.scss'
        }
      }
    }

使用 Foundation、Grunt、Sass 创建多个主题（css 个文件）

Creating multiple themes (css files) with Foundation, Grunt, Sass

sass

gruntjs

zurb-foundation