我可以在同一个项目中同时使用 LESS 和 SCSS 还是必须转换？

Question

我想知道是否可以在同一个项目中同时使用 LESS 和 SCSS，这意味着使用 Grunt 将两种类型的文件压缩并缩小到一个 css 文件中？我问的原因是我打算将 MMenu（用 SCSS 编写）与我已经开始的一个用 LESS 编写的项目一起使用。还是我必须将 MMenu SCSS 文件转换为更少？我发现了以下 Grunt 任务https://www.npmjs.org/package/grunt-refactor，但不确定是否值得付出努力，因为存在一些兼容性问题。

有人有在同一个 gruntfile 中同时使用 LESS 和 SCSS 的经验吗？

如果有人愿意帮忙，这是我的 gruntfile。

'use strict';
module.exports = function(grunt) {

grunt.initConfig({
jshint: {
  options: {
    jshintrc: '.jshintrc'
  },
  all: [
    'Gruntfile.js',
    'assets/js/*.js',
    '!assets/js/scripts.min.js'
  ]
},
less: {
  dist: {
    files: {
      'assets/css/main.min.css': [
        'assets/less/app.less'
      ]
    },
    options: {
      compress: true,
      // LESS source map
      // To enable, set sourceMap to true and update sourceMapRootpath based on your install
      sourceMap: true,
      sourceMapFilename: 'assets/css/main.min.css.map',
      sourceMapRootpath: '/app/themes/thenewstheme/'
    }
  }
},
uglify: {
  dist: {
    files: {
      'assets/js/scripts.min.js': [
        'assets/js/plugins/bootstrap/transition.js',
        'assets/js/plugins/bootstrap/alert.js',
        'assets/js/plugins/bootstrap/button.js',
        'assets/js/plugins/bootstrap/carousel.js',
        'assets/js/plugins/bootstrap/collapse.js',
        'assets/js/plugins/bootstrap/dropdown.js',
        'assets/js/plugins/bootstrap/modal.js',
        'assets/js/plugins/bootstrap/tooltip.js',
        'assets/js/plugins/bootstrap/popover.js',
        'assets/js/plugins/bootstrap/scrollspy.js',
        'assets/js/plugins/bootstrap/tab.js',
        'assets/js/plugins/bootstrap/affix.js',
        'assets/js/plugins/*.js',
        'assets/js/_*.js'
      ]
    },
    options: {
      // JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
       sourceMap: 'assets/js/scripts.min.js.map',
       sourceMappingURL: '/app/themes/thenewstheme/assets/js/scripts.min.js.map'
    }
  }
},
version: {
  options: {
    file: 'lib/scripts.php',
    css: 'assets/css/main.min.css',
    cssHandle: 'roots_main',
    js: 'assets/js/scripts.min.js',
    jsHandle: 'roots_scripts'
  }
},
watch: {
  less: {
    files: [
      'assets/less/*.less',
      'assets/less/bootstrap/*.less'
    ],
    tasks: ['less', 'version']
  },
  js: {
    files: [
      '<%= jshint.all %>'
    ],
    tasks: ['jshint', 'uglify', 'version']
  },
  livereload: {
    // Browser live reloading
    // https://github.com/gruntjs/grunt-contrib-watch#live-reloading
    options: {
      livereload: true
    },
    files: [
      'assets/css/main.min.css',
      'assets/js/scripts.min.js',
      'templates/*.php',
      '*.php'
    ]
  }
},
clean: {
  dist: [
    'assets/css/main.min.css',
    'assets/js/scripts.min.js'
  ]
}
});

// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-wp-version');

// Register tasks
grunt.registerTask('default', [
'clean',
'less',
'uglify',
'version'
]);
grunt.registerTask('dev', [
'watch'
]);

};

Answer 1

简短的回答是是的，你可以。

但是因为 SASS 和 LESS 的语法略有不同 - 这种差异只会随着我的输入而增加，因此您最终不得不分别维护它们。

如果这不是问题并且您更愿意尝试，我建议使用Compass (grunt-contrib-compass) 来处理SASS。

我还会确保每个人都尽可能独立地做自己的事情。如果您仍想共享css 文件夹以输出两者，请制定一种命名模式，以防止LESS 的输出覆盖SASS 的输出。

在此基础上，您可以在另一个任务（如 grunt-contrib-cssmin）的帮助下，将生成的 CSS 文件（由每个任务单独编译）连接成一个文件。