i want to list all *.svg files in a directory, something like this:
// set the folder containing *.svg
$icon-dir: "./my-icon-collection";
// then produces a css like this:
.icon {
.face {
background-image: url("face.svg");
}
.phone{
background-image: url("phone.svg");
}
.message-miss{
background-image: url("message-miss.svg");
}
}
how i write the function/mixin in SASS/SCSS?
I don't think this achievable in a generated css via scss. At the nearest solution is you can get css like this-
generated css image by the below mentioned mixin
$svg-list:"perimter","surface","length","height","width","volume","area";
$icon-dir: "./my-icon-collection/"; // Assuming this is the correct location where all the svg files are placed
#mixin svgPath($svgName) {
.icon {
.#{$svgName} {
background-image: url(#{$icon-dir}#{$svgName}.svg);
}
}
}
#each $svgName in $svg-list {
#include svgPath($svgName);
}
Related
Actually I want to use a CSS variable in less...
:root {
--header: #6B66A4;
}
#header: #6B66A4;
How?
Less compiles the following
:root {
--header: #6B66A4;
}
#header: var(--header);
body {
color: #header;
}
to this CSS being generated at build time:
:root {
--header: #6B66A4;
}
body {
color: var(--header);
}
Of course Less doesn't know anything about what var(--header) means or is - it's just a string to Less.
I have following scss style. I have added bg color as variable & it is working fine. I need to add 'icons.png' also as variable.
.home {
#include themify($themes) {
background: url(images/icons.png) themed('bgcolor');
}
}
How to add "icons.png" as veritable? like
background: url(images/VARIABLENAME) themed('bgcolor');
You can try this.
$image: 'icons.png';
.home {
#include themify($themes) {
background: url(images/${$image}) themed('bgcolor');
}
}
aye folks!
i tried to build a sass mixin for css custom properties to make work a little bit easier.
my attempt does look like this:
#mixin mixin($value) {
background: unquote('$')#{$value};
background: var(--#{$value}, unquote('$')#{$value});
}
the output looks like this:
.example {
background: $value;
background: var(--colour, $value);
}
BUT sass doesn't convert my $value into the actual thing. the $value part end up in my final css file and ofc this doesn't work.
i tried to find a solution online but i'm either to dumb to find it or there isn't one. anyone here has an idea what i'm doing wrong?
I have try your code with this example:
#mixin mixin($value) {
background: unquote('$')#{$value};
background: var(--#{$value}, unquote('$')#{$value});
}
.example {
#include mixin(colour)
}
and it works.
The output is:
.example {
background: $colour;
background: var(--colour, $colour);
}
is what you want? Sorry but I don't have the authorization for add comment so I create this answer.
Edit: you can create a different mixin like this:
#mixin mixin($value, $color) {
background: $color;
background: var(--#{$value}, $color);
}
This help you to solve your problem?
In CSS I can do something like this:
.apple { background-image: url('apple.png'); }
.orange { background-image: url('orange.png'); }
.pear { background-image: url('pear.png'); }
but it seems in sass (not scss) the same would take up 6 lines? Is it possible to do a one-liner is sass for rules that only have one property?
This isn't by any means meant to help you condense this code to one line, but to think of it from a different perspective.
In this post on The Sass Way titled "Sass control directives: #if, #for, #each and #while", I cover control directives in Sass. Here's a way to write your code using the #each directive.
$fruit-list: apple orange pear
=fruit
#each $fruit in $fruit-list
&.#{$fruit}
background-image: url(#{$fruit}.png)
.fruit
+fruit
Which outputs:
.fruit.apple {
background-image: url(apple.png);
}
.fruit.orange {
background-image: url(orange.png);
}
.fruit.pear {
background-image: url(pear.png);
}
Using .scss we can make this a one liner, but at the cost of readability of the code:
$fruit-list: apple orange pear;
#mixin fruit { #each $fruit in $fruit-list { &.#{$fruit} { background-image: url(#{$fruit}.png); } } }
.fruit { #include fruit; }
Sass syntax is principally based on indentation and line breaks, so in Sass that would indeed be six lines (two per rule, excluding blank lines):
.apple
background-image: url('apple.png')
.orange
background-image: url('orange.png')
.pear
background-image: url('pear.png')
As far as I've seen you can't condense those to one-liners in Sass.
This is in particular reference to the Compass spriting framework
Following the documentation here http://compass-style.org/help/tutorials/spriting/#magic-selectors
I have used this method so that this:
selectors/ten-by-ten.png
selectors/ten-by-ten_hover.png
.edit {
#include selectors-sprite(ten-by-ten);
}
generates:
.selectors-sprite, .edit {
background: url('/selectors-sedfef809e2.png') no-repeat;
}
.edit {
background-position: 0 0;
}
.edit:hover, .edit.ten-by-ten_hover, .edit.ten-by-ten-hover {
background-position: 0 -20px;
}
which is really great. However, I was wondering If/How in another instance I could include the "ten-by-ten.png" image from the sprite without including the magically attached hover state?
i.e.
I want this:
.view {
background: url('selectors/ten-by-ten.png') no-repeat;
}
Where hovering over this icon does not trigger the :hover state (ten-by-ten_hover.png).
But I was wondering if there was a way to achieve this still referencing the sprited image?
Thanks for any help/advice.
You can add sprites directly to an element using the #extend directive. The syntax is #extend .folder prefix - sprite name - state (ie, .selectors-sprite-name_hover):
.view {
#extend .selectors-ten-by-ten
}
&:hover {
#extend .selectors-ten-by-ten_hover
}
&:active {
#extend .selectors-ten-by-ten_active
}
.selectors-ten-by-ten_hover, .selectors-ten-by-ten_active, etc returned class not found errors for me in Compass.
This worked however:
.viewHover { #extend .selectors-ten-by-ten:hover; }
.viewActive { #extend .selectors-ten-by-ten:active; }