I want to Override Scss Variable value when body direction rtl. I tried like below but its not working. Actually I have used $FONT_REGULAR variable in lot of components, For English version it is ok but now we want to change the font in arabic version but its not working.
$FONT_REGULAR: "Roboto-Regular";
body[dir='rtl'] {
$FONT_REGULAR: "FSAlbertArabicWeb-Regular";
}
Try the below:
html[dir='rtl']
{
// Write here...
}
Related
I have the following SCSS code:
#mixin foo($bar: 42) {
--xyzzy: $bar;
}
bar {
#include foo;
}
I would expect that I get CSS variable --xyzzy set to 42 on all bar elements. Instead of this, I get CSS stating bar { --xyzzy: $bar; }. The variable was not interpreted. I would need to use #{…} syntax instead to get the variable set.
Is this a feature of the SCSS/SASS? A bug? Can I get the interpretation working without enclosing the variable name in #{…}?
Actual result:
bar {
--xyzzy: $bar;
}
Expected:
bar {
--xyzzy: 42;
}
It's not a bug, it's how the Sass compiler works regarding CSS custom properties, known as CSS variables. The syntax #{…} is called interpolation, and it is the only way to inject dynamic values into a custom property. Here is a quote from the doc:
CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.
Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.
That's the reason why you have that behavior, and only doing so works:
#mixin foo($bar: 42) {
--xyzzy: $bar; // does not work
--xyzzy: #{$bar}; // works
}
How to change the alert type icon on the fundamental ngx. I want to use the warning type style but I want the different icon called sap-icon--search. I tried adding directly but not work:
<fd-alert [type]="'warning'" class="sap-icon--search">
You search has zero results
</fd-alert>
You can't apply the style directly and instead you can override the content of fd-alert--warning with the sap-icon--search instead as follows:
.fd-alert--warning:before {
content: "" !important;
}
I'm struggling with a project. I'm using the selector [href*=#{web}] on a variable that I use multiple times on an each loop. The purpose on the each loop is to go through the links on a navigation bar and give a font icon to those that align with social media platforms. The variable that is being run through are things like twitter, facebook, linkedin, and I'm trying to use it to call the url and set up the mixin included. My big problem is that everytime I try to quote the variable $web to get it to show up as a link for the css, it stops parsing the variable and becomes something like "#{$web}" in the compiled css file. What can I do to make variable compile but still quote for href?
So, something like:
$sites: ("twitter.com", "facebook.com", "linkedin.com");
#each $site in $sites {
a[href*="#{$site}"] {
background-image: url("/images/" + $site + ".png");
}
}
Results in:
a[href*="twitter.com"] {
background-image: url("/images/twitter.com.png");
}
a[href*="facebook.com"] {
background-image: url("/images/facebook.com.png");
}
a[href*="linkedin.com"] {
background-image: url("/images/linkedin.com.png");
}
Try this as your selector:
[href*="#{$web}"]
Based on some brief research, it looks like the dollar sign forces the variable value to be output.
I'm in a bit of a pickle. I just picked up WinLess (the compiler I'm using) about two days ago and I've just vaguely learned the basis of LESS. Anyways, I'm having a problem with this bit of code:
// Font
#verdana: font-family:"verdana";
#sans: font-family:"sans-serif";
When I do compile this I get this message:
ParseError: Unrecognized input in on line 4, column 3:
3 // Font
4 #verdana: font-family:"verdana";
5 #sans: font-famlit:"sans-serif";
Can anyone give me a hand? Thanks!
For LESS 1.7+
They have now added rulesets that work like this:
#verdana: {font-family:"verdana"};
.myClass {
#verdana();
}
Note the syntax: you pass a bracketed {} set of properties, and access it with the parenthesis () after the variable name, much like a mixin. As you can see, it also functions a lot like a mixin (similar to lucian's answer), but it has the added value that it can be passed as an argument, so this is possible:
LESS
#verdana: {font-family:"verdana"};
.myMix(#font) {
#font();
}
.test {
.myMix(#verdana);
}
CSS Output
.test {
font-family: "verdana";
}
You can declare it like this: .myfont{ font-family:"some family, some generic family"} and then use it like this: div{ .myfont; }
i only know it in this way :
#variable_name: 'individual_font_name', Verdana, sans-serif;
a font variable with a name, a font name like "My_Verdana" and the main font and the second as example for a failure of the main-font.
hope this helps, greetings.
Is there any possibility of giving variable name to hex/rgb numbers in .qss file . For eh
myColor = #FFCC08
QPushButton { background-color: myColor;}
So that i can define the variable at the top of the stylesheet and use the variable name whereever required instead of using the hex code. Also if i need to change the color then i have to change in one place and it will be reflected throught the file.
I also searched for Saas but don't know how it can be used in qt.
Thanks :)
You could build your own tiny Sass quite easily:
1.Create a text file with definitions of variables. Use simple format like this:
#myColor = #FFDDEE
#myColor2 = #112233
#myWidth = 20px
2.In qss file use variable names:
QPushButton {
background-color: #myColor;
min-width: #myWidth;
}
3.Open both files and for each variable in definition file change its occurrence in qss file with the value (string) from the definition file. It is a simple string replacement.
4.Apply the preprocessed qss in the app.
This is the simplest solution. You can change both definition file and qss file outside the app and apply it without recompilation of code.
What you're trying to accomplish simply isn't possible using pure Qt style sheets.
You can achieve a similar effect by modifying and reloading your style sheets from within your C++ code, for example:
QString myColor = "#FFCC08";
QString styleSheet = "QPushButton { background-color: %1;}";
...
myWidget->setStyleSheet( styleSheet.arg(myColor) );
Unfortunately this has several drawbacks (inability to preview in designer, changing code rather than a style sheet), but it's about as close as you can get to what you're trying to achieve with Qt.
Another way to accomplish this would be to use Dynamic Properties. This would let you easily assign multiple properties to an object or group of objects, sort of like assigning a css class to an object.
https://wiki.qt.io/Dynamic_Properties_and_Stylesheets
For example, in your UI file, you could add a string dynamic property "colorStyle" with a value of "myStyle1".
Your stylesheet would look like:
QPushButton[colorStyle='myStyle1'] {
background-color: #FFCC08;
... any other style changes...
}
Any QPushButton you assign 'myStyle1' will follow the stylesheet if you set it globally.
Here is a solution using sass. First, install the python bindings:
pip install sass
Then, use it:
import sys
import sass
app = QApplication(sys.argv)
# Create your sass style sheet (you can also write this in a file and load the file)
style = '''
$bg-dark: #292929;
QPushButton {
color: red;
background-color: $bg-dark;
}
'''.encode('utf-8')
# Compile Sass to CSS
style = sass.compile_string(style).decode()
# And set it to your app
app.setStyleSheet(style)
I have similar, but different problem. In my case, I want to connect window size to QCheckBoxIndicator. Code below won't work due to css already use the {}.
self.checkBoxYes.setStyleSheet('''
QCheckBox::indicator {
width: {sz} px;
height: {sz} px;
}
'''.format(sz=rel_sz))
However, workaround can be achieved using old-formatted string below:
def resizeEvent(self, a0) -> None:
rel_wdth = self.width() // 20
rel_hgh = self.height() // 10
rel_sz = str(min(rel_hgh, rel_wdth))
self.checkBoxYes.setStyleSheet('''
QCheckBox::indicator {
width: %s px;
height: %s px;
}
''' %(rel_sz, rel_sz))
return super().resizeEvent(a0)