I have one mixins inside another mixins
.background(#url: #base-url , #repeat: repeat, #pos1: left, #pos2: center, #color: transparent){
background:#arguments;
}
Which is used in :
.divider{
overflow:hidden;
.background(#url: url("#{base-url}/divider.png") , #repeat: repeat-x, #pos2: bottom);
}
.class{
.divider;
}
Is it possible to change only #pos2 in .divider mixins?
Of course you can, add parameter to your .divider mixin and use that parameter as such:
.divider(#pos2: bottom) {
overflow:hidden;
.background(url("#{base-url}/divider.png"), repeat-x, #pos2);
}
.class{
.divider(top); // you can use whatever value you want, or ignore it to use the default value 'bottom'
}
Related
Is it possible in Less to create a mixin that can target the backgroubd opacity of an element that already has its background colour set by an existing rule?
E.g
div {
background-colour: red;
}
.opacity {
background-color: fade(#existing-bg, 50%)
}
If I understand you correctly, then not in the sense that you are trying to do - #existing-bg would need to be able to assess the current BG colour at RUNTIME but essentially, we use LESS at compile time. The answer would be to put the colour (red) in a variable and supply the same variable in both places.
#existing: #ff0000;
div {
background-colour: #existing;
}
.opacity {
background-color: fade(#existing, 50%)
}
I am looking to develop this mixin further, so I can pass multiple arguements through the mixin without having to re-create the include every time e.g:
NOT THIS:
#include main-container(red);
#include main-container(blue);
BUT THIS:
#include main-container(red, blue);
Current Code
#mixin main-container-bg($name){
&.#{$name}-bg{
background:url("/images/"#{$name}"-angle-bg.png") center 78px no-repeat;
}
}
I believe I need a for statement alongside an each statement to loop my mixin though all of the arguments in the #include later in the scss.
Any idea's?
Any help is welcomed.
-Neil
You could use the #each directive and pass a list to the mixin in this way
#mixin main-container-bg($listcolours) {
#each $colour in $listcolours {
&.#{$colour}-bg{
background:url(/images/#{$colour}-angle-bg.png) center 78px no-repeat;
}
}
}
div {
#include main-container-bg((red, blue));
}
The generated CSS is
div.red-bg {
background: url(/images/red-angle-bg.png) center 78px no-repeat;
}
div.blue-bg {
background: url(/images/blue-angle-bg.png) center 78px no-repeat;
}
Hi I'm still very new to SASS and no programming guru.
I have ten asides elements that all require different background colours based on their class name.
I've looked through the SASS documentation and I can't figure it out.
I want to say if aside has a class name of x make background colour x if aside has a class name of y make background colour y etc
Is there a nice efficient way of doing this?
Thanks guys and sorry if its a simpleton question.
If you're using colors that don't have "standard" names (or the name of the class isn't going to be the name a color at all, eg. products = blue, addresses = red), a list of lists is what you want:
$colors:
( black #000
, white #FFF
, red #F00
, green #0F0
, blue #00F
);
#each $i in $colors {
aside.#{nth($i, 1)} {
background: nth($i, 2);
}
}
Output:
aside.black {
background: black; }
aside.white {
background: white; }
aside.red {
background: red; }
aside.green {
background: lime; }
aside.blue {
background: blue; }
If you're using colors with standard keywords, this could work:
$colors2: black, white, red, green, blue;
#each $i in $colors2 {
aside.#{$i} { background: $i; }
}
Output (though this only seems to work with --style debug, using --style compress generates errors.. weird):
aside.black {
background: black; }
aside.white {
background: white; }
aside.red {
background: red; }
aside.green {
background: green; }
aside.blue {
background: blue; }
This is simply down to how much typing you want to do. You could make a background mixin and include it within the aside CSS rule, but is that really necessary?
If it is though....
#mixin bg($color) {
background: $color;
}
aside#foo {
#include bg(#fff);
}
"if aside has a class name of x make background colour x if aside has a class name of y make background colour y" translates to the following CSS:
aside.x {background-color: x}
aside.y {background-color: y}
Is there a reason you want to use SASS? Is it to make it dynamic so that you can add any class you want in the future without updating the CSS? (If so that's not possible with SASS because the SASS code compiles to CSS and doesn't change after).
To make that work you'd have to use JS (jQuery):
$('aside').each(function () {
$(this).css('background-color', $(this).attr('class'));
});
Edit: You could use loops in SASS to generate a large number of classes and corresponding background-colors though.
I'm using a custom radio button spritesheet for an application that I'm writing for my work. I've split up this spritesheet logically into columns and rows - the columns and rows correspond with specific states that the radio button can have. (The columns are states, such as disabled, and application states, such as "correct" or "incorrect", while the rows are for selected states and hover/focus states.
My implementation uses dynamically-added semantic classes to influence the background position. As such, if a radiobutton is marked "correct" and it has focus, a "correct" CSS class will be applied and a "focus" class will be applied, calling the background position for the column and row respectively.
For these classes, I'm currently using the background-position-x and background-position-y CSS attributes, which work in IE and chrome, but not in Firefox and Opera. (These two properties aren't officially part of any CSS spec.) Since we're using the LESS preprocessor, I want to know if there's a way to create a LESS mixin that will dynamically "inherit" an x or y value for the "background-position" property.
In psuedocode, something like this:
.my-background-mixin-x(#value) {
background-position: #value + 'px', inherit; (inherit y-value)
}
.my-background-mixin-y(#value) {
background-position: inherit, #value + 'px'; (inherit x-value)
}
(That's not really accurate syntax, but I hope it conveys the idea.)
Is this possible in LESS? Can less store variables and target properties like this?
Thanks!
You cannot have LESS inherit values that way, and background-position itself can only inherit both values in the CSS cascade. I think a possible "easy" solution would be the following code. Note: Since I do not know your sprite positioning, for the sake of illustration here, I have assumed the following:
Your columns are 10px wide and are in the order of a) a "base" image, b) your disabled image, c) your .correct image, and d) your .incorrect image.
Your rows are 10px tall and are in the order of a) a "base" image, and b) your hover and .focus image (which are the same in my example; not sure about your real situation).
That your "base" and disabled settings do not require a :hover or .focus value.
Given those assumptions, then using a mixin with a horizontal (X) and vertical (Y) shift amount, with a passed in multiplier for the column and row position in the sprite, can give us this code (which you should be able to modify in such places where my assumptions were wrong):
LESS Code
input[type=radio] {
// bkg position set mixin
.setBkgPos(#X: 0, #Y: 0) {
#Xshift: -10px;
#Yshift: -10px;
background-position: (#Xshift * #X) (#Yshift * #Y);
}
.setBkgPos;
&[disabled="disabled"] {
.setBkgPos(1, 0);
}
&.correct {
.setBkgPos(2, 0);
&:hover, &.focus {
.setBkgPos(2, 1);
}
}
&.incorrect {
.setBkgPos(3, 0);
&:hover, &.focus {
.setBkgPos(3, 1);
}
}
}
CSS Example Output
input[type=radio] {
background-position: 0px 0px;
}
input[type=radio][disabled="disabled"] {
background-position: -10px 0px;
}
input[type=radio].correct {
background-position: -20px 0px;
}
input[type=radio].correct:hover,
input[type=radio].correct.focus {
background-position: -20px -10px;
}
input[type=radio].incorrect {
background-position: -30px 0px;
}
input[type=radio].incorrect:hover,
input[type=radio].incorrect.focus {
background-position: -30px -10px;
}
Here is the following mixin:
.a () {background-image: url(one.png);}
now, I want .b inherits .a but it should add a second background image layer, eg:
.b {
.a; <-- import
background-image: url(second.png);
}
will generate:
.b {
background-image: url(one.png);
background-image: url(second.png); /* wins */
}
and not
.b {
background-image: url(one.png), url(second.png);
}
which is what I would like...
Is it possible to deal with this in LESS?
This is possible in LESS, just not exactly as you have it written. In order to achieve what you are looking for you would have to set up the images as variables, like so:
#a:url('../images/img-a.png') top left repeat;
#b:url('../images/img-b.png') top left repeat;
Then when you are defining a class or id you would add the variables in like so:
.someClass {
background:#a, #b;
}