I have a certain hash table that I want to convert to mixins to use.
My hash table looks like this (but bigger):
$headings = {
h1: {
size: 32px,
line-height: 32px,
letter-spacing: normal,
weight: $weight-bold
},
h2: {
size: 20px,
line-height: 24px,
letter-spacing: 0.25px,
weight: $weight-bold
},
h3: {
size: 20px,
line-height: 24px,
letter-spacing: normal,
weight: $weight-regular
}
}
And I want to create mixins like this:
text-h1()
font-size $headings[h1][size]
font-weight $headings[h1][weight]
line-height $headings[h1][line-height]
letter-spacing $headings[h1][letter-spacing]
But it's not working. Nothing shows up.
I'm not sure how I can retrieve the values to assign them to the correct css prop.
If I can just retrieve the value, I can make each mixin manually.
If there's a better approach by going through the hash table with a loop, I'm also happy to use that. But I wasn't able to create it.
Related
In React js, After reading excel file, I need to apply border color each row...
How to apply border color in each row using sheetjs
Taking a quick look at the sheetjs example demo, you can see that the populated table is a simple HTML table composed of <table/>, <tr/> (rows) and <td/> (cells) among others. See html table documentation.
All you need to do is create a stylesheet (say, my_table.css) and import it in the script that builds thee table (import "./my_table.css") and add a clause for the tr element, as such:
tr {
border: 1px red;
}
If you're struggling to get the desired result with CSS, I'd recommend reading up more on the css border documentation.
Good luck!
You may exceljs npm
worksheet.getCell("A1").border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' },
};
I did some search in github and here, but maybe I'm doing it the wrong way.
Using styled from #mui/material/styles generates random class names like this:
const TitleWrapper = styled('div')`
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
`
Sometimes it becomes hard to debug the app when we don't know where the rendered component came from.
There's an option parameter that can be passed to styled with a label prop that adds a suffix to the class:
const TitleWrapper = styled('div', { label: 'TitleWrapper' })`
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
`
Is there an automated way of adding that suffix to identify the component? It's really painful to do this in every single component.
The solution I found was to update my babel.config.js file with the following changes
plugins: [
[
'#emotion',
{
autoLabel: 'always',
importMap: {
'#mui/material': {
styled: {
canonicalImport: ['#emotion/styled', 'default'],
styledBaseImport: ['#mui/material', 'styled'],
},
},
},
},
],
'#babel/plugin-transform-runtime',
],
I hope this is useful to someone who faces the same issue.
In order to get a custom class name i would like to suggest you to use scss (your own custom classes and styles), then you can put every style you need there , actually that's what i am doing right now, except when i need some styles based on some dynamic data then i can use both: my custom scss classes and styled-component class
So I'm having an issue with Ace editor where certain autocompletions have doubled icons like so
I am creating a custom autocompleter like so:
const customCompleter = {
identifierRegexps: [/[a-zA-Z_0-9\.\$\-\u00A2-\uFFFF]/],
getCompletions: (
editor: Ace.Editor,
session: Ace.EditSession,
pos: Ace.Point,
prefix: string,
callback: Ace.CompleterCallback
): void => {
var completions: any[] = [];
completions.push({
value: "custom",
className: "iconable"
});
if (prefix == "custom.") {
RList = ["custom.Base64Decode",
"custom.AnotherMethod",
"custom.Method3",
"custom.TestingFunction"
];
RList.forEach(function (w) {
completions.push({
value: w,
className: "iconable"
});
});
}
callback(null, completions);
}
}
langTools.addCompleter(customCompleter);
So when I'm pushing to completions i add a className of "iconable". The CSS file then looks like this:
.ace_iconable:after {
font-family: "Font Awesome 5 Free";
content: "\f1b2";
display: inline-block;
padding-right: 10px;
padding-left: 10px;
vertical-align: middle;
font-weight: 900;
}
Not sure why this would be the case, but if anyone has run into this before please let me know!
Thanks
Looks like you can actually just change the css a touch.
You can use .ace_iconable:last-child:after and it will stop the icon being duplicated.
Looks like multiple spans are used when the autocomplete is picking up on a completion which starts halfway through a word. (E.g. User types "a", autocomplete suggests "bad")
This means that the icon would be displayed twice.
I'm going to create a less code that will give different background-color to element depending on it's class. This will be for list of attachments, so class name is based on attachment extension.
I do support some typical extensions:
.label{
&.label-pdf{
background-color: #c70000;
}
&.label-doc, &.label-docx, &.label-odt{
background-color: #157efb;
}
&.label-xls, &.label-xlsx, &.label-calc{
background-color: #069e00;
}
&.label-ppt, &.label-pptx, &.label-odp{
background-color: #9e3c15;
}
&.label-jpg, &.label-png, &.label-gif, &.label-png, &.label-ttf{
background-color: #95009e;
}
}
but the problem is with some unusual extensions, or even files like: jpg, jpeg, doc, docx, this is why I would like to use expression from CSS. In pure CSS I could use:
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
And put this code at the beginning so other classes could override this one.
But unfortunately this sign ^ (I suppose) is breaking my Less compilation. I have been trying to do something like this:
~".label.[class^='label-']{
background-color: rgba(0,37,100,0.4);
}"
AND
.label{
&.~"[class^='label-']"{
background-color: rgba(0,37,100,0.4);
}
}
But still not working. So is it possible to use this selector?
It is not working because your syntax seems to be wrong and not because of any issues with Less.
The below code is invalid because of the . present between the label and the class^="label-"]. Attribute selectors do not require a . before them. It is necessary only for class selectors.
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
The correct version would be the following:
.label[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
and so in Less terms, if you want nesting, it would be as follows:
.label{
&[class^='label-']{
background-color: rgba(0,37,100,0.4);
}
}
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this will */
color: green;
}
<label class='label-a label'>Label A</label>
<label class='label-b label'>Label B</label>
Another thing to note is that the ^= is a starts with selector and so when your element has more than one class, the class that resembles label- should be the first class in the list and not the label. If we make the label as the first class then (like seen in below snippet) it won't work because then the class doesn't start with label-.
If the first class in the list is indeed label then you should consider using the *= (contains) selector. But be careful when using the contains selector because it will sometimes select unintended elements like those with class label-not, not-label etc.
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this won't too */
color: green;
}
.label[class*="label-"] { /* this will */
border: 1px solid green;
}
<label class='label label-a'>Label A</label>
<label class='label label-b'>Label B</label>
I have same problem. I use this in less file.
[class^="customForm-"] { ... }
But for my HTML it does not works.
<div class="form form-01 customForm-radioList">...</div>
The problem is in tha fact that string "form form-01 customForm-radioList" does not starts with "customForm-" it starts with "form".
Solution
Use contains selector W3 school.
[class*="customForm-"] { ... }
Is is possible to use the parent selector in LESS to specify a value for a parent attribute selector?
I want the following output:
[some-attribute] {
font-weight: normal;
}
[some-attribute~="bold"] {
font-weight: bold;
}
Given this (obviously incorrect) example:
[some-attribute] {
font-weight: normal;
&~="bold" {
font-weight: bold;
}
}
Is something like this possible in LESS?
EDIT: For anyone who might be curious, I did try this abomination:
[some-attribute {
&] {
font-weight: normal;
}
&~="bold"] {
font-weight: bold;
}
}
I'm kind of glad it didn't work. I might have been tempted.
Disclaimer: This is strictly how not to over-complicate things but yeah it is still possible in a way using selector interpolation and mixins.
You could write a mixin like below which makes use of the attribute name as one input parameter and the condition as another. The condition is an optional parameter and when it is not provided, the mixin considers it as only a attribute presence selector.
The rules that have to be attached are also passed as input.
.mixin-attrib-selector(#attr-name, #rule, #param:null){
#sel-start: ~"[";
#sel-end: ~"]";
#{sel-start}#{attr-name}{
& when(#param = null){
&#{sel-end}{
#rule();
}
}
& when not (#param = null){
&#{param}#{sel-end}{
#rule();
}
}
}
}
.mixin-attrib-selector(some-attribute, {
font-weight: normal;
});
.mixin-attrib-selector(some-attribute,{
font-weight: bold;
}, ~"~='bold'");
#output{
.mixin-attrib-selector(some-attr, {
font-weight: normal;
});
.mixin-attrib-selector(some-attr,{
font-weight: italic;
}, ~"~='italic'");
}
The parent selector (&) only holds a reference to an entire complex selector, with the option to extend the selector provided that you use the entire thing as a base:
.one > .two {
&::after, &::before {
// Compiles to .one > .two::after, .one > .two::before
}
& + .three {
// Compiles to .one > .two + .three
&-suffix {
// Compiles to .one > .two + .three-suffix
}
}
}
It cannot be used to reference a part of a compound or simple selector, in particular it cannot be used to reference just the attribute name in an attribute selector. You'll have to stick with vanilla CSS.
The reason that abomination doesn't work is because both preprocessors expect all selectors in style rules to be valid; [some-attribute is not a valid selector. You could write a mixin and/or use selector interpolation, but it still has to result in a valid selector when used with a style rule, since the compiler can't assume that you won't be using the selector in its own set of style declarations (though of course, whether a preprocessor should be controlling the author in this way is up for debate...).
No way that I know of. The closest thing you can do is
[some-attribute] {
font-weight: normal;
&[some-attribute~="bold"] {
font-weight: bold;
}
}
which outputs
[some-attribute] {
font-weight: normal;
}
[some-attribute][some-attribute~="bold"] {
font-weight: bold;
}
but you're better off keeping them separate
[some-attribute] {
font-weight: normal;
}
[some-attribute~="bold"] {
font-weight: bold;
}