1.0.0 • Published 8 years ago
lessrem v1.0.0
lessrem
/less/demo.less
@import "./rem";
.demo {
width:rem(640);
height:rem(100);
box-shadow: rem(11) rem(22) rem(33) pink;
background: #eee;
}
/dist/demo.css
.demo {
width: 20rem;
height: 3.125rem;
box-shadow: 0.34375rem 0.6875rem 1.03125rem pink;
background: #eee;
}
/less/rem.less
// 关键需要 less-plugin-functions 来给 less 提供自定义函数支持
// You need less-plugin-functions
.function {
.rem(@size) {
// 640 是设计稿宽度
// 640 is psd width
return: @size/(640/320*16)+0rem;
}
}
view demo
http://fast-flow.github.io/lessrem/index.html
gulpfile.js
var gulp = require('gulp')
var less = require('gulp-less')
var LessPluginFunctions = require('less-plugin-functions')
gulp.task('less', function () {
gulp.src('less/**.less')
.pipe(less({
// less-plugin-functions is Important
// less-plugin-functions 为 less 提供自定义函数功能
plugins: [
new LessPluginFunctions()
]
}))
.pipe(gulp.dest('dist/css'))
});
package.json
"dependencies": {
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"less-plugin-functions": "0.0.2"
}
local test | 本地测试
git clone https://github.com/fast-flow/fast.git
# or
https://github.com/fast-flow/fast/archive/gh-pages.zip
cd lessrem
npm install
gulp
fis-less
var LessPluginFunctions = require('less-plugin-functions')
fis.match('*.less', {
rExt: '.css',
parser: fis.plugin('less-2.x', {
plugins: [
new LessPluginFunctions()
]
})
})
1.0.0
8 years ago