SCSS GTK3/4. An attempt to explain it


#1

Color definitions:
First you create a new color definition:
$selected_bg_color: #3584e4;
You can use them like this:
background-color: $selected_bg_color

Nested nodes:
CSS:
button {color:yellow};
button:active { color: red};
button:active:hover {color:green};

SCSS:
button{
color:yellow;
&:active {

color:red;
&:hover { color:green}
}
}

Mixings:
_drawing.scss:
//t = state of the nise, c= bg_color, tc= fg_color

@mixin button($t,$c, $tc) {

@if t==normal {
background-color: $c;
color:$tc;
}

@if t==active {
background-color: $selected_bg_color;
color:$tc;
}

}

_common.scss
button{
@include button(normal, $bg_color,$fg_color);
&:active {
@include button(active,donotread,$selected_fg_color}
}

In css:
button { color: $fg_color; background-color: $bg_color};
button:active{color: $selected_fg_color; background-color:$selected_bg_color};

Extends:
Scss
%funnycode {
color:white,
background-color:#fff;
}

button {
&,&:hover{
@extend %funnycode}}

Css:
button, button:hover {
color: white, background-color:white}


#2

You have mixin’s ( to use with @include) and you have %funnycode that you can use with @extend

What is the difference?


#3

With mixings you can usw variables…
First variable is usually something like : hover or :selected. Second is the background color and third the text color.
You can feed the mixin with different variable definition and depending of that you get different output.

An extend is Static text snippet. You can not use extend with a variable.


#4

Ok, thanks, I get it. Still, I will have to download Adwaita and figure things out and fiddle with it.
If I have any questions I will post them here.


#5

Hey Paul, I have been trying to get you to see that for McOS-Mint-Cinnamon-Edition-master I can only see the light theme, cannot see the dark theme in system settings. How do I activate the dark theme please?

Edit: I have Linux Mint 20.1. I simply pasted the extracted folder into my .themes folder, is there anything else I should have done?