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;
}
Related
I'm using SASS's handy ampersand notation to add BEM-style modifiers to my classes:
.box {
display: inline-block;
width: 100px;
height: 100px;
background: magenta;
&--selected {
background: cyan;
}
}
I'm exploring the possibility of only having to apply a single class to my elements (ex: <div class="box--selected">...</div> as opposed to <div class="box box--selected">...</div>). I'd like to avoid using #extend, it casts too wide a net. Currently I'm using mixins, which are good, but a little verbose to use for every single class with a modifier.
What I'd really like to do is get &--selected to inherit all the properties from the parent enclosure, and only from the parent enclosure - ie ignore any other class definitions of .box that careless devs may have inserted.
I know you've expressed the desire to avoid #extend but this method may allow you to avoid other dev's definitions of .box while still achieving your goal.
You could use placeholders to create your own parent enclosure and extend the placeholder(example of placeholder extension) inheriting only from the placeholder. As a placeholder there is no chance of conflicts with classes from other devs on .box:
%box{
display: inline-block;
width: 100px;
height: 100px;
background: magenta;
}
.box--selected{
#extend %box;
background: cyan;
}
Compared to mixins this method lacks the use of parameters like the following example from the article mentioned above [1]:
#mixin padMasterJ ($param: 10px) {
padding: $param;
}
Another thing worth noting is that when #extend is used on a parent selection the result will include all nested selectors #extend cannot be used to directly extend a nested selector.
This question already has answers here:
How to assign to a global variable in Sass?
(2 answers)
Closed 7 years ago.
I'm trying to wrap my brain around this one and hopefully someone here can enlighten me. I have this code as an example:
#mixin stuffs() {
color: $color;
}
$color: #000;
.single {
$color: white;
#include stuffs();
}
I would expect that $color inside the scope of .single would override the global $color value, however it does not. Can someone explain why? What am I missing here?
Ok - let's see if I can break this down using the example you gave.
#mixin stuffs() {
color: $color;
}
$color: #000;
.single {
$color: white;
#include stuffs();
}
You're expecting that the local variable version of $color (i.e. white) would be displayed in the .single selector rather than black.
But you need to separate the local scope of .single from the local scope of the mixin stuffs. They are not the same thing. You would still need to "use" the local variable version of $color (i.e. white) within the .single selector like this:
#mixin stuffs() {
color:$color;
}
$color:#000;
main
{
$color:white;
#include stuffs();
color:$color;
}
Please let me know if I've missed something for you and check out http://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498 for more information about scope.
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; }
I don't know why but while compiling with grunt or anything there is an error called invalid property name
#flotTip {
border: none !important;
font-size: $font-size-small !important;
line-height: 1px !important;
#extend .tooltip-inner() !important;
}
in the above code in the line-height it produces an undefined property. My task was to convert all less files into sass files. Used many solutions to convert all of them to sass as far as I can find. But this one I can't find any solution. Can anyone answer what might be the problem?
Extend is only for extending simple selectors, like class, element, or id. You cannot use !important with #extend. This is the correct way to use extend:
.foo {
color: red;
}
#flotTip {
#extend .foo;
}
You may be confused confusing extends with mixins, which also cannot use !important. This is the correct way to use mixins:
#mixin foo() {
color: red;
}
#flotTip {
#include foo();
}
The line-height: 1px !important; line looks fine. The problem is with the following line. If you're trying to include a mixin, use #include and don't prefix the mixin's name with . (dot). Also, don't put !important after it.
I would guess that you are using #extend incorrectly. See the docs here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works
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);
}