I've been staring at this for way too long, I really don't see what I did wrong here
#mixin border-stroke($val){
#if $val == light {border-stroke: 1px solid black;}
#else if $val == medium {border-stroke: 3px solid black;}
#else if $val == heavy {border-stroke: 6px solid black;}
#else {border-stroke: none;}
Your mixin is setting the (non-existent) CSS property border-stroke instead of just border.
Change it to this:
#mixin border-stroke($val) {
#if $val == light { border: 1px solid black; }
#else if $val == medium { border: 3px solid black; }
#else if $val == heavy { border: 6px solid black; }
#else { border: none; }
Related
How does nesting work in open-props?
this one doesn't work.
button.blue {
color: var(--blue-6);
background-color: var(--blue-0);
border: 1px solid var(--blue-1);
text-shadow: 0 1px 0 var(--blue-2);
&:hover {
background-color: var(--blue-1);
}
}
Something like this:
#mystery-functionality border-different-when-hover($selector) {
$selector {
border: 1px dashed currentColor;
}
$selector:hover {
border: 2px solid currentColor;
}
}
#use-mystery-functionality border-different-when-hover(nav > abbr);
#use-mystery-functionality border-different-when-hover(a.kebap);
#use-mystery-functionality border-different-when-hover(#bleepable-constructor);
which would compile to this:
nav > abbr {border: 1px dashed currentColor;}
nav > abbr:hover {border: 2px solid currentColor;}
a.kebap {border: 1px dashed currentColor;}
a.kebap:hover {border: 2px solid currentColor;}
#bleepable-constructor {border: 1px dashed currentColor;}
#bleepable-constructor:hover {border: 2px solid currentColor;}
Is that a thing?
Yes, this is possible by using #mixin, escaping the selector inside the mixin and passing the selector into the mixin as a string.
#mixin border-different-when-hover($selector) {
#{$selector} {
border: 1px dashed currentColor;
}
#{$selector}:hover {
border: 2px solid currentColor;
}
}
#include border-different-when-hover('nav > abbr');
#include border-different-when-hover('a.kebap');
#include border-different-when-hover('#bleepable-constructor');
See https://sass-lang.com/documentation/at-rules/mixin#arguments for reference on mixins with arguments.
I need to implement this statement in Sass or CSS:
IF :host.form-control IS .ng-valid[required] OR .ng-valid.required
THEN
:host ::ng-deep input.form-control = border-left: 5px solid #42A948;
Thanks
This is not an 'Angular' question,
by the way you can try this
*:host {
$self: &;
&.ng-valid[required], &.ng-valid.required {
#{$self}::ng-deep input.form-control {
border-left: 5px solid #42A948;
}
}
}
I wonder if there is a way to compose/decompose CSS shorthand with Sass. For example, I have:
$standardPadding: 4px 2px 1px 2px;
and I want to have:
$someSpecificPadding: doSomething($standardPadding, top, 2px);
then the final value of $someSpecificPadding is 2px 2px 1px 2px.
Is there existing any doSomething in Sass (scss) or Less ?
You could use this code to achieve your desired result
#function do_something($list, $args...) {
#each $mini-list in $args {
$value: nth($mini-list, 2);
$position: nth($mini-list, 1);
#if $position == top {
$list: set-nth($list, 1, $value);
}
#else if $position == right {
$list: set-nth($list, 2, $value);
}
#else if $position == bottom {
$list: set-nth($list, 3, $value);
}
#else if $position == left {
$list: set-nth($list, 4, $value);
}
}
#return $list;
}
The function can be used to change single or multiple positions in the shorthand value as shown below
$standardPadding: 4px 2px 1px 2px;
//change both top and bottom values
$standardPadding: do_something($standardPadding, top 18px, bottom 15px);
h2 {
border-width: $standardPadding; //returns 18px 2px 15px 2px
}
h3 {
//changes only top value
border-width: do_something($standardPadding, top 12px); //returns 12px 2px 15px 2px
}
Hope this helps.
You can use a mixin somewhat like this
#mixin padding($top, $left: $top, $bottom: $top, $right: $left){
padding-top: $top;
padding-left: $left;
padding-bottom: $bottom;
padding-right: $right;
}
Below is my scss code, it gives expected output. But I feel it looks dirty that the -nrb repeats in both __red and __green, is there a way to simplify this?
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
#extend .ui-grid-column-menu-button;
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
// no right border
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#extend .ui-grid-column-menu-button;
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
Also, what is the correct way of extending the underlying class? Right now I have hard-coded the class name in #extend in -nrb, some keywords like this
You can group red and green:
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
}
&__green {
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
}
&__red, &__green{
#extend .ui-grid-column-menu-button;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
I guess you could do some thing like this
$cell-header: '.cell-header';
#mixin headermixin ($cell-color, $cell-bgcolor) {
#extend .ui-grid-column-menu-button;
color: $cell-color;
background-color: $cell-bgcolor;
border: solid 1px $cell-color;
}
#{$cell-header} {
&__red {
#include headermixin($red-cell-color,$red-cell-bgcolor,.cell-header__red)
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#include headermixin($green-cell-color,$green-cell-bgcolor,.cell-header__green)
&-nrb{
#extend $cell-header__green
border-right: none;
}
}
}
Hope this helps
Thanks