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;
}
}
Related
Can you help me improve the following to SCSS:
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color: $mainhover-color;
}
Your question does not make much sense.
Anyway - it is already valid SCSS - but invalid CSS as it requires compilation.
There are plenty of online CSS to SCSS converters. But none of them will work unless you change $mainhover-color to its compiled value.
This is what it would be post-refactoring:
.navbar-default {
.navbar-brand {
&:hover,
&:focus,
&:active,
&.active {
color: $mainhover-color;
}
}
}
This is not a very useful question on SO. You should read up on SCSS basics.
There is no need for you to change that to SCSS as CSS is valid in SASS/SCSS and that all you would add is nesting, but provided you still want to do it, you could go this way :
.navbar-default {
.navbar-brand {
&:hover,
&:active,
&:focus,
&.active {
color: $mainhover-color;
}
}
}
Keep in mind that this doesn't make it better, it's just another syntax. I advise you read more on SCSS basics.
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 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:
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
}
}
}