Is there a way to have something like this:
.class1, .class2 {
background: green;
:not(.class1) {
//Only apply to .class2
background: red;
}
}
Compile to
.class1, .class2 { background: green; }
.class2 { background: red; }
Im trying not to have .class2 have its own separate style somewhere else.
No, it is only possible to be inclusive with Sass using nesting, not exclusive. Have you looked at the #extend directive?
%common-styles {
border: 1px solid;
}
.class1 {
#extend %common-styles;
background: green;
}
.class2 {
#extend %common-styles;
background: red;
}
Would compile to this (not sure on exact order here, don't have Sass available at the moment):
.class1 { background: green }
.class2 { background: red }
.class1, .class2 { border: 1px solid }
Obviously not the solution you are looking for, but it is the approach you would typically take with Sass. Is there a reason you can't keep the unique .class2 styling with the rest of the styles?
.class1, .class2 {
background: green;
}
.class2 {
background: red;
}
Alternately, you could do this:
.class2 {
background: red !important;
&, .class1 {
background: green;
}
}
Related
it is possible to reuse all properties of another class in scss using the #extend method.
.class1 {
height: 10px;
width: 10px;
}
.class2 {
#extend .class1;
border-color: #000000;
}
Which will result in
.class1, .class2 {
height: 10px;
width: 10px;
}
.class2 {
border-color: #000000;
}
Is it possible, to reuse only custom properties of another class? Something like
.class2 {
#extend .class1.height;
border-color: #000000;
}
Which results in something like this
.class1 {
height: 10px;
width: 10px;
}
.class2 {
height: 10px;
border-color: #000000;
}
Thank you very much.
you can, but for that you need to extend a placeholder rather than a class. you abstract the desired properties to a placeholder, and apply at desired classes:
%custom-height {
height: 10px;
}
.class1 {
#extend %custom-height;
width: 10px;
}
.class2 {
#extend %custom-height;
border-color: #000000;
}
which will result in:
.class1, .class2 {
height: 10px;
}
.class1 {
width: 10px;
}
.class2 {
border-color: #000000;
}
Is there a way to target the "root selector" via sass's mixin? (not the #at-root selector)
For example:
.wrapper {
background-color: yellow;
.field{
#include root {
.x{
background-color: red;
}
}
}
}
outputs this
.wrapper {
background-color: yellow;
}
.wrapper .x {
background-color: red;
}
After converting a lot of redundant crappy css files into scss files, I have a bunch of scss files. I'm pretty sure there is a lot of common css repeated among these files and I would like to extract this code.
As an example, let's say I have this block of scss code (let's call it block A) :
.test {
color: white;
.toto {
background: red;
font-size: 12px;
}
}
And another block (that we'll call block B) :
.test {
color: black;
.toto {
background: blue;
font-size: 12px;
text-align: center;
}
}
I want to be able to extract the following common scss code from block A and B :
.test {
.toto {
font-size: 12px;
}
}
It seems like a simple task to do, but with a large list of long scss files, it's really painful to do it manually. After searching for a while I didn't find any tool for that.
An intermediary solution could be to convert sass code to a multi-dimensionnal associative array and to process arrays to find intersections, but I could not find any simple solution to do that either, so any help would be appreciated.
There are a few approaches but in this instance, I would opt for a variable:
$base-font-size: 12px;
.test {
color: white;
.toto {
background: red;
font-size: $base-font-size;
}
}
.test {
color: black;
.toto {
background: blue;
font-size: $base-font-size;
text-align: center;
}
}
Or you could add a toto mixin with some defaults and use that:
#mixin toto($background: red, $text-align: left, $font-size: 12px) {
.toto {
background: $background;
text-align: $text-align;
font-size: $font-size;
}
}
.test {
color: white;
#include toto();
}
.test {
color: black;
#include toto(blue, center);
}
EDIT: or use extend:
.font-size-12 {
font-size: 12px;
}
.test {
color: white;
.toto {
#extend .font-size-12;
background: red;
}
}
.test {
color: black;
.toto {
#extend .font-size-12;
background: blue;
text-align: center;
}
}
I have a scenario in sass
.A{
background-color: red;
Padding :20px;
h4{ padding-bottom :20px;}
}
// another class
.B{
background-color : blue;
padding : 20px
h4{ padding-bottom:20px}
}
Question: how can i combine padding and h4 together in SASS without to repeating padding and h4 properties
The most straight forward way is to use #extend.
%common_properties {
padding: 20px;
h4 {
padding-bottom: 20px;
}
}
.a {
#extend %common_properties;
background-color: red;
}
.b {
#extend %common_properties;
background-color: blue;
}
You really don't save much by using sass/scss for this small of a redundancy
A solution with scss:
.a, .b {
padding: 20px;
background-color: red;
& h4 {
padding-bottom: 20px;
}
}
.b{
background-color:blue;
}
That solution in plain css:
.a, .b {
padding: 20px;
background-color: red;
}
.a h4, .b h4 {
padding-bottom: 20px;
}
.b {
background-color: blue;
}
Here is what that will look like:
http://codepen.io/cawoelk/pen/Ciqyw
Maybe a better question would be, Is there a more efficient way to override parts of a mixin?
This piece of SCSS:
#mixin button {
.button {
background-color: red;
color: white;
}
}
.container {
#include button;
.button {
background-color: green;
}
}
compiles to:
.container .button {
background-color: red;
color: white;
}
.container .button {
background-color: green;
}
I wish it could compile to:
.container .button {
background-color: green;
color: white;
}
Pass an argument into the mixin instead:
#mixin button($color: red) {
background-color: $color;
color: white;
}
.container {
.button {
#include button(green);
}
}