I am brand new to sass and am trying to get my head wrapped around mixins and using if/else statements inside of mixins. I'm trying to write something simple that basically says if the width setting of a selector is greater than 50% it will be a certain color, otherwise it will be a different color.
Here is the code I have so far:
#mixin color-class($width) {
#if "$width > 50%" {
background-color: purple;
} #else {
background-color: orange;
}
}
.selector-two {
#include color-class(40%);
}
.selector-three {
#include color-class(80%);
}
The css outputs the color as purple no matter what value I put here so I'm definitely missing something, any help would be greatly appreciated.
try removing the ":
#if $width > 50% {}
You can quickly experiment with it here: http://sassmeister.com/
Related
I am looking for a way to change the color of a Gtk::Entry that is stored in a specific variable. I am using the CSS way to specify the color of an Entry and I have found this code which changes the color of all entries in the application but this is not exactly what I am looking for:
styleContext = get_style_context();
provider = Gtk::CssProvider::create();
styleContext->add_provider_for_screen(Gdk::Screen::get_default(), provider,
GTK_STYLE_PROVIDER_PRIORITY_USER);
provider->load_from_data(".entry { background: red; }");
You can get the style context for that particular Gtk::Entry, it can look someting like:
auto style_context = entryWidget.get_style_context();
try {
auto red_background = Gtk::CssProvider::create();
red_background->load_from_data(" entry { background: red; } ");
style_context->add_provider(red_background, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
} catch (Gtk::CssProviderError& err) {
std::cerr << err.what() << "\n";
}
Sometimes it is tricky to have the style apply to the widget. If this is the case, try changing the selector from tag entry to *.
The API docs suggests it is possible use an id selector in the css and apply the css-provider to the parent Window. I have not been able to make this work.
I have set up variables for the colors that i want to work with, say:
$navy: #001F3F;
$blue: #0074D9;
$aqua: #7FDBFF;
$teal: #39CCCC;
Is there any way of defining a list like i did below, and then use functions on all variables in that list.
$colors:
($navy)($blue)($aqua)($teal);
I.e. darken all colors at once and put them inside a new list by doing something like?
$colors-dark:
#each $color in $colors {
$#{$color}-dark: darken($color, 10);
};
And will i then be able to, whenever i have an element i.e. a button that I might want to have a subclass for each color as a backgound option:
#each $color in $colors-dark {
.btn.#{$color} {
backgound-color:$color;
}
}
Would be such a time saver instead of the darken or lighten all colors one at a time.
Sorry if my question is poorly written, i just started getting into sass after years of plain css, and i'm still kind of unsure how sass work along with its limitations.
Best regards.
You can't define a list with an #each or create a new list/variable name with interpolation.
You can create map values with interpolation and get your desired outcome.
DEMO
// Put your colors in a map.
$colors: (
navy: #001F3F,
blue: #0074D9,
aqua: #7FDBFF,
teal: #39CCCC
);
// Create some empty global maps
$colors-dark: ();
$colors-light: ();
#each $key, $color in $colors {
// Make new maps for each iteration
$dark: (#{$key}-dark: darken($color, 10%));
$light: (#{$key}-light: lighten($color, 10%));
// Update global map with iteration map
$colors-dark: map-merge($colors-dark, $dark);
$colors-light: map-merge($colors-light, $light);
};
// Dark colors
#each $key, $color in $colors-dark {
.btn.#{$key} {
backgound-color: $color;
}
}
// Light colors
#each $key, $color in $colors-light {
.btn.#{$key} {
backgound-color: $color;
}
}
I am finally transitioning over to Susy 2 from Susy One and have been struggling a bit with the new syntax. Specifically, using it with the Breakpoint mixin.
In Susy One, I had this:
// Mobile First Settings
.grid-construct{
$total-columns: $bp-sm-columns;
$column-width: $bp-sm-column-width;
$gutter-width: $bp-sm-gutter-width;
$grid-padding: $bp-sm-grid-padding;
$container-width: $bp-sm-container-width;
$container-style: $bp-sm-container-style;
#include container;
}
//for medium devices
#include breakpoint($breakpoint-md) {
.grid-construct {
$total-columns: $bp-md-columns;
$grid-padding: $bp-md-grid-padding;
#include container;
}
}
// large devices
#include breakpoint($breakpoint-lg) {
.grid-construct {
$total-columns: $bp-lg-columns;
$grid-padding: $bp-lg-grid-padding;
#include container;
}
}
I was then able to write styles such as:
.my-style{
margin-top: 10px;
#include breakpoint($breakpoint-md) {
margin-top: 20px;
}
#include breakpoint($breakpoint-lg) {
margin-top: 40px;
}
}
An example of my HTML markup:
<div class="grid-construct">
<div class="my-style">
Lorem ipsum
</div>
</div>
Is this pattern portable to Susy 2? Would I need to make 3 individual $susy maps for my 3 respective breakpoints?
In your example, the only thing changing at the different breakpoints is the size of the container based on number of total columns (Susy 2 doesn't have grid-padding because you can add that easily yourself). If you set up the basic $susy map the way you want it, you can use the shorthand to override that as you go:
.grid-construct {
#include container;
#include breakpoint($breakpoint-md) {
max-width: container($bp-md-columns);
}
#include breakpoint($breakpoint-lg) {
max-width: container($bp-lg-columns);
}
}
(I used the container function because that max-width is all you really need to override)
You can also use susy-breakpoint to change the settings for the entire breakpoint block:
#include susy-breakpoint($breakpoint-lg, $bp-lg-columns) {
#include container;
}
I'm facing a strange issue in my Qt application... I have a Widget inheriting QLabel with the following stylesheet:
QLabel { padding: 10px ; }
QLabel[current-player=true] { background: blue ; }
QLabel:disabled { background: #eee ; }
And a method:
void MyWidget::updateInformation () {
this->setEnabled (m_player->isEnable ());
if (m_player->isCurrentPlayer ()) {
qDebug () << "Setting current player to true: " << PlayerInfo::toString (m_player->player ()) ;
this->setProperty ("current-player", true);
}
// this->setProperty ("current-player", true);
qDebug () << "Property current player: " << this->property ("current-player") ;
}
As you can see, I want to set the background of my widget to blue when the current-player property is true, so I have the conditions m_player->isCurrentPlayer().
I have a line commented, which was used to test if the property worked, and it did. When I uncomment the line, the background becomes blue.
What is strange is that my debug output is (when the line is commented):
Setting current player to true: "Player1"
Property current player: QVariant(bool, true)
Setting current player to true: "Player1"
Property current player: QVariant(bool, true)
As you can see, the execution goes inside the if statement because I see the Setting current player... output, and the current-player property is true, but the background stay white...
I don't understand my the code works when I set the property all the time and doesn't work if I set the property in a if statement which is taken.
If anyone as an idea, it'll help me a lot!
Thanks!
It's OK. Stylesheets are not recomputed when you change custom properties. Because of performance issues.
Solution: Call polish() and unpolish() to a widget with stylesheet.
P.S. I want to note, that usage of custom properties for such style customization is bad practice, because in case of complex styles it will cause UI lags.
I have a list of items which I want to shade the currently selected one. The problem is that the Foo widget has children and when the following rule always applies instead of just on hover:
Foo:hover {
background-color:#00FFFF;
}
Foo:hover * {
background-color:#00FFFF;
}
How do I fix this?
Your syntax is wrong. It should be like this:
Foo *::hover{ background-color: #00FFFF; }
Or if you only want to apply this to direct children:
Foo > *::hover{ background-color: #00FFFF; }