系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

在 Magento 2 中，可以使用 CSS 和 LESS 两种方式来编写样式。LESS 是一种 CSS 预处理器，它提供了一些额外的功能，例如变量、嵌套、混合等，可以使样式的编写更加灵活和高效。下面是一个简单的 Magento 2 CSS 和 LESS 预处理的代码示例：

在 Magento 2 中，可以在主题文件夹中的 web/css/source 文件夹下创建 LESS 文件，例如 styles.less，并在该文件中编写样式，例如：

@primary-color: #007bff;
.page-title {
  font-size: 24px;
  color: @primary-color;
}
.btn-primary {
  background-color: @primary-color;
  border-color: @primary-color;
}

在上述代码中，定义了一个变量 @primary-color，并在 .page-title 和 .btn-primary 选择器中使用了该变量。这样，如果需要修改主题的主色调，只需要修改 @primary-color 变量的值即可，所有使用该变量的样式都会自动更新。

Magento 2 使用 Grunt 作为任务运行器来编译 LESS 文件，可以在主题文件夹中的 Gruntfile.js 文件中配置 Grunt 任务。下面是一个简单的 Grunt 配置示例：

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      options: {
        paths: ['web/css/source'],
        strictMath: true
      },
      files: {
        'web/css/styles.css': 'web/css/source/styles.less'
      }
    },
    watch: {
      less: {
        files: ['web/css/source/**/*.less'],
        tasks: ['less']
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['less', 'watch']);
};

在上述代码中，less 任务用于编译 LESS 文件，watch 任务用于监听 LESS 文件的变化并自动重新编译。可以使用以下命令启动 Grunt：

需要注意的是，在 Magento 2 中，所有的样式文件都应该使用 .less 后缀，并位于主题文件夹的 web/css/source 文件夹下，Grunt 任务会自动编译 LESS 文件并生成对应的 CSS 文件