Is there a postcss solution for importing a file into / nesting inside a selector? I can't get postcss-import or postcss-nested to do what I'm after.
.some-selector {
#import 'some.css';
}
Given a file e.g. import-me.css containing
div {
color: red;
}
I'd like to process entry.css
.some-class {
#import 'import-me.css';
}
And see the output
.some-class div {
color: red;
}
Thanks!
UPDATE: for the trivial example, you can bodge it by using postcss-nested-import AND postcss-nested but this has a couple of drawbacks because (a) postcss-nested-import paths are relative to the script running it, whereas css convention is that imports should be relative to the calling file (b) the maintainer has abandoned it https://github.com/eriklharper/postcss-nested-import/issues/2 <--- this issue in turn references https://github.com/postcss/postcss-import/issues/214 which is a dead thread :-(
postcss-partial-import seems to do the trick.
https://github.com/jonathantneal/postcss-partial-import
Related
I want to override the default values in scss file like
.auth-form {
width: 800px;
}
I change the width values in class auth-form scss file. But it is not working.
How to override the values in scss file. Please let me know.
Making assumptions on what will be the case you are probably facing a scope issue. If you have the following css:
.foo .bar {
color: red;
}
.bar {
color: blue;
}
.bar will always be red, because you are not overwriting the selector in the correct scope.
So in your case you need to specify the full selector:
.full.scope .auth-form {
width: 800px;
}
Where .full.scope is the full selector to .auth-form. You can get the full selector using on the css you eqnt to overwrite using the browser inspector.
Another option will be to make the property prioritary using the !important css keyword so it will overwrite any previous definition:
.auth-form {
width: 800px !important;
}
Hope it helps.
.scss (sass) files are not directly loadable into browsers, they need to be compiled to .css files first, then those are loaded into browsers by your application.
It seems you are not performing the compilation step (also called preprocessing or precompiling) and this is the reason you do not see the modification in your app.
How the compilation should be done varies. You may use sass directly (see here) or if you are using a framework there may be tools that combine this and other automation steps. For instance in Ruby-on-Rails you would install the required compile tool in the form of a gem and run:
bundle exec rake assets:precompile
As you do not provide details on your environment / framework is is difficult to provide the exact procedure applicable to you.
I was wondering if anyone had found a way to create different CSS files from the same less files.
In my context I created a different customer less file. This file consist in a series of variable with their settings for the theme of a specific color and other CSS instruction.
I also have a less file for the default settings.
Here a representation of the less folder
Less Folder
My less folder
All the style specific to my context
customer.default.less
cutomer.less
I would like to compile two different css from the "My less folder" the first one would use the customer.default.less file in the variables. The second one would use the customer.less file. Creating the customer.default.css and the customer.css. In order of having the customer.css and the customer.default.css all way in synch together.
I'm currently using the compiler plugin in webstorm. Am I using the right tool?
Thanks
You can indeed produce multiple CSS outputs from a Less file, provided you use 'control' Less files.
E.g., here is the main stylesheet we're using for a site:
/* main-stylesheet.less */
#maincolor: #ff0000;
#secondarycolor: #00ff00;
body {
color: #maincolor;
background-color: #secondarycolor;
}
Now, we want to produce a secondary stylesheet (to output 'customer.default.css', or 'customer.css' as you prefer) - we import the main Less and override its variables:
/* secondary-stylesheet.less */
#import "main-stylesheet";
// Override variables from the 'main' stylesheet.
#maincolor: #0000ff;
Note that we do not define any rules or set any styles here, only override the variables.
Here are the output CSS files:
/* main */
body {
color: #ff0000;
background-color: #00ff00;
}
/* secondary */
body {
color: #0000ff;
background-color: #00ff00;
}
This is possible because Less uses lazy loading.
Be sure that the file watcher setting 'Track only root files' is disabled; otherwise the main stylesheet in our example would not produce any output css.
(Also, I would separate the two variable declaration blocks into their own Less files - perhaps as theme-variables-default.less and theme-variables-override-a.less)
I think you can accomplish this using the grunt-contrib-less GruntJS task with something like this in your Gruntfile.
less: {
development: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
},
production: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
}
}
LESS isn't my bread-and-butter, but using Sass enough and the grunt-contrib-sass task I assume the same set of features would exist.
In base.less:
html{font-size:16px}
body{color:green}
In theme.less:
html{color:red}
In main.less:
#import "base.less"
#import "theme.less"
When compiled it outputs:
html{font-size:16px}
body{color:green}
html{color:red}
How can I output this?
html{font-size:16px;color:red;}
body{color:green}
I tried this in theme.less without success:
html:extend(html) { color:red }
Do I need to use a CSS optimizer or is there something in LESS I can use?
Manual Way
I found an answer, Devilo.us. I tried your code and it outputs what you want. This is an external tool though. You've to do it manually.
Grunt Way
Zach Moazeni made a tool that handles this. Check that page for docs.
If you're using Grunt, you can add the grunt-csscss task which allows you to compile LESS to CSS (without redundancy) just by saving your LESS when grunt watch is running. I guess this is definitively what you're looking for.
It is possible to force "consolidated" selector styles via mixins:
html {.html()}
.html() {font-size: 16px}
body {color: green}
.html() {color: red}
.html() {background-color: blue}
// etc.
Though usually this kind of theming is achieved via variables:
// base.less
#text-color: blue;
html {
font-size: 16px;
color: #text-color;
}
// theme.less:
#text-color: yellow;
I wanted to use twitter bootstrap CSS only in a specific element in my web page.
I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved #import outside #my_div then I got all css definitions for twitter boostrap.
#my_div {
#import "../twitter_bootstrap/lib/bootstrap.less";
}
How can I namespace a less css file?
I am not using less on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users.
Edit bootstrap.css / bootstrap-responsive.css
.tb {
// copy/paste the entire bootstrap.css
}
Recompile with less or use an online less compiler - http://winless.org/online-less-compiler
Edit the now-compiled file and change body {} CSS declarations to tb {}.
Use the new CSS file.
Place your "bootstrapped" content inside a <div class='tb'></div>
LESS documentation has a section about namespaces.
So you could define your lib in a separate document:
#ns {
.twitter () {
// Instructions to be used later
// Nothing will appear in compiled CSS except if called later (because of parenthesis)
}
}
import this file at the beginning of the CSS file to be compiled and use these instructions:
#my_div {
#ns > .twitter;
}
This is how I have done it. This takes place in the root of the bootstrap folder that is downloaded, or cloned from git.
## ./less/namespace.css (New file)
#ns {
.twitter() {
#import "less/bootstrap.less";
}
}
## ./style.less
#import "less/namespace.less";
.namespace {
#ns > .twitter;
}
Then run less style.less > style.css
Here is how I did it, based on majgis's github fork above:
bootstrap-ns.less:
#import "namespace.less"
.bs {
#ns > .twitter;
}
namespace.less:
#ns {
.twitter(){
#import "bootstrap.less";
}
}
You then reference bootstrap-ns.less in your html page. This was tested with dotLESS.
if you have control over the compilation parameters just set strictImports to false and work as you intended to everything should be fine. consider looking at less-strictimports or at this issue.
I really like the idea and the concept of LESS. Yet I stumbled upon a bug, which i reported quite a while ago to the author but did not yet get any feedback. Maybe it's just me who is doing something wrong.
My application.less-File that looks similar to this:
#import "reset";
#import "config";
#import "header";
#import "forms";
[…]
I like that it is possible to use the #import rule to split up my files to gain a better overview of my css-declarations. Yet every imported file needs to re-import the config.less-File again to be able to make use of the mixins and variables i defined in there.
I bet you already know about what kind of redundancy I am driving at: Everytime the config.less is imported, its "output" becomes part of the application.css.
My config-file contains about 200 lines of code. Since I split up my CSS-into about 5 files (based on my controller names) that need to re-import the config, I end up having about 1000 lines of generated CSS-Code that are 100% redundant.
Only solution that I can come up with is not to split up my files, what I really like to avoid.
Although not ideal, the practical reason for this is that the files you import theoretically don't need to contain any CSS. Typically, you would have variables and dynamic mixins, which don't contribute to your CSS output:
lib.less:
#colors {
#blue: #0011ff;
#red: #ee2222;
}
.button (#width: 10px) {...}
main.less:
#import "lib";
a { color: #colors[#blue]; }
output, main.css:
a { color: #0011ff; }
#colors {} and .button will not be output in this case.
LESS now supports #import-once "stylename.less";
Maybe you can split them up in your development environment and then merge them together, not needing all the extra code, when you deploy to your live web server?
You can use dynamic mixins in your LESS config file if they are declared and mixed-in using $ instead of ..
In config.less:
$mixin
{
a { color: #light; }
h2 { //etc.
}
In header.less:
#import "config";
.header
{
$mixin;
}
Source. I've also tried this and it works.