/*jshint esversion: 6 */ alternative method - atom-editor

At the top of all .js files (in atom editor) i have to add the following code:
/*jshint esversion: 6 */
otherwise i get w104 lint warnings for any "const declarations". Is there a global setting to remove this ? or what is the best method ?

Related

SASS/SCSS variable not working with CSS variable assignment

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
}

Can Stylus interpolate a variable inside another variable?

I'm trying to set up a mixin for a selector interpolation in Stylus to tweak the themes of an external website (Logseq), particularly the position of different objects in different divs. Here's a simplified version of my code for just list bullets (object) in two divs (area):
// selectors for bullets, as constants for different themes
content-list = '.content-list-1,.content-list-2'
sidebar-list = '.sidebar-list-1,.sidebar-list-2'
// positions of bullets, for tweaking
content-list-margin-top : 0.4em
sidebar-list-margin-right : 0.1em
// the mixin for the interpolation in question
position(object, area)
{{area}-list} // to be replaced with .sidebar-list-1,.sidebar-list-2
position : relative
top : {area}-{object}-margin-top
right : {area}-{object}-margin-right
.bullet
position(bullet, content)
position(bullet, sidebar)
I'm basing this off of the example provided by the official documentation here and here:
border(side, args...)
if side
border-{side} args
else
border args
mySelectors = '#foo,#bar,.baz'
{mySelectors}
background: #000
However, my code gets an error at {{area}-list}, that the next block (after right : ...) expected : but got }.
I suppose that my use of {} is wrong, or that inserting a variable into another variable is impossible in the first place. I tried replacing {} with () as suggested here, but the error persists.

How can I use elements in xxx.rb in xxx.css.scss?

This is the ".rb" file:
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
def bg
#images = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg","bg6.jpg","bg7.jpg","bg8.jpg"]
#random_no = rand(8)
#random_image = #images[#random_no]
end
end
This is the "css.scss" file:
#welcome
{
background-image:url();
}
I want the background-image to display #random_image, but I have no idea what should be in url().
Thanks!
In short, you can't dynamically change the background via .css because it loads once, but you can make a small hack specifying styling in layout file. Check out similar question.

Css not working properly in codemirror editor

I've installed the codemirror editor succesfully.
But there is one issue regarding css of that editor.
You can check here what I mean.
So how can I display the color after 3rd line in the editor.
you should look at
<div class="CodeMirror-gutters" style=" /*height: some_pixel*/; "><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div>
instead of some_pixel after press enter or any keyword it will automatically set the height of the line number,
if you have that problem on start you might want to see how to create at first,
there is three common method,
The simplest is to define your Text Area and just use this code:
var YourCodeMirror = CodeMirror.fromTextArea(YourDefinedTextArea);
The best is put values using code:
var yourCodeMirror = CodeMirror(PlaceYouWant, {
value: /*any code here :*/"function(){return 'anything'}",
mode: /*your mode ie.*/"javascript"
});
hope it helps
UPDATE: There is a manual site here : http://codemirror.net/doc/manual.html
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};

Using variables in qt StyleSheets

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)

Resources