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; }
Related
Searched but can't find an answer..
I have an element which gets generated (by an external platform) with the following classes: p-button and button.
Now the SCSS is like this:
.p-button {
&.button {
margin: 10px;
}
}
But I want to refactor using mixin includes (this is a big project so there is no other way of making this code better except using mixins). The mixin takes the given selector and applies a . to it. I can't change the mixin, as it is used by many other teams, so I can't pass the ampersand together with the selector. I tried this:
.p-button {
& {
#include button-appearance("button") {
margin: 10px;
}
}
}
But that doesn't work (puts a space between it). You can't do this:
.p-button {
&#include button-appearance("button") {
margin: 10px;
}
}
Anyone have a clue?
EDIT: Here is the mixin
#mixin button-appearance(
$appearance-class,
$show,
$background-color,
$background-image,
$background-position) {
$sel: $button-selector;
#if $appearance-class {
$sel: $sel + '.' + $appearance-class;
}
#{$sel} {
#include normalized-background-image($background-image);
#include show($show);
background-color: $background-color;
background-position: $background-position;
}
#content;
}
EDIT 2: Here is the $button-selector (I can not edit this in the platform, but maybe overwrite it in my own project?)
$button-class: 'p-button';
$button-selector: '.#{$button-class}';
Everyone, finally found the solution. I just removed the &.button from the .p-button mixin include and now it works:
#include button-appearance ("button") { *styles* }
#include button-appearance () { *styles* }
Edited the answer after the original question was edited adding the used and un modifiable mixin
The original mixin does not append the ‘#content’ passed to the mixin to the generated selector. So if you cannot modify the original mixin, the only way is to add your properties outside the mixin. According to the mixin the selector will match a predefined ‘$button-selector’ variable, so it won’t use your class.
So, if you want to use the same class defined in ‘$button-class’, try the following:
#{$button-selector}.button {
margin: 10px;
}
Will output:
.p-button.button {
margin: 10px;
}
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);
}
}
This question already has answers here:
Including another class in SCSS
(6 answers)
Closed 7 years ago.
In LESS you can reuse the styling of a class inside of another...i.e.
.class1{
display: none;
}
.class2{
.class1();
}
Which should compile into...
.class1{
display: none;
}
.class2{
display: none;
}
While I'm aware this is a pointless example. I'm trying to find out if SASS/SCSS has any ability to just reference an existing class and copy the styles without having to create a mixin?
There is this question. The answer here modifies the original "extended" class. I'm looking to copy the styles FROM the original class. Not add the class name of the second to the first class.
you can use #extend https://css-tricks.com/the-extend-concept/
which should compile to
.class1, .class2 {
display: none;
}
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
I keep finding myself wanting to refer to a property of the current class when working in SASS. Usually this comes up as a way to make things more reusable or handle interactions. For example:
.circle
background-color: $brandColor
.circle:hover
background-color: $brandColor + 50
.square
background-color: $brandColor1
.square:hover
background-color: $brandColor1 + 50
I would prefer to write the code more DRYly, like this:
.circle
background-color: $brandColor
.square
background-color: $brandColor1
.circle:hover,
.square:hover
background-color: &background-color + 50
Is this, or something similar, possible in SASS?
No, there is nothing like that in Sass. You would need to use a mixin to get the DRYness you're looking for.
#mixin colorize($color) {
background-color: $color;
&:hover {
background-color: $color + 50;
}
}
.circle {
#include colorize($brandColor1);
}
.square {
#include colorize($brandColor2);
}
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;
}
}