I'm using Bulma CSS framework and they use !important on some color styles.
Basically it has this:
.has-text-grey-light {
color: #b5b5b5 !important;
}
I wanted to override that color on hover like this in my SASS file:
.content ul{
list-style-type: none;
margin:0;
padding:0;
li{
a{
&.has-text-grey-light:hover{
color: lighten($grey-light, 15%) !important;
}
}
}
}
but the !important rule makes it fail to compile. Any idea if we can use !important with SCSS functions?
stupid Me! it was because I had put the wrong color format and not because of !important. But being in a rush, I didn't read it fully and just assumed it was because of !important. It's working now.
Related
I want to use one CSS style for two classes with mixin, but when I use mixin the final result will be 2 classes with the same CSS.
I have shared my code example below:
#mixin btnhover {
background-color: $bg-cl-blc;
color: $txt-cl-ff;
}
.btn-base {
font-size: 15px;
&:hover {
#include btnhover;
}
}
.btn-otln {
font-size: 15px;
&:hover {
#include btnhover;
}
}
**OUTPUT CSS**
.btn-base:hover {
background-color: #000;
color: #fff;
}
.btn-otln:hover {
background-color: #000;
color: #fff;
}
This is how Sass works - it allows for better organisation of the code, but this code is then compiled, retaining functionality and not caring about other aspects.
If you really care about how the output code is structured, I would suggest to create a separate style for the classes with the hover effect:
#mixin btnhover {
background-color: #000;
color: #fff;
}
.btn-base {
font-size: 15px;
}
.btn-otln {
font-size: 15px;
}
.btn-base:hover,
.btn-otln:hover {
#include btnhover;
}
But in this approach, the use of mixin (and Sass) is questionable (in this exact case).
Generally, when you use Sass (or any other compiled language), you don't really care about the output CSS.
This won't be your answer, but I want to show you another way to make a mixin
#mixin btnhover($back, $color) {
background: $back;
color: $color;
}
When you use it, you can plug in the values
#include mixin btnhover($bg-cl-blc, $txt-cl-ff)
That way you can use the mixin over and over in different places with different values
Just discovered this recently myself, it's a concept called 'placeholders' in SASS syntax (see example below). I've done my best to apply it to your situation below....
Put this in your .scss file:
$bg-cl-blc: #ff211a;
$txt-cl-ff: #fff;
$btn-base-size: 15px;
%btnhover {
background-color: $bg-cl-blc;
color: $txt-cl-ff;
}
%btn-common {
font-size: $btn-base-size;
}
.btn-base {
#extend %btn-common;
&:hover {
#extend %btnhover;
}
}
.btn-otln {
#extend %btn-common;
&:hover {
#extend %btnhover;
}
}
CSS output will look like this
.btn-otln:hover, .btn-base:hover {
background-color: #ff211a;
color: #fff;
}
.btn-otln, .btn-base {
font-size: 15px;
}
Great article written up on this here:
https://dev.to/kemotiadev/are-sass-mixins-really-that-lightweight-and-what-are-placeholders-119i
I have the following SCSS.
.mat-tab-label {
&:focus {
background-color: #1976d2 !important; color:white;
}
}
.mat-tab-label-active {
background-color: #1976d2 !important; color:white;
}
Both selectors need the same properties but how to I remove the duplication? Variables only store single values.
Check out sass basics here
Search for extend/inherirance section and mixin section. Both provide options to reuse your CSS rules across your sass files.
You can use styles extending functionality and placeholder selectors to achieve your goal:
%tab-label {
background-color: #1976d2 !important;
color:white;
}
.mat-tab-label {
&:focus {
#extend %tab-label;
}
}
.mat-tab-label-active {
#extend %tab-label;
}
I am using md-slider of Angular Material version 2.0.0-beta.8
I have selected the indigo-pink theme and imported it in style.css
I am pretty happy with what I have, but I would like to change just the background color of the slider handle and of the thumbnail.
Apparently this is set by the following css code defined in the indigo-pink.css file:
.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill{background-color:#ff4081}
In fact, if I change indigo-pink.css I obtain what I want, but this is clearly not the right way.
So the question which is the right way to change just slider handle and thumbnail color, and for the sake of generality, how to change only some of the attributes of the classes defined in a theme of Angular Material.
You can use ::ng-deep override any css class from the prebuilt stylesheet.
To apply the custom change for whole app, add the custom class to root component's stylesheet, usually styles.css.
css to customize md-slide-toggle:
/* CSS to change Default/'Accent' color */
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: blue; /*replace with your color*/
}
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: skyblue; /*replace with your color*/
}
/* CSS to change 'Primary' color */
::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: green;
}
::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #ff99ff;
}
/* CSS to change 'Warn' color */
::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: red;
}
::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #ffe066;
}
Plunker example
::ng-deep is the way to override theme classes, as stated by Nehal.
It seems though that it does not work if you concatenate more classes. In other words the following code does NOT work
::ng-deep .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
background-color: black;
}
while the following version of the code actually works and overrides effectively the values set in the theme css
::ng-deep .mat-accent .mat-slider-thumb {
background-color: black;
}
::ng-deep .mat-accent .mat-slider-thumb-label {
background-color: black;
}
::ng-deep .mat-accent .mat-slider-track-fill {
background-color: black;
}
Angular material components are using themes https://material.angular.io/guide/theming
Slider's background colors can be changed this way:
#include mat-slider-theme(map_merge(mat-light-theme, (
accent: mat-palette(map_merge($mat-deep-orange, (
500: green,
))),
foreground: (
base: #848484,
slider-min: white,
slider-off: #bebebe,
slider-off-active: #bebebe,
),
)));
If you want to override the slider's color one at a time, i.e. to apply custom styles to each slider:
you will need to add classes to your sliders :
<mat-slider class="average"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
<mat-slider class="min"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
<mat-slider class="max"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
Then in your CSS, you can customize each of them as such:
:host ::ng-deep .average .mat-slider-thumb {
background-color: #ff3967;
}
:host ::ng-deep .min .mat-slider-thumb {
background-color: blue;
}
:host ::ng-deep .min .mat-slider-thumb-label {
background-color: blue;
}
:host ::ng-deep .min .mat-slider-track-fill {
background-color: blue;
}
:host ::ng-deep .max .mat-slider-thumb {
background-color: orange;
}
:host ::ng-deep .max .mat-slider-thumb-label {
background-color: orange;
}
:host ::ng-deep .max .mat-slider-track-fill {
background-color: orange;
}
All info about :host and ::ng-deep in the offical Angular documentation for component styles
Here is how I solved in just a few minutes and got it working.
Add this two-line in style.css, not in component CSS.
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color:#0056ff;//Your color
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color: #0056ff;//Your color
}
Change Slider color by setting color
<mat-slide-toggle color="primary" [(ngModel)]="wifiStatus">Wifi</mat-slide-toggle>
Using color="primary" is just to set it to one of it's default themes.
Only way to change the background-color as of now is,
/deep/.mat-accent .mat-slider-thumb,
/deep/.mat-accent .mat-slider-thumb-label,
/deep/.mat-accent .mat-slider-track-fill {
background-color: #128CB0;
}
Does anyone here know how to change the color of the text in the thumb-label though? Adding color: #fffff within the same css does not seem to help, it's still using black as the color.
For anyone working with the Angular 14+, the class names in the mat-slider have apparently changed and the accepted answer might need a few tweaks. Here is the updated CSS that can be added to your components CSS file.
::ng-deep .mat-slider.mat-accent .mat-slider-track-fill {
background-color: #0062AB ;
}
::ng-deep .mat-slider.mat-accent .mat-slider-thumb{
background-color: #0062AB;
}
::ng-deep .mat-slider.mat-accent .mat-slider-thumb-label {
background-color: #0062AB;
}
I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.
I am trying to learn SASS. I got this snippet working but the generated css is awful in my opinion. I would like all this css to go in te same .container{ }. Not three different as shown below.
SASS:
.container{
#extend %clearfix;
#extend %text-truncate;
#include border-radius(10px);
}
Genereted css:
.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}
What I want:
.container{
...clear fix
...text-truncat
...clear border-radius
}
This is the nature of #extend. If you change your extend classes to ordinary classes, the way it works the way it does is revealed.
#mixin my-mixin() {
padding: 1em;
}
.a {
color: red;
}
.b {
border: 1px solid;
}
.foo {
#extend .a;
#extend .b;
#include my-mixin();
}
Compiles to:
.a, .foo {
color: red;
}
.b, .foo {
border: 1px solid;
}
.foo {
padding: 1em;
}
Using an extend only class simply suppresses the name from the output. If your extend classes are not intended for reuse, then they are better suited as a mixin.
See also: https://codereview.stackexchange.com/a/27910/26722