magento2-LESS

AmyChen

家中无矿，缸中无粮，除了勤奋，别无选择

定位样式
定位一个被应用到特定元素的CSS规则
根据下面的回退计划来搜索：
<current_theme_dir>/web/css/------------------------------主题样式 
<current_theme_dir>/<Namespace>_<Module>/web/css/---------模型主题样式 
<parent_theme_dir>/web/css/-------------------------------父主题样式 
<module_dir>/view/frontend/web/css/-----------------------前端模型样式 
<module_dir>/view/base/web/css/base-----------------------模型样式

使用LESS编辑主题风格

当你创建主题后，你可以修改下风格以改变网站的页面视觉。

要改变风格，你可以使用Magento 2中两个LESS预处理类型中的一个：

服务端预编译LESS;
使用less.js的客户端预编译LESS

lessphp

magento2 内置lessphp，在developer模式下会自动编译LESS。
[然而并没有用，如果less写错了会导致lessphp编译失败，而且不会提示你已经失败，你只会看到乱成一团的页面。]
[另外lessphp并不会加source map定位信息，在页面上看到的CSS无法追踪对应的LESS代码，对于前端来说，不能定位就相当于无法工作。]

那就只有使用grunt来编译less，如果已经安装了nodejs，使用以下代码部署grunt

npm install -g grunt-cli
npm install
如果你使用自己的主题，你还需要在grunt的配置文件里追加less的配置
// dev/tools/grunt/configs/themes.js
mytheme: {
    area: 'frontend',
    name: '<Vendor>/<Theme>',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    dsl: 'less'
然后使用以下代码可进行less编译