I use the latest SASS/Compass versions for developing CSS. I've declared some SASS variables at the beginning of the "media=all" stylesheet like this:
$var1: red;
$var2: blue;
$var3: black;
$var4: green;
Later in this SCSS file i import a print stylesheet (#import 'print.scss';) which looks like this:
#media print {
$var1: black;
$var2: black;
$var4:black;
}
I thought, that the variables in the print stylesheet overrides the "normal" vars only if the Browser is in "print mode". But the variables do override always the "normal" vars declared before.
I'm a little confused and appreciate any help.
Thanks!
As per this questions, it's basically not possible in your current form. If you want to achieve this, you'll have to import each style that makes use of your $varX, like:
$blue: blue;
.test{
color: $blue;
}
#media print {
$blue: pink;
.test{
color: $blue;
}
}
output:
.test{color:blue}#media print{.test{color:pink}}
It's not the ideal solution (you'll get lots of repeated code), but unfortunately it's all you can do due to the way CSS works.
This may be a slightly better solution:
$blue: blue;
$print_blue: pink;
.test{
color: $blue;
text-align: right;
#media print {
color: $print_blue;
}
}
output:
.test{color:blue;text-align:right}#media print{.test{color:pink}}
Related
This might seem basic, but I can't figure out how to use CSS variables in LESS?
variables.css:
.root {
--header-color: white;
--content-color: yellow;
}
styles.less:
#import "../variables.css";
.header {
color: #header-color;
}
I get error "#header-color is undefined".
LESS allows you to use normal CSS code, so use one option could be just use the variable as CSS:
#import "../variables.css";
.header {
color: var(--header-color);
}
Also, you can save the css var to a LESS var:
#import "../variables.css";
#header-color: var(--header-color);
.header {
color: #header-color;
}
My SASS-generated CSS files are filling up with a bunch of stuff I don't need. This means my users have to download a much bigger CSS file than they really need.
In most programming languages it is possible to create an import statement like this:
from "some_codefile" import Dog, Cat, Fish
For a SASS scenario lets assume I have a partial file _colors.scss,
It contains:
$white: #ffffff;
#mixin black() {
color: black;
}
.red {
color: red;
}
.blue {
color: blue;
}
Now I want to import $white, #include black, and .red. However, I do not use the .blue class and do not want to import it since it will just take up space in my CSS file.
I tried:
#import "colors.scss" white, black, red;
But it just gives syntax errors.
How do I prevent my CSS file from filling up with stuff I do not need?
No, that is not possible. You can however use placeholder selectors in your partials and they will not be rendered unless they are #extended.
$white: #ffffff;
#mixin black {
color: black;
}
%red {
color: red;
}
%blue {
color: blue;
}
.foo {
#extend %red;
}
.bar {
#extend black;
}
I would like to have below CSS output using Less
.selected-values,
.selected-values a {
background-color: #505050;
color: #fff;
}
.selected-values {
display: block;
}
.selected-values a {
text-decoration: none;
}
So far i have thought of below Less syntax, but it is not working.
.selected-dropdown-values() {
background-color: #505050;
color: #fff;
}
.selected-values:extend(.selected-dropdown-values) {
display: block;
}
.selected-values a:extend(.selected-dropdown-values) {
text-decoration: none;
}
I am not able to apply any extend logic to generate this syntax. I might be missing something or i am unaware about how to do it properly in Less. Also, I do not want .selected-dropdown-values mixin to output in CSS.
As mentioned in comments and discussed in the chat, Less currently does not support extending of mixins (there is a request and it might get addressed in v2.0.0 or later). (Note: To be more precise with wordings, extending of mixins which are not output in CSS is not supported.)
So, the best way forward would be to do the below:
Less:
.selected-dropdown-values { // just remove the braces
background-color: #505050;
color: #fff;
}
Just remove the braces from the .selected-dropdown-values rule. Ofcourse this would cause that rule also to be present in the CSS output but given that we are using extend, it would mean only one extra line in CSS output.
Output:
.selected-dropdown-values,
.selected-values,
.selected-values a {
background-color: #505050;
color: #fff;
}
I am using SASS and there is nice feature: I can create "fake/virtual" class and then use it for extend.
Example:
%myFakeClass
{
color:#fff;
background-color:#000;
}
.myRealClass
{
#extend %myFakeClass;
}
.myRealClass2
{
#extend %myFakeClass;
}
Output:
.myRealClass, .myRealClass2
{
color:#fff;
background-color:#000;
}
The question:
Does LESS has something similar? In other words, I want to create a "virtual class" that I can inherit from, but the "virtual class" itself not exists in output.
Not Directly as of Yet
As of this date (11-22-2013) there is still a feature request that would allow this by doing extending on empty parameter mixins (which do not output css themselves). So eventually something like this would be possible (which mirrors almost exactly what you want):
.myFakeClass() {
color:#fff;
background-color:#000;
}
.myRealClass {
&:extend(.myFakeClass);
}
.myRealClass2 {
&:extend(.myFakeClass);
}
And output as you expect.
Workaround for now
This was mentioned by Bass Jobsen, but not explicitly demonstrated. In LESS 1.5, you build a file for your fake classes, say fakeClasses.less, which for our example has this in it:
.myFakeClass {
color:#fff;
background-color:#000;
}
Then in your file that you want to extend to it, let's say styles.less, you do this:
#import (reference) fakeClasses.less;
.myRealClass {
&:extend(.myFakeClass);
}
.myRealClass2 {
&:extend(.myFakeClass);
}
This will import the fakeClasses.less classes but NOT compile them to css (so they are "fake" within the context of styles.less, but "real" in that they can be extended to), and you will get the output you expect.
.myRealClass, .myRealClass2 {
color:#fff;
background-color:#000;
}
Maybe the following helps you img { &:extend(.img-responsive); } from Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?
update from How do I create a mixin using less.js that doesn't output in the final stylesheet:
.myFakeClass()
{
color:#fff;
background-color:#000;
}
.myRealClass, .myRealClass2
{
.myFakeClass();
}
since LESS 1.5 you could also place you virtual classes in a separate file and use:
#import (reference) "file.less";
We have another import option - reference. This means that any
variables or mixins or selectors will be imported, but never output.
I'm not entirely sure if #extend works the same as a "mixin", but it looks the same.
.myFakeClass(#textColor: #fff, #bgColor: #000 )
{
color:#textColor;
background-color:#bgColor;
}
.myRealClass
{
.myFakeClass();
}
.myRealClass2
{
.myFakeClass();
}
The out put for this would be the same as what you have above. I added variables in the mixin for easier customization for this mixin.
Example:
.myRealClass3
{
.myFakeClass(#369, #00f);
}
The output for all three classes would be:
.myRealClass, .myRealClass2
{
color:#fff;
background-color:#000;
}
.myRealClass3
{
color:#369;
background-color:#00f;
}
Like I said, I'm not entirely sure if there is a big difference between extending a class in SASS and using a mixin in LESS. Hope this helps either way.
Oh, and just to clarify, if the .myFakeClass() class is in a separate .less file that is imported, it will not show up in your CSS unless it is used. I tested this on a website I'm building. I have:
.box-shadow(#a, #b, etc..) {
box-shadow: #a #b etc..;
-webkit-box-shadow: #a #b etc..;
etc: #a...;
}
The class .box-shadow does not show up in my CSS at all.
Link: http://lucienconsulting.com/gs-news/wp-content/themes/TheStone/css/style.css
However, if you write a mixin like this:
.myMixin{
background: #000;
color: #fff;
}
It will show up like a normal class even if not used. Obviously, it looks just like a normal class and could be used by itself, or as a mixin, like so:
.myClass{
.myMixin;
border: 1px solid #fff;
}
This would compile to:
.myClass{
background: #000;
color: #fff;
border: 1px solid #fff;
}
It works, but .myMixin would also show up in your style sheet in this case.
But, like I said, in my original example, it would not.
I should have asked this in my previous question (CSS style declaration reusage), but I didn't think of it at the time. Since that question is answered, I'll start a new one.
I am trying to create color palette in CSS that will be used through out my application.
For example:
.blue { color: #434544; }
.green { color: #G99933; }
I do not want to define colors anywhere else in my CSS. The problem I am running into is how do i use the .blue style when, for example, I need a background-color definition? Take a look at this:
.editor { background-color: #434544 }
I want to reference back to the .blue style instead of defining it here again. How can I do that?
UPDATE
I found the perfect solution for my question:
Chirpy -> http://chirpy.codeplex.com/
There's no way to do this in native CSS. You should look into pre-processing your CSS, since all those pre-processors have support for variables.
Here's what it looks like using (scss-flavored) SASS:
$blue: #434544;
$green: #G99933;
.blue { color: $blue; }
.green { color: $green; }
.editor { background-color: $blue }