Im using SASS and base64 encoded images. Im reusing the same background image im multiple places and ideally I like to keep the code in separate files.
So this would be my SASS code if I wasnt using base64 images:
$background-image: url(image-file.jpg);
.div1 {
background-image: $background-image;
}
//This is in a seperate file
.div2 {
background-image: $background-image;
}
However if I now replace the image url with a base64 image then it looks like the following. The issue is that the base64 encoded string is repeated which will increase the filesize unnecessarily.
$background-image: url(data:image/jpeg;base64,/9j/4AAQSk);
.div1 {
background-image: $background-image;
}
//This is in a seperate file
.div2 {
background-image: $background-image;
}
So is there a way to keep my code nice and organised in separate files, and use base64 images, and not repeate the base64 string?
Use #extend.
%my-bg {
background-image: url(data:image/jpeg;base64,/9j/4AAQSk);
}
.div1 {
#extend %my-bg;
}
//This is in a seperate file
.div2 {
#extend %my-bg;
}
Output:
.div1, .div2 {
background-image: url(data:image/jpeg;base64,/9j/4AAQSk);
}
It's not necessary to split off the background image like that (ie. you chould just #extend .div; instead), but I assume .div1 will have additional styles that are different from .div2 and shouldn't be shared.
Related
I was able to successfully implement the Mapael map into my HTML page, and was able to configure the hover fill color to my liking via the JavaScript code.
I'm trying to change the fill color of specific individual countries.
I've worked briefly with SVGs before, and I used to open up a file with a text editor and update certain elements that way. Is there a different way to do this?
I was wondering if this is possible with Mapael?
and Where does one grab the SVG file from?
I downloaded and deploy the repository version (jQuery-Mapael-2.2.0).
See screenshot of the files and folders.
svg code file
You have to use Mapael special function/params:
$(function () {
$("yourMapElementSelector").mapael({
// Customize some areas of the map
areas: {
"US": {
attrs: {
fill: "#488402"
}
, attrsHover: {
fill: "#a4e100"
}
}
},
});
});
I am not sure how Mapael works, but normally what I would do with the SVG is add IDs to each country, something like:
<g id="france">
or
<path id="france">
Or whatever shapes you use and then just define a CSS class similar to this:
/* if the paths are inside a group */
.svgactive path {
fill: red;
}
/* if the paths are standalone */
path.svgactive {
fill: red;
}
And just toggle the class .svgactive on your specific id inside the SVG file.
Is there a way to exclude color propertys from sass compilation in webpack sass compiler, to prevent the opacity problem in child elements.
At the moment it compile this:
div {
background: rgba(255, 255, 255, 1);
}
to:
div {
background: white;
}
Sorry for my bad english :)
You can't prevent it. Because it's a sass function that converts the color to hex.
But there are few ways to avoid it
you can create your own rgba function that will do the trick for you
#function rgba($r, $g, $b, $a) {
#return unquote('rgba(#{$r}, #{$g}, #{$b}, #{$a})');
}
But doing this means there are changes that, if some one is using rgba(hex, a) then it will fail, if there are some one using syntax like rgba(rgb(255,255,255), 1) then also it will fail. So you have to look in your project structure and see how the syntax is there in all the files. And you have to mention to the team to use rgba alone.
Or else you can create a simple mixin
#mixin mysuper-rgba($hexcolor, $opacity) {
background-color: $hexcolor;
background-color: rgba($hexcolor, $opacity);
}
body {
#include mysuper-rgba(#11111, 0.5);
}
What I suggest is create a mixin that will do the trick for you and ask all your developers to use the same.
Is it possible to add a before element in CSS like this:
ul {
li:before {
content: url('../icons/fancy-symbol.svg');
}
}
and have access to the svg's objects (e.g. a specific line or rectangle) and properties (e.g. the stroke-width, strike and fill color)?
Or is there a workaround for these kind of situations?
The use case is to color some lines on hover and animate the svg on click.
You can specify a fragment on the SVG URL, like ../icons/fancy-symbol.svg#red, then have CSS inside the file react to that:
<style>
#red:target ~ .some-element-here {
fill: red;
}
</style>
This won't let you specify properties dynamically, but it can be useful for interaction states, especially with a preprocessor.
Alternatively, if the SVG file is small enough, you can use preprocessors to change properties in a Data URI, like with sass-svg, or manually:
.li:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
fill='#{$color}'%3E...");
}
(By the way, it might be easier to use ul { list-style-image: url(...) } instead of pseudo-elements.)
There is another thread that covers this, but I am not allowed to post to it. Also, the only answer does not seem to solve my problem.
I am getting the Object not a function error when using the #html.extend() method. I have read all of the very limited threads on this topic. They all say the same thing. That I need to ensure the path is correct to the layout.vash file I am extending. My declaration looks like this in the file that I want to want to extend with my layout.vash file.
#html.extend('layout', function (model) {
.... do stuff ...
})
What is odd, is that some pages work fine others don't. The path is correct. I am sure of this because of the fact the files in the same director exhibit different behavior.
Does anyone know what other mistake I could be making to cause this error?
In my case, vash was unable to parse the content within ...
I pulled it out from the layout page and created a separate .css file, and the annoying "object is not a function" error disappeared.
I speculate that vash collides with some css syntax.
For you info, my style statements that caused the trouble were these.
<style type="text/css">
*{padding:0;margin:0;}
html{border-top:10px #1abf89 solid;}
body{width:800px;margin:0 auto;padding:5% 20px 20px;font-family:Palatino, Optima, Georgia, serif;}
#media all and (max-width:1024px){ body, pre a{width:60%;} }
small{color:#999;}
#toolbar{margin-bottom:1em;position:fixed;left:20px;margin-top:5px;}
#toolbar [class^="icon-"]:before, #toolbar [class*=" icon-"]:before{font-family:'pen'}
#mode{color:#1abf89;;cursor:pointer;}
#mode.disabled{color:#666;}
#mode:before{content: '\e813';}
#hinted{color:#1abf89;cursor:pointer;}
#hinted.disabled{color:#666;}
#hinted:before{content: '\e816';}
#fork{position:fixed;right:0;top:0;}
/*
When the webpage is printed
this media query hides extra elements,
and makes the text content fit the page.
*/
#media print {
#fork, #toolbar {
display: none;
}
body {
width: 94%;
padding-top: 1em;
font-size: 12px;
}
html {
border-top: 0;
}
}
</style>
The Susy grid has a $from-direction variable, but I can't use it like so:
[dir="rtl"] {$from-direction: right;}
The generated CSS changes all direction related Susy CSS to right-to-left and is not prepended with [dir="rtl"].
What am I doing wrong?
Unfortunately there is no way for Sass (or Susy) to know anything about your HTML. Because things are pre-compiled, you have to nest the actual styles inside your switch, not just the variable setting. That probably means two different compiled stylesheets, which you can do easily in Sass, using that setting.
You'll need two scss files, e.g. rtl.scss and ltr.scss. Each one starts with that variable, and then imports all the necessary partials for your site:
// rtl.scss
$from-direction: right;
#import "my-site-partials.scss";
and
// ltr.scss
$from-direction: left;
#import "my-site-partials.scss";
Then you just need to load the correct css output file in your HTML depending on the direction. You can also do it in a single file, but you'll be loading twice the code you use in either case, and nesting all your styles an extra level. I recommend the two-file approach.
UPDATE: A Single-file approach.
You can use the same technique in a single file, but it will require an extra wrapper around all your styles. Something like this:
#each $dir in ltr, rtl {
$from-direction: if(ltr, left, right);
[dir="#{$dir}"] {
// your styles
}
}
You could make that into a mixin:
#mixin bi {
#each $dir in ltr, rtl {
$from-direction: if(ltr, left, right);
[dir="#{$dir}"] {
#content;
}
}
}
#include bi {
// your styles
}
Or you could override only specific styles that change with direction:
#mixin rtl {
$from-direction: right;
[dir="rtl"] {
#content;
}
$from-direction: left;
}
// your ltr styles
#include rtl {
// your rtl overrides
}
There are many other variations on that, and features you could add for flexibility. But this should get you started.