Please help me to modify mixin and create compatible function.
Here is my mixin, it can accept optonal parameter !important true or false, and if !important is true then output height as
height: 16px !important; for example:
#mixin svg-size($size, !important: true) {
svg {
height: $size foo();
width: $size foo();
}
}
Call mixin:
#include svg-size(16px, true);
Output:
svg {
height: 16px !important;
width: 16px !important;
}
I also need a proper name for that kind of function
How about conditionally-important as the function name and use some basic at-rules for flow control returning !important if true?
#function conditionally-important ($important) {
#if $important {
#return !important;
}
#return null;
}
#mixin svg-size($size, $is-important: true) {
svg {
height: $size conditionally-important($is-important);
width: $size conditionally-important($is-important);
}
}
// Calling as important
#include svg-size(16px, true);
// Output
svg {
height: 16px !important;
width: 16px !important;
}
// Calling as not important
#include svg-size(16px, false);
// Output
svg {
height: 16px;
width: 16px;
}
Related
I want to pass a class according to a props without having to duplicate the scss code
indeed if I duplicate the code by putting the class it works but I would only like to modify certain value by adding the appropriate class
components
``` :class="[
theme === 'darkModeTheme'
? 'darkModeTheme'
: theme === 'toggleLanguage'
? 'toggleLanguage'
: ''
]"
// props
theme: { type: String }
```
here is an example of the scss
```
&:checked {
background: color(menu);
background-repeat: no-repeat;
background-size: 80px 40px;
.darkModeTheme { //class to be taken into account if defined on the component to call
background: url("../../../assets/img/sky-stars.jpg");
}
&::before {
.toggleLanguage {
background-image: url("~#/assets/img/en.png");
}
// background-image: url("~#/assets/img/en.png");
left: 40px;
}
}
&:before {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
left: 0;
background-size: 30px;
background-repeat: no-repeat;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
#include easeOut;
cursor: pointer;
// background-image: url("~#/assets/img/fr.svg");
.darkModeTheme { //class to be taken into account if defined on the component to call
background-image: color(toggleTheme);
}
.toggleLanguage { //class to be taken into account if defined on the component to call
background-image: url("~#/assets/img/fr.svg");
}
}```
In your template, the dynamic class should be defined like
:class="{
'darkModeTheme': theme === 'darkModeTheme',
'toggleLanguage': theme === 'toggleLanguage'
}"
I am using PrimeNG Steps. How to remove the numbers in steps?
I tried using the Default CSS Property.
component has no option for this ,but you can use css to hide the innerHtml by after pseudo-element
style.scss (global style)
p-steps{
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps .ui-steps-item .ui-steps-number {
color: #ccc !important;
}
}
demo 🚀
the style above will change the style for all p-steps components but you can use custom styleClass like this
template
<p-steps styleClass="dot-theme" [model]="items"
[(activeIndex)]="activeIndex" [readonly]="false">
</p-steps>
style.scss
.dot-theme {
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor ;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps-number {
color: #ccc !important;
}
}
demo 🌟
You can simply hide the text setting it's colour to transparent:
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
color: transparent;
}
I'm relatively new to Less (and precompilers).
I have three files, defined as this:
//global.less
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
//...
//global-flex.less
body {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
//...
And a third file (main.less) where I import both of those files.
#import "global.less";
#import "global-flex.less";
//Other imports and files also happens, but they are not relevant to this question.
When i compile main.less, my output is:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
I want the output to "merge" the two matching "body" rules, like this:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
How can I achieve this?
I have a mixin that accepts an argument that I want to pass into a variable.
#mixin my_mixin($arg) {
background-color: $state-#{$arg}-text;
}
Interpolation of variable names is currently not possible in SASS. Here is the issue that discusses.
However, you may use interpolation of placeholders:
%my-dark-styles {
background-color: #000;
}
%my-white-styles {
background-color: #FFF;
}
#mixin my_mixin($arg) {
#extend %my-#{$arg}-styles;
}
.header {
#include my_mixin("dark");
}
.footer {
#include my_mixin("white");
}
This compiles to:
.header {
background-color: #000;
}
.footer {
background-color: #FFF;
}
Since Sass 3.3 you can use maps also https://sass-lang.com/blog/sass-33-is-released
Here is an example:
$state-light-text : #FFFFFF;
$state-dark-text : #000000;
$color-map: ( //create a array to support the two colors light and dark
light: $state-light-text,
dark: $state-dark-text
);
#each $color-key, $color-var in $color-map {
.myclass--#{$color-key} { //will generate .myclass--light .myclass--dark
background-color: $color-var; // equal $state-light-text or $state-dark-text
}
}
It will compile into:
.myclass--light {
background-color: #FFFFFF;
}
.myclass--dark {
background-color: #000000;
}
In Sass is there a way to split up a list of variables / classes with hyphens?
It's a fuzzy question title so it's probably best I show what I'm trying to achieve.
In the below example I'm trying to create some utility classes that I can apply to HTML elements to help with vertical rhythm.
For example I may want to give an element a small margin that is consistent with my vertical rhythm strategy and so I'll add the class .m-t-s (which stands for margin-top-small).
I then want to output versions of those utility classes against for each media query I have for fine grain control e.g. I may want a class .m-t-s-768 which will add a small top margin when there is a minimum viewport width of 768px.
I have achieved this below, but it is a very long-winded and repetitive way of doing it. Can anyone suggest a more concise way?
Variables
––––––––––
$mediaQueries-px:
640,
768,
1024
;
$s: 20px; /* FYI I've simplified these examples for the sake of demonstration, normally I use something like ($baseLineHeight / 1.5) + rem */
$m: 50px;
$l: 60px;
Creating the classes
–––––––––––––––––––––
.m-t-s {
margin-top: $s;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-s-#{$mediaQuery} {
margin-top: $s;
}
}
}
.m-t-m {
margin-top: $m;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-m-#{$mediaQuery} {
margin-top: $m;
}
}
}
This repeats for .m-t-l too (margin top large), and then it continues for padding classes (e.g. .p-t-s and so on), so it gets to be a pretty long list of utility classes.
To programatically generate that output, you need another list and an inner loop:
$mediaQueries-px:
640,
768,
1024
;
$s: 20px;
$m: 50px;
$l: 60px;
$sizes: s $s, m $m, l $l;
#each $size in $sizes {
.m-t-#{nth($size, 1)} {
margin-top: nth($size, 2);
}
}
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16 * 1em)) { // modified for compilation purposes
#each $size in $sizes {
.m-t-#{nth($size, 1)}-#{$mediaQuery} {
margin-top: nth($size, 2);
}
}
}
}
Output:
.m-t-s {
margin-top: 20px;
}
.m-t-m {
margin-top: 50px;
}
.m-t-l {
margin-top: 60px;
}
#media screen and (min-width: 40em) {
.m-t-s-640 {
margin-top: 20px;
}
.m-t-m-640 {
margin-top: 50px;
}
.m-t-l-640 {
margin-top: 60px;
}
}
#media screen and (min-width: 48em) {
.m-t-s-768 {
margin-top: 20px;
}
.m-t-m-768 {
margin-top: 50px;
}
.m-t-l-768 {
margin-top: 60px;
}
}
#media screen and (min-width: 64em) {
.m-t-s-1024 {
margin-top: 20px;
}
.m-t-m-1024 {
margin-top: 50px;
}
.m-t-l-1024 {
margin-top: 60px;
}
}