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
Related
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;
}
}
}
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/
I've set of styles which I want to use in multiple places in my CSS.
Here is my function:
#function form-element-dimension{
height: 34px;
padding: 3px 10px;
line-height: 18px;
border: solid 1px #e2e7eb;
}
I will use this function anywhere in my .scss page like below:
.dataTables_length{
select{
form-element-dimension();
}
}
---
---
.contact-form-style{
input{
form-element-dimension();
}
}
How to do this in COMPASS SASS framework?
Although it's really not the best way to do what you're doing, this is how you'd achieve it with sass;
#mixin form-element-dimension {
height: 34px;
padding: 3px 10px;
line-height: 18px;
border: solid 1px #e2e7eb;
}
.dataTables_length {
select {
#include form-element-dimension();
}
}
.contact-form-style {
input {
#include form-element-dimension();
}
}
I have the following LESS:
button {
background: #eee;
border: 1px solid #BBB;
color: #000;
&:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
&.correct {
background-color: #00ff00;
border: 1px solid #00ff00;
}
&.incorrect {
background-color: #ff0000;
}
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
}
}
I'm confused about how to add multiple additional classes. How can I make it so that if the button has a class of current and correct that the text color will be #00ff00 and if the classes are current and incorrect the text color will be #ff0000?
With LESS you can use the & selector to keep stacking class selectors to the same element.
button {
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
&.correct {
// add CSS here for button.current.correct
}
&.incorrect {
// add CSS here for button.current.incorrect
}
}
}
Alternatively if you don't like the deeper nesting:
button {
&.current.correct {
// add CSS here for button.current.correct
}
&.current.incorrect {
// add CSS here for button.current.incorrect
}
}
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/