Less css file path

Command Line Usage

Heads up! If the command line isn’t your thing, learn more about GUIs for Less.

Installing

The -g option installs the lessc command available globally. For a specific version (or tag) you can add @VERSION after our package name, e.g. npm install less@2.7.1 -g .

Installing for Node Development

Alternatively, if you don’t want to use the compiler globally, you may be after

This will install the latest official version of lessc in your project folder, also adding it to the devDependencies in your project’s package.json .

Beta releases of lessc

Periodically, as new functionality is being developed, lessc builds will be published to npm, tagged as beta. These builds will not be published as a @latest official release, and will typically have beta in the version (use lessc -v to get current version).

Since patch releases are non-breaking we will publish patch releases immediately and alpha/beta/candidate versions will be published as minor or major version upgrades (we endeavour since 1.4.0 to follow semantic versioning).

Server-Side and Command Line Usage

The binary included in this repository, bin/lessc works with Node.js on *nix, OS X and Windows.

Usage: lessc [option option=parameter . ] [destination]

Command Line Usage

lessc [option option=parameter . ] source> [destination] 

If source is set to `-‘ (dash or hyphen-minus), input is read from stdin.

Examples

Compile bootstrap.less to bootstrap.css

lessc bootstrap.less bootstrap.css 

Options specific to lessc

For all other options, see Less Options.

Silent

Stops any warnings from being shown.

Version

Help

Prints a help message with available options and exits.

Makefile

Outputs a makefile import dependency list to stdout.

No Color

Clean CSS

In v2 of less, Clean CSS is no longer included as a direct dependency. To use clean css with lessc, use the clean css plugin.

Browser Usage

Using Less.js in the browser is the easiest way to get started and convenient for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using Node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to » stylesheet/less «:

link rel="stylesheet/less" type="text/css" href="styles.less" /> 

Next, download less.js and include it in a tag in the element of your page:

script src="less.js" type="text/javascript"> script> 

Setting Options

You can set options either programmatically, by setting them on a less object before the script tag — this then affects all initial link tags and programmatic usage of less.

script> less = < env: "development", async: false, fileAsync: false, poll: 1000, functions: <>, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" >; script> script src="less.js"> script> 

The other way is to specify the options on the script tag, e.g.

script> less = < env: "development" >; script> script src="less.js" data-env="development"> script> 

Or for brevity they can be set as attributes on the script and link tags:

script src="less.js" data-poll="1000" data-relative-urls="false"> script> link data-dump-line-numbers="all" data-global-vars='< "myvar": "#ddffee", "mystr": "\"quoted\"" >' rel="stylesheet/less" type="text/css" href="less/styles.less"> 

Источник

Less — Урок 14. Импорты

Привет! Это конспект урока по импортам в Less. Импорт нужен для доступа одного файла, например index.less, к данным / переменным другого файла, допустим, из new.less.

Опционально расширение указывается для less файлов, т.е. если не указываем расширение, компилятор воспринимает импортируемый файл как less файл.

Импорт less файла

Допустим, у нас есть файл new.less со стилями:

Чтобы иметь доступ к этим и другим стилям, в index.less делаем импорт с помощью @import:

@import "new"; // импортируем new.less

Импорт css файла

По умолчанию, ничего не произойдет, поскольку компилируются только less файлы:

Нужно указать специальный флаг less и записать @import(less), тогда компилятор воспримет css файл как less, независимо от расширения:

Параметры импорта (keyword):

reference: использовать less файл, но не выводить его;
inline: включить исходный файл в вывод, но не обрабатывать его;
less: обработать файл как less, независимо от расширения;
css: обработать файл как CSS-файл вне зависимости от его расширения;
once: включать файл только один раз (по умолчанию);
multiple: включить файл несколько раз;
optional: продолжить компилирование, если файл не найден

Можно использовать более одного ключевого слова для @import , но при этом необходимо разделять их запятыми, например:

Параметры отдельным файлом

Еще удобно задавать параметры проекта в отдельном файле, затем импортировать его и использовать переменные. Например, в файле params.less укажем переменные и импортируем их в index.less:

Результат компиляции в bundle.min.css:

Возможно, понадобится gulp.js:

var gulp = require('gulp'); var less = require('gulp-less'); var autoprefixer = require('gulp-autoprefixer'); var concat = require('gulp-concat'); var sourcemaps = require('gulp-sourcemaps'); var cleanCss = require('gulp-clean-css'); var browerSync = require('browser-sync').create(); var config = < paths: < less: './src/less/**/*.less', html: './public/index.html' >, output: < cssName: 'bundle.min.css', path: './public' >>; gulp.task('less', function() < return gulp.src(config.paths.less) .pipe(sourcemaps.init()) .pipe(less()) .pipe(concat(config.output.cssName)) .pipe(autoprefixer(< browsers: ['last 6 versions'], //cascade: false >)) //.pipe(cleanCss()) // с ним импорт у меня не работает .pipe(sourcemaps.write()) .pipe(gulp.dest(config.output.path)) .pipe(browerSync.stream()); >); gulp.task('serve', function() < browerSync.init(< server: < baseDir: config.output.path >>); gulp.watch(config.paths.less, gulp.parallel('less')); gulp.watch(config.paths.html).on('change', browerSync.reload); >); gulp.task('default', gulp.parallel('less', 'serve'));

Это пока все про импорт в Less. Пока!

При написании статьи использовались материалы WebForMySelf.com

Источник