Is there an option in LESS to import the contents of a CSS file rather than adding an #import directive?
Example
//example.less
#import url("../Css/site.css");
#import url("components.less");
//example.css
#import url("site.css"); // I DON'T WANT THIS!
.component1 { ... }
.component2 { ... }
Can this be done with LESS?
In less you have different options for importing.
Syntax: #import (keyword) "filename";
The following import directives have been implemented:
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 the file as a Less file, no matter what the file extension
css: treat the file as a CSS file, no matter what the file extension
once: only include the file once (this is default behavior)
multiple: include the file multiple times
optional: continue compiling when file is not found
More than one keyword per #import is allowed, you will have to use
commas to seperate the keywords: Example: #import (optional,
reference) "foo.less";
more info in docs.
To answer my own question; YES!
#import (less) url("../Css/site.css");
Related
I'm compiling my SCSS with gulp-scss. My styles.scss file looks like this:
#import "node_modules/bulma/sass/utilities/initial-variables";
#import "node_modules/bulma/bulma";
#import 'src/styles/navigation';
The second line of this code imports Bulma, the source code for which can be found here. This file imports some utilities, including some mixins I need.
Unfortunately when I try to use those mixins in my navigation.scss file:
#include desktop {
.navbar {
min-height: 135px;
}
}
I get the following error:
Worth noting that if I #import the mixins and variables file in navigation.scss directly, it works fine. What's going on here?
The problem was with my file names. They were not preceeded by an underscore, which appears to be the convention for the compiler to work properly. So src/styles/navigation.scss became src/styles/_navigation.scss. The import remained the same:
#import 'src/styles/navigation';
I will assume you use gulp-sass.
What I usually do is creating a path in the gulp file for better reference and also for letting know gulp I will be using these node resources in .scss files.
In this case I'm calling foundation and compass mixins modules in the include paths.
This is a task in the Gulfile.js
gulp.task('styles', function () {
gulp.src('src/scss/application.scss')
.pipe(sass({
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/compass-mixins/lib'
],
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest('./public/css/'))
});
Then in your main .scss or where you want to place the import for those files you can just simply add:
#import 'compass';
#import 'foundation';
#include foundation-everything;
Here I call the compass file inside this node module path I specified in the gulp file, and also the foundation.scss (which imports a lot of other scss files).
Then once foundation is availabe I initialize all the mixins.
So summing up:
Possible solutons:
1: Check if this gulpfile definition with include path solves you routes errors.
2: check if the modules you are importing don't have a trigger mixin to enable them, such as foundation has his "foundation-everything"
Hope this helps.
Ok so for example, lets say I have main.css, main.sass, about.sass, and contact.sass.
main.sass should have #import about.sass and #import contact.sass. Then, when main.sass is compiled, main.css should have all the content of about.sass and contact.sass. Not #import's.
Main.sass
#import 'tools/fonts'
#import 'tools/normalize'
#import 'tools/grid'
Now when this is converted to main.min.css it looks exactly the same as in main.sass
#import url(tools/fonts.css);
#import url(tools/normalize.css);
#import url(1-tools/grid.css);
Shouldn't there be no #imports, just the combined css code?
The files you are importing don't have names that start with an underscore. If the file starts with an underscore then SASS knows that it is a partial file, and should be included wherever it is imported.
If a file name does not start with an underscore, then it will be generated as it's own CSS file.
This behaviour is described here.
Partials
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
#import "colors";
and _colors.scss would be imported.
Note that you may not include a partial and a non-partial with the same name in the same directory. For example, _colors.scss may not exist alongside colors.scss.
Here is my less file:
#import "app.less";
#import (inline) "rtl.css";
when I compile it (using WinLESS), it outputs the following:
// content of rtl.css
// content of app.less then
I mean the css import statement, which coming later in less file, comes first in compiled css. Why it happen?
As Harry said, there is a issue on github, which says because of CSS limits, any #import should placed before any other contents at the CSS file. (W3 page)
A simple solution is changing CSS file extension to .less. Or put (less) after #import keyword in the statement:
#import (less) "rtl.css" to make LESS knowing it as a LESS file. (LESS Import Options)
I have a parent SCSS file that is importing my other CSS files:
#import 'variables.css';
#import 'helpers.css';
#import 'layout.css';
And I have three scss files: variables.css.scss;helper.css.scss & layout.css.scss.
In variables I am defining colours, fonts and sizes to be used throughout the site. The trouble is I assumed these variables will be available to the other documents so long as it is imported first, but I am getting Undefined Variable errors.
I assume I just have the process wrong. Where am I going wrong?
You can do it that way if you're ok with an extra file as a middleman.
_master.css.scss:
#import 'variables.css';
#import 'helpers.css';
#import 'layout.css';
site.css.scss:
#import '_master.css';
The problem is how you named the scss files. The way you are importing the files makes SASS think that you are using the #import CSS rule https://developer.mozilla.org/en-US/docs/CSS/#import
Rename those files only with the scss extensions, remove the ".css", and import them like this
#import 'variables.scss';
#import 'helpers.scss';
#import 'layout.scss';
or you can even skip the extension at all
#import 'variables';
#import 'helpers';
#import 'layout';
If you want variables to be available on the other files you'll need to include that css in them as well. So basically layout.css.scss and helper.css.scss will need to have #import 'variables.css'
Can you import .css files into .less files...?
I'm pretty familiar with less and use it for all my development. I regularly use a structure as follows:
#import "normalize";
//styles here
#import "mixins";
#import "media-queries";
#import "print";
All imports are other .less files and all works as it should.
My current issue is this:
I want to import a .css file into .less that references styles used in the .css file as follows:
#import "../style.css";
.small {
font-size:60%;
.type;
}
// other styles here
The .css file contains a class called .type but when I try to compile the .less file I get the error NameError: .type is undefined
Will the .less file not import .css files, only other .less ones...? Or am I referencing it wrong...?!
You can force a file to be interpreted as a particular type by specifying an option, e.g.:
#import (css) "lib";
will output
#import "lib";
and
#import (less) "lib.css";
will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.
If you want your CSS to be copied into the output without being processed, you can use the (inline) directive. e.g.,
#import (inline) '../timepicker/jquery.ui.timepicker.css';
I had to use the following with version 1.7.4
#import (less) "foo.css"
I know the accepted answer is #import (css) "foo.css" but it didn't work. If you want to reuse your css class in your new less file, you need to use (less) and not (css).
Check the documentation.
Change the file extension of your css file to .less. You don't need to write any LESS in it; all CSS is valid LESS (except of the MS stuff that you have to escape, but that's another issue.)
Per Fractalf's answer this is fixed in v1.4.0
From the LESS website:
If you want to import a CSS file, and don’t want LESS to process it,
just use the .css extension:
#import "lib.css"; The directive will just be left as is, and end up
in the CSS output.
As jitbit points out in the comments below, this is really only useful for development purposes, as you wouldn't want to have unnecessary #imports consuming precious bandwidth.
Try this :
#import "lib.css";
From the Official Documentation :
You can import both css and less files. Only less files import
statements are processed, css file import statements are kept as they
are. If you want to import a CSS file, and don’t want LESS to process
it, just use the .css extension:
Source : http://lesscss.org/
If you just want to import a CSS-File as a Reference (e.g. to use the classes in Mixins) but not include the whole CSS file in the result you can use #import (less,reference) "reference.css";:
my.less
#import (less,reference) "reference.css";
.my-class{
background-color:black;
.reference-class;
color:blue;
}
reference.css
.reference-class{
border: 1px solid red;
}
*Result (my.css) with lessc my.less out/my.css *
.my-class {
background-color: black;
border: 1px solid red;
color: blue;
}
I'm using lessc 2.5.3
If you want to import a css file that should be treaded as less use this line:
.ie {
#import (less) 'ie.css';
}
since 1.5.0 u can use the 'inline' keyword.
Example: #import (inline) "not-less-compatible.css";
You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS.
So you can use this to include the file in the output so that all CSS will be in one file.
(source: http://lesscss.org/features/#import-directives-feature)