This question already has an answer here:
SASS Loop to output classes with unique number and background-image
(1 answer)
Closed 7 years ago.
I have a dynamic angular directive that creates the image paths based on some conditions.
scope.image = 'myImage-test-'+imageIndex; //image index is a random num between 1-5
in my directive template,
In my scss file, I have the following styles added to map these images
.container {
&--myImage-test-1 {
background: url(../images/image-1.jpg);
}
&--myImage-test-2 {
background: url(../images/image-2.jpg);
}
&--myImage-test-3 {
background: url(../images/image-3.jpg);
}
&--myImage-test-4 {
background: url(../images/image-4.jpg);
}
&--myImage-test-5 {
background: url(../images/image-5.jpg);
}
}
I am planning to increase the count of my image to 50 and I don't like to hardcode styles for all these 50 images, which is lot of repetition. Would like to know if there is a possibility of abetter alternative?
Pretty simple with sass. You just need a for loop.
.container {
//for loop 1-50
#for $i from 1 through 50 {
&--myImage-test-#{$i} {
background: url(../images/image-#{$i}.jpg);
}
}
Related
I have the following SASS rules:
p {
margin: 0;
}
#include desktop() {
p {
margin: 0;
}
}
The mixin is like this:
#mixin desktop() {
#media screen and (min-width: 1200px) {
#content;
}
}
Elsewhere in the codebase there's a margin being set on desktop, hence in this case I need to explicitly remove it on the desktop breakpoint too, just having the first p selector rule doesn't cut it.
Is there a neat way to combine the selectors as it feels verbose having the same margin: 0 rule twice? I realise there's probably something more fundamentally wrong here with the inheritance, but that's outside the scope of the question. I don't want to use !important.
Many thanks.
Is there a neat way to combine the selectors? Sure there is… Just use another mixin:
#mixin para {
p {
margin: 0;
}
}
#include para;
#include desktop {
#include para;
}
You clearly already know how to use mixins, so I'm assuming your question is really about whether you can nest one mixin within another (yes), or whether you can include selectors within a mixin (yes).
This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
I am trying to make a css class that can use a number as input for a style associated with the class. For example:
.font-<size> {
font-size: <size>px;
}
where 'size' is a number.
Is this possible with scss?
MY SOLUTION:
This is what I ended up doing which is hard coded but gets the job done:
// Generates some useful quick font size classes
$f-sizes: 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30;
#each $i in $f-sizes {
&.font-#{$i*2}:before {
font-size: #{$i*2}px;
}
}
Which will allow me to access font sizes 2 through 60 via class .font-28.
You would need a mixin.
http://thesassway.com/advanced/pure-sass-functions
#mixin size-mixin($some-number) {
font-size: $some-number;
}
Then you would just include this mixing on your classes.
.font-class {
#include size-mixin(10px);
}
$number: 10;
.font-#{$number} {
font-size: #{$number}px;
}
The SCSS code above compiles into CSS code as follows:
.font-10 {
font-size: 10px; }
This question already has answers here:
Using Sass Variables with CSS3 Media Queries
(8 answers)
Closed 7 years ago.
Is it possible to set the value of a variable once, inside a single sass-breakpoint, rather than each time I use the variable?
In other words, I'd like to do this:
$tab: 600px;
$wp: 100%;
#include breakpoint($tab) {
$wp: 95%;
}
.alpha {
// ...
width: $wp;
}
.beta {
// ...
width: $wp;
}
.gamma {
// ...
width: $wp;
}
... rather than this:
$tab: 600px;
$wp: 100%;
$wp-tab: 95%;
.alpha {
// ...
width: $wp;
#include breakpoint($tab) {
width: $wp-tab;
}
}
.beta {
// ...
width: $wp;
#include breakpoint($tab) {
width: $wp-tab;
}
}
.gamma {
// ...
width: $wp;
#include breakpoint($tab) {
width: $wp-tab;
}
}
I don't think the first approach will work as is. Is there another way to achieve the same result? Is this approach a bad idea?
That is not possible.
Quoting nex3, the developer of Sass:
While this would be pretty cool, it's very much contrary to the
existing semantics of a Sass stylesheet. What you've outlined already
has a meaning: it sets the variable twice in sequence and then
accesses it (modulo some scoping issues). The sequential and largely
imperative nature of Sass means that the sort of automatic duplication
of rules you're describing becomes very complex. We actually
considered something very similar for handling SassScript &, and ended
up realizing that it was effectively impossible to do so and preserve
the existing semantics.
The best approximation you can do right now is to put the styles that
need to vary in a mixin with parameters and include that in your media
queries.
Source: https://github.com/nex3/sass/issues/1227
This question already has answers here:
Make backward nesting in scss?
(2 answers)
Closed 8 years ago.
I have an SCSS ruleset which looks somewhat like this:
.thing {
div {
// rules
}
}
Sometimes I want to restyle this .thing div element depending on a class being added to the body so in standard CSS I would have done it like this:
.thing div {
// rules
}
.deactivated .thing div {
// override for when it's in body.deactivated
}
Is there a way to break out of the nest to indicate a top-level enclosing selector in SCSS?
No. If you want to nest, do so something like this:
.thing {
div {
// rules
}
}
.deactiviated {
.thing {
div {
// other rules
}
}
}
This question already has answers here:
Sass .scss: Nesting and multiple classes?
(6 answers)
Closed 7 years ago.
I've written this code, but it does not work. What is my problem?
.class {
margin:20px;
:hover {
color:yellow;
}
}
For concatenating selectors together when nesting, you need to use the parent selector (&):
.class {
margin:20px;
&:hover {
color:yellow;
}
}
You can easily debug such things when you go through the generated CSS. In this case the pseudo-selector after conversion has to be attached to the class. Which is not the case. Use "&".
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
.class {
margin:20px;
&:hover {
color:yellow;
}
}