系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为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 文件