I have a mixin declared more or less like this
#mixin color-background {
background: yellow;
}
And i would wish to use this color as background of a png. but i cant seem to be able to mix the two
now what i would like to do is for example
.myImageWithBackgroundColor{
background: url(image.png),#include color-background
}
How can i acheive this with SASS and mixin?
You could store the background value of the mixin to a variable, and then use the variable instead of the whole mixin in the second code snippet.
$my-color: yellow;
#mixin color-background {
background: $my-color;
}
.myImageWithBackgroundColor{
background: url(image.png) $my-color;
}
Related
I have a list of elements that need some gradient colors. But how can I make a simple mixin that simplifies the whole thing?
For example, in my css I'd like to be able to write:
button { #include linear(blue); }
and then scss would use my mixin and include my colors in my variables
$redTop: #F67777;
$redBottom: #E65050;
$blueTop: #77CFF6;
$blueBottom: #50B9E6;
#mixin linear($color) {
background-image: linear-gradient($colorTop, $colorBottom);
}
For this, you'd want to split the colours into a map.
$red: (
"top": #f00,
"bottom": #c00
);
#mixin linear($color) {
background-image: linear-gradient(map-get($color, "top"), map-get($color, "bottom"));
}
.red-bg {
#include linear($red);
}
I am creating a SCSS -> HTML plugin and need to first render SCSS -> CSS while keeping the nesting so I can then parse with PostCSS to then create an HTML tree with.
I would like to render SCSS like this
// myMixin.scss
#mixin myMixin {
.myMixin {
padding: 1rem;
background: yellow;
}
}
// main.scss
#import 'myMixin.scss';
$blue: #004AAD;
.button {
.text {
color: $blue;
}
#include myMixin;
}
And the output would look like this:
.button {
.text {
color: #004AAD;
}
.myMixin {
padding: 1rem;
background: yellow;
}
}
Basically, I'd like a way to render everything in SCSS while keeping the original nesting. Is it possible? Thanks.
Nesting is specific to SCSS. Also I don't think #import is best practice, use #use instead.
https://sass-lang.com/documentation/at-rules/use
Here is the thing our client(browsers) only support raw CSS and not SCSS, When you use SCSS it compiles down to raw CSS, And CSS doesn't have inbuilt Nesting feature.
I'm creating a React application that has a hero display on the landing page that displays one of three images: [hero-1.jpg, hero-2.png, hero-3.png] based on the users viewport screen size.
I have been unsuccessful trying to find resources online that show a DRY method for achieving this, for the sake of participation, I'll leave this code that I attempted that - in theory made sense to me.
N.B. I am extremely new to Sass/Scss
snippet.html
<section className="hero is-fullheight has-background-black">
<div className="hero-body">
<div className="container">
</div>
</div>
</section>
hero.scss
$i: 1;
$breakpoint-phone: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;
#mixin modifier ($i:1) {
#content;
#media only screen and (max-width:$breakpoint-phone) { $i: 2; }
#media only screen and (max-width:$breakpoint-tablet) { $i: 3; }
#media only screen and (max-width:$breakpoint-desktop) { $i: 1; }
}
.hero {
background-position: center;
background-size: cover
}
#include modifier {.hero {background-image: url('../assets/hero-#{$i}.jpg');}}
Methodology:
Display content by default (which is pulled from #include).
Mixin modifier will modify the $i passed to the mixin, which is interpolated in the image path.
Expected Result:
Based on each breakpoint, $i will be set to the appropriate value and change the background image dynamically.
Actual Result:
The global $i is used, and the web page displays hero-1.jpg.
There are a few ways you can achieve this. If I was going about this, this is how I would do it.
Also, it would be very wise to practice mobile first development. Use min-width and go up instead of using max-width going down. The way you currently have it structured would mean you wouldn't have a valid URL if that $i variable wasn't set at 1 at the top of your document. Writing SASS or CSS will be much easier this way once you get used to it.
$tablet: 768px;
$desktop: 1024px;
#mixin hero-image() {
.hero {
background-position: center;
background-size: cover;
background-image: url('../assets/hero-2.jpg');
#media screen and (min-width: $tablet) {
background-image: url('../assets/hero-3.jpg');
}
#media screen and (min-width: $desktop) {
background-image: url('../assets/hero-1.jpg');
}
}
}
#include hero-image();
You're still going to have to write the background-image property 3 times. The way you were doing it was close, but you would have had to #include modifier() 3 times in your consuming scss file. At the end of the day SASS compiles to CSS. You could potentially use a SASS function or For Loop to achieve this, but mixins can get really complicated and powerful, but also incredibly difficult to read and understand. Here's what the mixin I just showed you compiles to in CSS.
.hero {
background-position: center;
background-size: cover;
background-image: url("../assets/hero-2.jpg");
}
#media screen and (min-width: 768px) {
.hero {
background-image: url("../assets/hero-3.jpg");
}
}
#media screen and (min-width: 1024px) {
.hero {
background-image: url("../assets/hero-1.jpg");
}
}
I recommend putting your SCSS/SASS into this compiler to see your results before compiling your actual project.
https://www.sassmeister.com/
Even though you are repeating background-image 3 times inside of the mixin this is very much still DRY code because you can include that one mixin everywhere your images will be shown and if you need to edit it, you can edit it in one place.
I've set up some variables in SASS as follows:
// fundamental layout variables
$raw-layout-var-1: 60px;
$raw-layout-var-2: 200px;
// calculated layout variables
$calc-layout-var-1: #{$raw-layout-var-1} + #{$raw-layout-var-2};
I am attempting to use these variables with media queries so I can do something like the following, and have the calculated variables and the rest of the stylesheet update when the relevant criteria are met. I would like to be able to override the fundamental or calculated variables as I need.
#media only screen and (min-height: 500px) {
$raw-layout-var-1: 120px;
#media only screen and (min-width: 500px) {
$raw-layout-var-2: 100px;
}
Currently I have a workaround where all updates to variables use the !global keyword to update them globally, but this results in a somewhat complex setup where the fundamental variables, calculated variables, and the main css sheet are placed in mixins, to be called in each individual media query:
#mixin reset-raw-vars() {
$raw-layout-var-1: 60px !global;
$raw-layout-var-2: 200px !global;
}
#mixin update-calc-vars() {
$calc-layout-var-1: #{$raw-layout-var-1} + #{$raw-layout-var-2} !global;
}
#mixin add-main() {
div {
width: $calc-layout-var-1;
height: $raw-layout-var-1;
}
}
#media only screen and (min-width: 500px) {
#include reset-raw-vars(); // resets the raw variables in case these were changed globally in a previous media query
// here you can change any fundamental variables you need
#include update-calc-vars(); // recalculates calculated variables
// here you can override how any calculated variables are made
#include add-main(); // update the rest of the stylesheet with new layout
}
Even worse, if I have a pair of media queries such as those shown in the second code block, I have to manually create a hybrid with both min-height and min-width in order to apply both sets of conditions. Clearly this isn't DRY and could get seriously out of control with even slightly complex responsive pages. I can see from Using Sass Variables with CSS3 Media Queries that SASS doesn't have this functionality - is there a better way than I've outlined above?
I am trying make this mixing work.. Any ideas how to concancate a variable name on the fly and make it processed.
$colors: purple pink;
#each $color in $colors {
.box--#{$color} {
background-color: #{'$ui'}-$color;
}
}
In this case $ui-red is a red color variable.
Unfortunately, you can't generate or reference to sass single variables in runtime. But you can store your color codes and names in sass maps (requires sass v3.3) and use it in cycle like this:
$colors: ("purple": #f7f,
"pink": #ffa);
#each $color-name, $color-code in $colors {
.box--#{$color-name} {
background-color: $color-code;
}
}
In CSS you get:
.box--purple {
background-color: #f7f;
}
.box--pink {
background-color: #ffa;
}
Example: http://www.sassmeister.com/gist/c1285109946e5207e441c7ee589dd382