I want to make a short-written flex rules using classes in SCSS. I want to write a one time justify-content class block and to use #mixin in order to insert it to the flex options.
How (if possible) can I write a relative variable inside the #mixin that will represents the parent class that the #mixin was included in?
.row {
display: flex;
flex-direction: row;
#include justification;
}
.column {
display: flex;
flex-direction: column;
#include justification;
}
#mixin justification {
&-center {
#extend {parent};
justify-content: center;
}
&-start {
#extend {parent};
justify-content: start;
}
}
What comes instead of {parent}, where 'parent' represents the class where this mixin was included in?
I think you should make a mixin as shown below and give default values in it.
#mixin flex-properties($flex:flex, $justify-content: center, $align-items: center) {
display: $flex;
justify-content: $justify-content;
align-items: $align-items;
}
To use the above mixin & also you can change the default value of its parameters:-
.some-class {
#include flex-properties(flex, space-between, center);
}
YES! I did it!
The key to the answer is to pass the includer's class name to the #mixin as an argument. Like so:
.row {
display: flex;
flex-direction: row;
#include justification(&);
}
.column {
display: flex;
flex-direction: column;
#include justification(&);
}
#mixin justification($class) {
&-center {
#extend #{$class};
justify-content: center;
}
&-start {
#extend #{$class};
justify-content: start;
}
}
It works
Related
In LESS I could write something like:
.foo {
color: red;
}
.boo {
.foo();
background: blue;
}
To "include" properties of .foo class into .boo one.
What is the easiest and clean way to obtain a similar beaviour in SCSS?
How about trying like this,
mixins.scss
#mixin flex($x: center, $y: center) {
display: flex;
align-items: $x;
justify-content: $y;
}
custom.scss
.classname {
#include flex(flex-start, space-between);
color: red;
}
Use #include
I defined a #mixin with 4 properties, two of them, (font-fam and font-size) are being applied when I #include, but two (text-align and color) are not. Any help on why this is happening?
Here's the defined #mixin:
#mixin important-text {
font-family: vipnagorgialla;
font-size: 6px;
text-align: center;
color: rgb(153, 245, 4);
}
And here's where I called it:
footer {
display: flex;
height: 80px;
background-color: $mainColor;
#include important-text();
}
Is it possible in SASS to generate a CSS file, where only selectors with a color property are stored?
e.g.
This SASS file
class-1 {
display: flex;
align-items: center;
padding: 0 1rem 1rem;
color: #000;
}
class-2 {
display: flex;
align-items: center;
padding: 0 1rem 1rem;
}
class-3 {
display: flex;
color: #000;
}
should be outputted as:
class-1 {
color: #000;
}
class-3 {
color: #000;
}
It is not possible with Sass itself, but you can filter out unwanted properties by using PostCSS.
I'm not aware about any plugin that does exactly this, but it should not be hard to write one by yourself. You can refer postcss-select plugin as a starting point for your implementation as it filters out CSS based on selectors.
I'm trying to build a fairly simple Sass mixin for a dropdown menu built as an html list
My html is
<div class="parent">
<div class="name">My Name</div>
<ul>
<li>profile</li>
<li>logout</li>
</div>
then I have a mixin which is applied to the UL
#mixin dropdown() {
// create a dropdown list from a ul
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
li {
padding: 0;
background-color: red;
}
li a {
#include button();
padding-left: 0;
}
}
Then I am trying to simply make the css by including the mixin in the parent
.parent {
position: relative;
ul {
#include dropdown();
}
&:hover ul {
display: block;
}
}
The problem is that the mixin needs to set ul { display:block} when I hover on the parent so the css needs to read .parent:hover ul {displa:block} but of course, I'd prefer to have it assigned to the parent rather than add the class on the parent itself.
I thought I should be able to do * &:hover or .parent:hover & or something of that sort, but any combination I've tried has not worked.
Using .parent:hover & creates css of
header .parent ul:hover, .parent:hover header .parent ul {
display: block; }
Which is not right.
Suggestions? Without having to specify the parent element would be preferred.
Originally I was trying to put the mixin no the dropdown itself, but thanks to #cimmanon pointing out that I didn't include how I am using the mixin, I reconsidered the approach and have re-created the mixin to be applied to the parent, which works pretty well, but somebody may have a better way.
.parent {
#include dropdown();
}
#mixin dropdown() {
display: relative;
// create a dropdown list from a ul
&:hover ul {
display: block;
}
ul {
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
}
How can I do that :
#mixin addMargin($el) {
$el {
margin-left: 5px;
}
$el:hover {
margin-left: 10px;
}
}
using sass ?
Thanks for your help
In a mixin, you can not only add properties directly to an element, but you can also add more rules:
#mixin addMargin {
margin-left: 5px;
&:hover {
margin-left:10px;
}
}
Note that you have to prefix the :hover with & so that we get this rule:
#something-with-the-mixin-applied:hover
instead of
#something-with-the-mixin-applied :hover
Use interpolation:
#mixin addMargin($el) {
#{$el} {
margin-left: 5px;
}
#{$el}:hover {
margin-left: 10px;
}
}
#include addMargin(h1);
But Yogu is right, you don't need it here. You may omit selectors, leaving only directives in your mixin, and apply the mixin inside a selector:
#mixin addMargin {
margin-left: 5px;
&:hover {
margin-left:10px;
}
}
h1 {
#include addMargin;
}