I just start learning css less and I'm using Less v1.5.0 and WinLess to compile the less file. I have a bunch of code as below:
#import "bootstrap.css";
#import "bootstrap-responsive.css";
.test{
.well;
}
but WinLess give me an error says .well is not defined. I was expecting it to pull out the content of well class from bootstrap.css. So where did I do wrong? Thanks!!
CSS files are not processed by LESS when you import them, therefore you cannot use their classes as mixing.
Import them as LESS files:
#import (less) "bootstrap.css";
#import (less) "bootstrap-responsive.css";
.test{
.well;
}
Read more here (enter Language -> Importing).
Related
The original CSS have the #import keyword, which helps us with including an external CSS file.
So, what is the difference between this #import and the one from SASS/SCSS?
#import in CSS: CSS has an import option that lets you split your CSS into smaller, more maintainable portions.
Whereas,
#import in SASS/SCSS: Sass builds on top of the current CSS #import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
For Example:
In _reset.scss
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
In base.scss
// base.scss
#import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
References: SASS Guide
css #import happens at runtime, Sass #import at build time.
I recommend to use Sass imports wherever it is possible.
Assume that we have the following code written in native CSS:
#import "style1.css";
#import "style2.css";
#import "style3.css";
As a result, you getting one file, which is downloading another files. These requests are sent separately to your server and you get 3 files in response. Just look at the developer console to notice this problem.
In Sass way files are concatenated to one file (by the frontend workflow you use) and it's just one request to your server.
From the docs:
Sass extends CSS's #import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together.
However, the use of #import is now discouraged in Sass, which recommends using #use instead.
This should reduce the confusion between css and scss #import statements.
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)
So I would like to get Codekit to minify all my css + less files Upon save.
In the header of my 'style.less' I am trying to import the 'css' file as a less context like:
#import (less) "normalize.css";
#import (less) "file1.css";
#import (less) "file2.css";
#import (less) "file3.css";
body {....
In the hope it will sort of be 'included' then minified on save. I cant seem to get it to work with any combination of #import, saving the css files as less files.
Can it be done?
So my issue was trying to #import font replacement. When looking inside the font replacement file there was an import happening over another site. I believe this is what was causing the miniification to fail...
Hope this helps someone else.
I'm using LESS. From Google PageSpeed I've learnt that, using #import in CSS file will hamper the site speed. So I'd like to exclude any #import thing from my CSS. I have 2 different stylesheets reset.css, and rebuild.css - to avoid #import I copied all of their code into my main stylesheet. So the real styles of my site got below many code and that's a problem. So I need the two stylesheets to #import into the styles.less (main stylesheet) file, in a way, so that, they actually won't generate any #import when I'm compiling them with WinLESS into pure styles.css. I want them to insert physically into the style.css when I'll compile the styles.less into styles.css.
I want styles.less like:
#import('reset.css');
#import('rebuild.css');
/* SITE STYLES HERE */
But want the rendered styles.css to be:
code from reset.css
code from rebuild.css
/* THEN, SITE STYLES HERE */
I'm using WinLESS to compile the CSS file from LESS, and NOT USING .less with JavaScript directly, but using the styles.css only.
The simplest way:
#import (less) 'reset.css';
#import (less) 'rebuild.css';
/* SITE STYLES HERE */
You can just use an import statement in your less file. it will be included (css code is inserted) in your result css file.
read more on winless example page (click on Importing)
Example:
styles.less:
#import('other.less');
.myOtherClass {
// other rules
}
other.less:
.myClass {
// rules
}
after compiling using winless (or any other less compiler); result.css:
.myClass {
// rules
}
.myOtherClass {
// other rules
}
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)