Is there any way to check argument in mixins.
For example, I have a shadow mixin and want to include it (call it) different way in case of its argument.
#mixin shadow($shadow, $position, $color) {
.....
}
If I pass Top2 it should change only first parameter
.box { #include shadow(inset, Top2, #000); } => `box-shadow: inset, 2px 0 0 0, #000`
If I pass Bottom2 it should change the parameter to -2px
.box { #include shadow(inset, Bottom2, #000); } => `box-shadow: inset, -2px 0 0 0, #000`
I think you should use this type.
#mixin box-shadow($values) {
-webkit-box-shadow: $values;
-moz-box-shadow: $values;
box-shadow: $values;
}
#mixin box-shadow-inset($inset) {
-webkit-box-shadow: $inset;
-moz-box-shadow: $inset;
box-shadow: $inset;
}
Related
I am having trouble creating a #mixin for a drop shadow. The drop shadow I want in regular CSS is as follows
-webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
The #mixin I have created is as such
#mixin box-shadow(
$top, $left, $blur, $size, $color) {
}
Then to use this I have added the below to my scss file
#include box-shadow(0, 2px, 3px, 2px, rgba(0, 0, 0, 0.2));
However, it is broken as I do not see any drop shadow CSS being applied once the SCSS is compiled.
Try this: Fiddle
#mixin box-shadow($top, $left, $blur, $size, $color) {
-webkit-box-shadow: $top $left $blur $size $color;
-moz-box-shadow: $top $left $blur $size $color;
box-shadow: $top $left $blur $size $color;
}
.box{
width:150px;
height:150px;
background:blue;
#include box-shadow(2px,2px,5px,0, rgba(0,0,0,0.6));
}
It looks like you've left out declaring the box-shadow rules in your mixin.
It should look like this:
#mixin box-shadow($top, $left, $blur, $size, $color) {
box-shadow: $top $left $blur $size $color
}
Add the vendor prefixes as you need.
fiddle
I use this
/* BOXSHADOW */
#mixin boxshadow(#x: 0, #y: 0, #blur: 0, #spread: 0, #rgba: rgba(0, 0, 0, 1.0)) {
-webkit-box-shadow: #x*#rem #y*#rem #blur*#rem #spread*#rem #rgba;
-moz-box-shadow: #x*#rem #y*#rem #blur*#rem #spread*#rem #rgba;
box-shadow: #x*#rem #y*#rem #blur*#rem #spread*#rem #rgba;
}
#include boxshadow(0, 0, 10, -5, rgba(220, 220, 220, 1.0));
You could try to use Compass. It provides a lot of mixins for the most common CSS rules, including box-shadow. It also transparently add cross-browser prefixes while using its mixins.
I am fairly new to Less and I was just running through some of the simple concepts and found that when ever I use a parametric mixin, it doesn't compile to the CSS file.
Example, this is my style.less file:
#color: #000;
.boxshadow (#shadow:2px 2px 5px rgba(0,0,0,.4)) {
-webkit-box-shadow: #shadow;
-moz-box-shadow: #shadow;
box-shadow: #shadow;
}
.box{
.boxshadow;
color: #color;
}
and this my compiled style.css file:
.box {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
color: #000;
}
It's recognising the values on .boxshadow and carrying them through to .box, but it isn't compiling .boxshadow as it's own CSS class.
I have compiled with the command line and a Sublime Text 3 package, both outputting the same css.
Am I missing something simple?
Thanks in advance!
If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
See here
Sorry, I lost few years in IT )
So, here is my question:
I have a long ".css" file and a lot of structures like
color: #567567;
in it. So, Is here a metрod to use some construction like
color: $mycolor
or not?
PS: sorry for my English.. I drank a few years )))))))
This is not (yet) possible across all browsers in pure CSS, it's currently just an experimental technology (also see this compatibility table).
A way to achieve that is using tools like less or sass that support variables and then compile their files into pure CSS.
An example taken from the less website:
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
compiles to:
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
I'm learning SASS/SCSS and am playing around with mixins, trying to get my head around the different accepted variations that are available.
Below is what I'm using to create box-shadows, I'm using an if and else statement to display ether with or without the inset property.
#mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
#if $inset {
box-shadow: $inset $horizontal $vertical $blur $color;
}
#else {
box-shadow: $horizontal $vertical $blur $color;
}
}
I'm wondering how to set the $inset: false to true for this to work as intended.
Or is there a more efficient way to achieve what I'm trying to do?
I think that instead of including the variable $inset, just include the keyword inset. This way, you can pass true or false and it will parse properly:
#mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
#if $inset {
box-shadow: inset $horizontal $vertical $blur $color;
}
#else {
box-shadow: $horizontal $vertical $blur $color;
}
}
.no-inset {
#include box-shadow($inset: false);
}
.inset {
#include box-shadow($inset: true);
}
Output:
.no-inset {
box-shadow: 0px 1px 2px 0;
}
.inset {
box-shadow: inset 0px 1px 2px 0;
}
I have lesscss mixin for box-shadow like this :
.box-shadow(#x, #y, #blur, #color, #addit: ''){
-webkit-box-shadow: #x #y #blur #color #addit;
-moz-box-shadow: #x #y #blur #color #addit;
box-shadow: #x #y #blur #color #addit;
}
As you seen, There is a parameter #addit that set to '' as default.
It's work fine when I give #addit a value like : .box-shadow(0, 0, 2px, #1361aa, inset), But why if parameter for #addit not filled, then it doesn't work? And how to fix it?
Help, thanks for advance.
Escape the empty string as your default
You need to set the default value to ~'' so it is an escaped string.
LESS
.box-shadow(#x, #y, #blur, #color, #addit: ~''){
-webkit-box-shadow: #x #y #blur #color #addit;
-moz-box-shadow: #x #y #blur #color #addit;
box-shadow: #x #y #blur #color #addit;
}
.test{
.box-shadow(0, 0, 2px, #1361aa)
}
CSS
.test {
-webkit-box-shadow: 0 0 2px #1361aa ;
-moz-box-shadow: 0 0 2px #1361aa ;
box-shadow: 0 0 2px #1361aa ;
}
You can't use '' as it will add an invalid parameter to box-shadow. This is the generated output for .box-shadow(2px, 2px, 5px, #F00);
#myDiv {
-webkit-box-shadow:2px 2px 5px #ff0000 '';
-moz-box-shadow:2px 2px 5px #ff0000 '';
box-shadow:2px 2px 5px #ff0000 '';
}
As you can see, LESS CSS supports strings and empty strings as parameters, however, CSS does not recognize this, and discards this as an invalid style.
One way you could do it is simply using two mixins with same name but different number of parameters (similar to overloading):
.box-shadow(#x, #y, #blur, #color) {
-webkit-box-shadow: #x #y #blur #color;
-moz-box-shadow: #x #y #blur #color;
box-shadow: #x #y #blur #color;
}
.box-shadow(#x, #y, #blur, #color, #addit) {
-webkit-box-shadow: #x #y #blur #color #addit;
-moz-box-shadow: #x #y #blur #color #addit;
box-shadow: #x #y #blur #color #addit;
}
Tested this and works with the following:
.box-shadow(2px, 2px, 5px, #F00);
.box-shadow(2px, 2px, 5px, #F00, inset);