I have a .less file where I keep all my global variables. For example:
lib.less
#primary-color: red;
.primary-font{
font-family:Arial;
}
On one of my pages I have a page-specific CSS file. For example:
Homepage.less
#import "lib.less";
.Login
{
color:#primary-color;
.primary-font;
}
I preprocess LESS using dotless. This renders "Homepage.less" to the client as:
.primary-font{
font-family:Arial;
}
.Login
{
color:red;
font-family:Arial;
}
I don't want .primary-font to be rendered as I'm only using this as a style collection for importing into other classes. The output I really want is:
.Login
{
color:red;
font-family:Arial;
}
Is there any way of importing styles from another .less file for use in other classes, without them being rendered to the client?
This has nothing to do with MVC, this is something you have to do in the LESS itself. See: http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin
Essentially, if you don't want the mixin output as a class, you just need to suffix it with parenthesis:
.primary-font() {
font-family: Arial;
}
Related
I have the below HTML structure.
<html>
<a class="customcssstyle" href="#'>Link</a>
</html>
Now I need to have a style, such that on focus on the link , it should appear in red.
For that in normal CSS, we write it as:
a.customcssstyle:focus
{
color:red;
}
May I know how we can write it using Less CSS.
CSS syntax is valid in less. But also you can do something like:
.customcssstyle
{
a {
&:focus {
color:red;
}
}
}
First of all: a is an inline element and should be inside a block element (not html). Then in css for calling a class you need a dot, e.g. .customcssstyle and not the value of the attribute class only. At least to select the focus state of this element just call the class with the pseudo selector :focus.
.customcssstyle:focus {
color: red;
}
Background:
Im working on a framework that has browser classes applied to the HTML element.
Im trying to apply a cross browser fix (for safari5) whenever I extend to a mixin.
Example Markup:
<html class="safari5">
<div class="child"></div>
</html>
LESS:
.mixin{
content:"cool style mixin that breaks on safari";
}
.safari5{
.fix{content:"hacks safari5's bullshit and semi-fixes cool style mixin"!important;}
}
.child{
&:extend(.mixin);
&:extend(.fix);
}
/*
Expected CSS Output:
.mixin,
.child {
content: "cool style that breaks on safari";
}
.safari5 .fix,
.safari5 .child{
content:"hacks safari5's bullshit and semi-fixes cool style mixin"!important;
}
*/
Thanks!
See extend all. E.g.:
.mixin {
1: 1;
}
.safari5 {
.fix {2: 2}
}
.child {
&:extend(.mixin, .fix all);
}
LESS has mixins which make it easy to re-use properties from one class or ID ruleset in another. Is there a way to reference properties for an element (without class or ID) inside another ruleset? I'd like to do something like:
// Defined in a base .less file somewhere
a {
color: blue;
}
// Defined within a more specific file
.myClass a {
color: red;
}
// #myElement is used within .myClass, but I'd like to re-use the
// base styles.
#myElement a {
a();
}
You can use *:extend() pseudo-class for that:
#myElement a {
background: green;
&:extend(a);
}
See: Extend
I need to set a Less variable to match the website's active theme, ie, each theme has a different color.
I'd like to set #themeColor to the right color, based on the HTML's body CSS class that defines the theme.
For example:
body.themeBlue { #themeColor: blue; }
body.themeRed { #themeColor: red; }
This way I'd only need to use the #themeColor variable inside the other Less files.
Can anyone help?
According to this (http://www.lesscss.org/#-scope) it is possible to do something like that, but I can't make it work. what is going on here?
The LESS file cannot read the actual class applied to the html body element at run time (you would probably need to implement a javascript solution to do something like that).
If you just want to have all themed css ready for use based on the body class, the best way to implement this to have all the necessary theme based css in a mixin, then apply it under the theme classes. This reduces code duplication. For example:
LESS
//mixin with all css that depends on your color
.mainThemeDependentCss() {
#contrast: lighten(#themeColor, 20%);
h1 {color: #themeColor;}
p {background-color: #contrast;}
}
//use the mixin in the themes
body.themeBlue {
#themeColor: blue;
.mainThemeDependentCss();
}
body.themeRed {
#themeColor: red;
.mainThemeDependentCss();
}
CSS Output
body.themeBlue h1 {
color: #0000ff;
}
body.themeBlue p {
background-color: #6666ff;
}
body.themeRed h1 {
color: #ff0000;
}
body.themeRed p {
background-color: #ff6666;
}
For some other answers that deal with aspects or ways of theming, see:
LESS CSS - Change variable value for theme colors depending on body class
LESS.css variable depending on class
LESS CSS: abusing the & Operator when nesting?
Variables in Less are actually constants and will only be defined once.
Scope works within its code braces, so you would need to nest your CSS within each theme you want (which means duplication).
This is not ideal as you would need to do this:
body.themeBlue {
#color: blue;
/* your css here */
}
body.themeRed {
#color: red;
/* your css here AGAIN :( */
}
You could, however, try to use variables like this:
#color: black;
#colorRed: red;
#colorBlue: blue;
h1 {
color: #color; // black
body.themeRed & {
color: #colorRed; // red
}
body.themeBlue & {
color: #colorBlue; // blue
}
}
You would only need to declare the colours once, but you would need to constantly do the "body.themeRed" etc. prefixes where the colour varies depending on the theme.
You could actually use #import to load your theme! So common.less would contain all your default styles and #themeColor will be applied to it.
.mainThemeDependentCss() {
//file with all themed styles
#import 'common.less';
}
//use the mixin in the themes
body.themeBlue {
#themeColor: blue;
.mainThemeDependentCss();
}
body.themeRed {
#themeColor: red;
.mainThemeDependentCss();
}
BTW you should avoid using body selector in your common.less, because it wouldn't work.
This is an existing general css rule (original file):
.caption-top {
color: red;
}
This is schematic, because in real life case, I need the .caption-top selector to become something else, depending on the context. But I would like to use a variable instead of changing the all occurrences of the selector. For example, in one context, it should become .field-name-field-caption-top. So I did this (wrapper file):
#caption-top: .field-name-field-caption-top;
#caption-top {
color: red;
}
This generates a LESS parse error. Is there another method to establish a rule to substitute a selector? So that, for the above example, the rule will finally look like this:
.field-name-field-caption-top {
color: red;
}
Additional info
The whole point is to not touch the original css file, because it comes from outside and will be overwritten, but instead, to wrap it and tell Less how to replace existing classes with classes used in a particular theme. If it is not possible to achieve, then acceptable solution will be to change the original file in an automatic way, like e.g. replace all occurrences of ".caption" with "#caption" (which I suggested in the above code sample) or make an import at the beginning etc. Then use a wrapper Less file (aware of the theme implementation) to specify what classes whould be replaced with what.
You can use escaping to achieve this:
#selector: '.myclass';
(~'#{selector}') {
color: red;
}
However you cannot do this:
(~'#{selector}') .another {
color: red;
}
To achieve the above you will need to alter the variable
#selector: '.myclass .another';
You need to produce a function of two arguments that generates the desired CSS:
.generator(#fieldName, #fieldCaption) {
.#{fieldName}-#{fieldCaption}-top {
color: red;
}
}
.generator(foo, bar);
(Feel free to try this in the online less compiler)
This piece of code produces the desired CSS for elements with name "foo" and caption "bar". You just need to make more calls to the .generator function with different arguments to obtain what you need.
If this does not correspond to what you need, please provide one additional example of your desired CSS output.
It looks like mixins are what you need:
.caption-top {
color: red;
}
.field-name-field-caption-top {
.caption-top
}
You can define a class that, used or not, you can then reference again and again inside other selectors. You can even combine them with new styles, thereby extending what the original block of CSS would have done:
.field-name-field-caption-bottom {
font-size: 3em;
.caption-top
}
Give it a go in the compiler!