LESS to SASS Ampersand Workaround

本小妞迷上赌 提交于 2019-12-25 03:22:42

问题


I'm working on a less to sass conversion and have a few instances of classes on the html tag that I need to use to modify the styling of a particular class:

.shell {
    width: 100%;
    ...

    .medium-viewport & {
        width: 800px;

        .lt-ie8& {
            width: 750px;
        }

        ...

    }

    .wide-viewport & {
        width: 950px;
        ...
    }

    ...

}

I want to join the lt-ie8 class with the medium-viewport class:

.lt-ie8.medium-viewport .shell {width: 750px;}

Some of the files have a lot of rules in them for different conditions coming in on the html tag, mostly viewports and modernizr classes.

Since sass does not support having the & at the end with no space, I'm wondering what other workarounds I could use.

Obviously, I could change the rule block structure and hard code the .lt-ie8.medium-viewport .shell {} selector outside the .shell block but I'm seeing that as the least desirable option as it breaks file structure, and obviously repetitious.

Kind of frustrating since less supports it and its the only bump in the road I've hit so far in the file conversions. Any ideas?

来源:https://stackoverflow.com/questions/25130489/less-to-sass-ampersand-workaround

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!