I am relatively new to programming and markup languages.
Is there a way to add classes in less from an external css file?
/* this is in a single less file */
.foo {
color: blue;
}
h1 {
.foo; /* works just fine and turns my h1 html tag blue*/
}
/* now if want to add (for examlpe) a bootstrap class in my less file like so*/
#import "bootstrap.css"; /*it is in the same folder as my less file */
h1 {
.text-danger; /*throws an error */
}
This should make my h1 tag red, as I imported the bootstrap.css file.
Now I tried this with creating my own css file and import that to my less file and do the same thing but it doesn't work either.
What am i doing wrong?
Related
I am trying to apply CSS to Vaadin 8 component. I have followed this example and still unable to apply CSS. I understand that i can call the addStyleName method and i am able to apply the build in ValoTheme styles (for example ValoTheme.PANEL_BORDERLESS does make a button smaller), but my custom styles are ignored. I have tried defining my custom CSS rules in the following files:
/src/Main/webapp/VAADIN/themes/apptheme/styles.css
#import "../reindeer/styles.css";
.mystyle {
color: red;
background: #012345;
background-color: #012345;
}
Then in Java i create a button:
Button btn = new Button(" Test ");
btn.addStyleName("mystyle");
My custom style does not get applied to the button. I suspect that i am not defining CSS correctly. Please share your knowledge of how to do this correctly in Vaadin 8.
This is not related, but are you actually using a reindeer theme?
Otherwise, you should put you styles in your own theme file (the default one generated from an archetype is mytheme.scss)
It's suggested to leave styles.scss as it is. Also, it's mentioned in comments section of the file:
This file prefixes all rules with the theme name to avoid causing conflicts with other themes. The actual styles should be defined in mytheme.scss
If you want, you could add your styles there as well under
.mytheme {
#include addons;
#include mytheme;
.testStyle{
color: red;
background: #012345;
background-color: #012345;
}
}
While it works, I will still suggest to add them to your custom scss file (Based on your folder name it is apptheme.scss)
Mine mytheme.scss looks like this:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
.testStyle{
color: red;
background: #012345;
background-color: #012345;
}
}
After styles are applied, button looks like this:
Style files are located under webapp/VAADIN/themes/mytheme
I'm doing media queries in a seperate scss file named _media.scss, so I can seperate my main style.scss file from the media queries to make things easier to manage.
However it seems that because i import the _media.scss file at the top of the style.scss file then because of the nature of the cascading rules, the style.scss rules are overriding the _media rules as they come after the import.
To get the _media rules to take priority i'm having to add on !important to a lot of rules. I tried cutting and pasting all the media queries to the bottom of the style.scss file and it works without the !important flag.
Is there any way to give the _media partial priority over the style file so I fix this?
Code:
Inside the style.scss file:
#import 'config';
#import 'utilities';
#import 'form';
#import 'dropdown';
#import 'animations';
#import 'media';
.logo {
font-size: 2em;
}
Inside the _media.scss:
#media(max-width: 500px) {
.logo {
font-size: 1.5em;
}
}
Inside the chrome dev tools, i've got the same classes as above with font-size: 1.5em crossed out.
Not sure why 2em is taking priority?
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
I need to include css from external recourse into my result css. I use LESS preprocessor.
Is there the way to do this? For example,
.wrapper {
#import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
But that's not working for me. I get the same css:
.wrapper {
#import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
I want it to be:
.wrapper .hljs-comment {
color: #687d68;
}
.wrapper .hljs-variable,
.wrapper .hljs-attribute,
/* etc. */
CSS files are imported by leaving the #import directive as-is. If you want a CSS file to be treated as a LESS file (that is, inlined and namespaced) you should use #import (less):
.wrapper {
#import (less) 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
You should be aware that the file will be downloaded every time the less file gets compiled, so compilation performance is less than optimal.
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.