1.0.2 • Published 4 years ago
less-theme-easy v1.0.2
less-theme-easy
write theme style more easy!
lessc usage
npm install -g less-theme-easyand then on the command line,
lessc file.less --theme-easywebpack 配置
const LessThemePlugin = require('less-theme-easy')
css: {
loaderOptions: {
// 给 less-loader 传递 Less.js 相关选项
less: {
plugins: [
new LessThemePlugin(),
],
}
}
}Try the following code
@color: red;
@borderColor: {
xl: #dddddd;
xxl: #ffffff
};
.link {
font-size: 12px;
/**
The following statement will be transfer
.white .link,
.white.link {
color: #dddddd;
}
.black .link,
.black.link {
color: #ffffff;
}
*/
color: theme({
white: #dddddd;
black: #ffffff;
});
/**
The following statement will be transfer
.xl .link,
.xl.link {
border-color: #dddddd;
}
.xxl .link,
.xxl.link {
border-color: #ffffff;
}
*/
border-color: theme(@borderColor);
background-color: theme({
white: #dddddd;
black: #123456;
});
a {
.hello {
&.h {
.white &, .white& {
color: @color;
}
}
}
}
}It will be compiled to
.link {
font-size: 12px;
}
.white .link,
.white.link {
color: #dddddd;
}
.black .link,
.black.link {
color: #ffffff;
}
.xl .link,
.xl.link {
border-color: #dddddd;
}
.xxl .link,
.xxl.link {
border-color: #ffffff;
}
.white .link,
.white.link {
background-color: #dddddd;
}
.black .link,
.black.link {
background-color: #123456;
}
.white .link a .hello.h,
.white.link a .hello.h {
color: red;
}Then,you can control the global style by adding the desired attributes to your topmost element.
<!--Global Settings style-->
<body class="white xl">
<div>...</div>
<div class="link">
<a>
...
</a>
</div>
<!--Set styles separately-->
<div class="link black">
<a>
...
</a>
</div>
</body>