less | 易学教程

Import .css file in Less using nodejs gulp

阅读更多关于 Import .css file in Less using nodejs gulp

问题 According to this question it's possible to import css file from less v.1.4.0. I tried to use gulp-less task, and it's not working. There's any way to import css file like this: @import "../spritesheet.css"; with nodeJS gulp? 回答1: There are several ways to include files in LESS, depending on what you need, using @import ([keyword]) "filename" . Allowed keywords are: reference: use a Less file but do not output it inline: include the source file in the output but do not process it less: treat

What should my LESS @import path be?

阅读更多关于 What should my LESS @import path be?

问题 Here's the scenario: I'm running Django 1.3.1, utilizing staticfiles, and django-compressor (latest stable) to, among other things, compile LESS files. I have an "assets" directory that's hooked into staticfiles with STATICFILES_DIRS (for project-wide static resources). In that directory I have a "css" directory and in that a "lib.less" file that contains LESS variables and mixins. So the physical path is <project_root>/assets/css/lib.less and it's served at /static/css/lib.less . In one of

less 函数循环变量写法

阅读更多关于 less 函数循环变量写法

案例上一个覆盖element-ui按钮 less @primary: #3a70df; @danger: #df3a25; @success: #2fcd77; @warning: #fba13b; @white: #ffffff; @black: #000000; @textBlack: #383838; @ccc: #cccccc; @colorlist: @danger, @primary, @success, @warning; @colorTypelist: danger, primary, success, warning; /* 按钮样式开始 */ .setBtnColor(@type,@color) { .el-button--@{type}.is-plain { border-color: @color; color: @color; background: @white; &:hover, &:focus { border-color: mix(@white, @color, 20%); color: mix(@white, @color, 20%); background-color: mix(@white, @color, 90%); } &:active { border-color: mix(@black, @color, 20%); color:

what is the LESS CSS statement @import-once good for?

阅读更多关于 what is the LESS CSS statement @import-once good for?

问题 Even after reading https://github.com/cloudhead/less.js/issues/212, I don't understand the meaning of the @import-once statement. 回答1: When you work with LESS you can have few less files (I have like 12 including media-queries, resets, etc), and sometimes you don't have the control of how many @import you have done between files, and that's the reason behind @import-once , to avoid style duplication. When should I use @import-once instead @import ? Suppose you have main.less which imports

How to iterate keyframe percentages Less CSS

阅读更多关于 How to iterate keyframe percentages Less CSS

问题 I have read Less#loops and Less#functions docs. But I can't figure out how to apply percentage function, or a similar way to loop percentages progressively without using such function. When I calculate it, out of a loop, as pointed out in another post width: percentage(140/620); , it works, but not when trying to loop using variables. On 2014 @pixelass suggested to use an external library to loop easier, but I don't feel like using an external library. What I am trying to loop (and doesn't

Dynamic CSS properties in LESS?

阅读更多关于 Dynamic CSS properties in LESS?

问题 I am writing a less stylesheet for a bi-directional website, and I need to write a single less file and produce two different stylesheets one for left-to-right layouts (ltr) and the other for right-to-lef layouts (rtl) so when i am styling for rtl layouts, i want to convert every left value to be right, wither it is a float, padding or margin, to do so, I have defined the required variables at the top of my less file as follows: @left: right; @right: left; simply, i can float elements

Using a general purpose selector as a mixin in LESS CSS

阅读更多关于 Using a general purpose selector as a mixin in LESS CSS

问题 I know about mixins and parametric mixins. What we are looking for is a way to make any general purpose selectors in CSS / LESS into a mixin. Eg in Twitter BootStrap, we have here .navbar .nav > li { float: left; } If I have to use it in a class say .mynavbar I want to be able to do this INPUT-> .mynavbar { .navbar .nav >li; } OUTPUT-> .mynavbar { float:left; } Now I know this can't be done with the current version of LESS as the compiler flags a parser error. I wanted someone to help me out

前端自动化Gulp工具常用插件

阅读更多关于前端自动化Gulp工具常用插件

npm init命令初始化当前文件夹后，在当前文件夹新建gulpfile.js文件。当前目录下的所有操作流都在gulpfile.js文件中定义。 gulp自动化 gulp-uglify （JS压缩） gulp-uglify安装: npm install --save-dev gulp-uglify gulp-uglify用来压缩js文件，使用的是uglify引擎。 var gulp = require('gulp'); //加载gulp var uglify = require('gulp-uglify'); //加载js压缩 // 定义一个任务 compass gulp.task('compass', function () { gulp.src(['js/*.js','!js/*.min.js']) //获取文件，同时过滤掉.min.js文件 .pipe(uglify()) .pipe(gulp.dest('javascript/')); //输出文件 }); 小技巧，第二个参数 '！js/*.min.js' 是用来过滤掉后缀为min.js，！感叹号为排除模式。 gulp-minify-css（CSS压缩） gulp-minify-css安装： npm install --save-dev gulp-minify-css 可以使用它来压缩CSS文件 var gulp =

Can Bootstrap 3 Grid Be Extended?

阅读更多关于 Can Bootstrap 3 Grid Be Extended?

问题 I'm working on a project where we are leaving the Bootstrap less files untouched. We also do not want to use Bootstrap classes in the HTML, since we may not use it in the future. I'm experimenting with using the "extend" feature to group our class names with the BS version in the style sheet. This has worked well except with the grid columns. Since the column class names are built with the ".make-grid" mixin, I can't extend them. Any thoughts on how to not use BS classnames for the grid AND

LESS css set dynamic background image with mixin

阅读更多关于 LESS css set dynamic background image with mixin

问题 I am using LESS CSS . I am currently using Mixins with variables. Something like this works okay : .border-radius (@radius) { border-radius: @radius; } #header { .border-radius(4px); } This is not : .bg-img(@img) { background-image:url(@img); } #logo { .bg-img("../images/logo.jpg"); } i have tried combinations of using ' & " in the background-image:url ('') & ("") but then it tries to get the image as images/@img instead of the image name. other wise it gives me an error of Cannot call method