Questions tagged [less]
Less is an open-source stylesheet preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. For the UNIX command, use [less-unix].
7,297
questions
0
votes
0
answers
11
views
How do you get calc to do the calculations in the less compiler and only render the result
I have the following code...
top: calc(extract(@item-top, @index) / @container-height * 100%);
And it is compiled in the Less compiler to this...
top: calc(864 / 1080 * 100%);
But I would like it ...
0
votes
0
answers
23
views
PhpStorm: file watcher on multiple file types + running script from localhost
I want to define some kind of file watcher for multiple file types: .php, .less and .js which will call a script with certain variable parameters (as like from the console) from my current project (...
0
votes
0
answers
9
views
How do I combine three bulma css classes into one using less or any other option?
I have the following bulma classes to be applied one div
"box", "has-text-weight-semibold", "has-text-link-dark", "has-background-primary-light"
How do I ...
1
vote
1
answer
42
views
How to add style for combination of elements nth child?
This is related to calendar styling. When we select date range in the calendar, has to highlight first and last date in dark green and in between dates should be highlighted in light green. But it's ...
1
vote
1
answer
10
views
Does Jekyll not watch Sass files in editing?
I did a standard installation of Jekyll and when I edit a .html file (or other markup accepted by Jekyll) the .scss files are compiled and copied to the _site directory correctly.
However, when I edit ...
-1
votes
0
answers
16
views
SVG loader not visible over IMG with transparent pixel
This is my html markup:
<div class="img-box">
<img class="item-img" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" ...
1
vote
0
answers
46
views
Shopware 6 / Adding Local fonts to Subshop
can anyone help please?
I need to help to set local fonts to Subshop.
Local fonts working good on main shop, but not on subshop.
I did these steps to implement local fonts to Subshop. (Same steps was ...
0
votes
1
answer
51
views
Please Explain: SassScript parent-selector property
I have saw this code in sassscript but it does'nt make my sense and I'm unable to found any official documentation regarding the mention sasscript css output
SassScript
.main aside:hover,
.sidebar p {
...
0
votes
0
answers
23
views
Unable to Dynamically Change Primary Color in Less at Runtime
I am currently facing challenges altering the primary color in Less dynamically during runtime. Despite trying various approaches.
I attempted to modify the primary color in Less using the @primary-...
0
votes
0
answers
22
views
Why does changing a colour to transparent in the Bootstrap LESS source code generate a blank stylesheet?
I modified a variable in the Bootstrap source code to say @btnBackground: fade(@white, 50%); instead of what is was originally.
When I do this, the resulting CSS is completely ...
0
votes
0
answers
42
views
How to use antd styling in v5.x.x?
Previously, we were using antd v4.x.x and have now upgraded to the latest antd version v5.x.x
We were using below 2 .less files with antd v4.x.x
antd/lib/style/themes/default.less
antd/dist/antd.less
...
-1
votes
1
answer
26
views
Styling when a child class appears inside itself
I'm trying to find an elegant solution to styling a child element, when it has the same class as the parent element.
I suspect Javascript will be required to make this work, although I've also ...
0
votes
1
answer
34
views
Angular less scss mat.define-light-theme
I try to traduce this angular scss code in less but i failed :
$theme: mat.define-light-theme((
color: (
primary: $primary,
accent: $accent,
warn: $warn,
)
));
i don't know how to ...
1
vote
1
answer
41
views
How do I change the start path of git log output?
Update: Thanks to @Brian61354270's answer, I've learned I'm asking how to do something with git's core.pager. That's customizable (defaults to less), but mine is set to diff-so-fancy | less --tabs=4 -...
0
votes
0
answers
76
views
Not able to compile .less Magento 2.4.6-p2
I have a local Magento Cloud 2.4.6-p2 + Docker, local site runs perfect without errors, Im trying to customize the Magento Luma Theme, i created my own custom theme parent from Luma, grunt installed ...
1
vote
1
answer
24
views
hover on an element with effect
I created an effect on a list of images so that it enlarges when the mouse passes but when I go to this list the whole list performs the effect and not the selected image.
The current code performs ...
0
votes
1
answer
28
views
Spacing with flexbox for vertical button
I would like to have buttons in a fixed position but positioned vertically with flexbox.
I managed to do part of the work but impossible to make identical spacing between each button.
Best Regards
...
1
vote
1
answer
24
views
stop bulma ribbons from overlaying content when printing
I am working on creating a research report. When I want to save the report as a pdf the navigation ribbon overlays the content. How can I avoid this?
I don't want to hide the ribbons with printing, ...
1
vote
1
answer
29
views
Button element on my webpage is not sizing/scaling appropriately in mobile view of the site
I wrote some code for a button that should be aligned the same way on mobile view as it does in desktop view. The has
<meta name="viewport" content="width=device-width, initial-...
-1
votes
1
answer
49
views
CSS selector for last element in case of display:none is not working
Need to apply style in the following element:
<div id="box" class="abc">Hello, World!11212</div>
It is working when I put display:none on the first element, but it is ...
0
votes
0
answers
34
views
Vue3 global style make the child component style not to work
The global style has been added to the scope, making the child component is not working.
.border[data-v-d0e06bca] {
border: 1px solid #000;
}
.all-center[data-v-d0e06bca] {
align-items: center;
...
0
votes
0
answers
16
views
how combine two variables into a new variable
declare two variables like maps (only variable, not maps). and combine them to a new variable.
Except.
@a: { @x: 1;}
@b: { @x: 2; @y: 3}
.combine(@m, @n) {
@c: // some codes here. make @m and @n ...
-4
votes
1
answer
55
views
Node.js doesn't load CSS and images [duplicate]
Situation
I'm an absolute begginer to Node.js, I'm mostly just trying to implement an npm package into my website but I am struggling to run my existing HTML and CSS (.less specifically).
I am not ...
0
votes
2
answers
47
views
How to align the grid items to the screen if one item is removed-CSS
I have seven items loaded. I am going to write the logic such that if I hide the items, the other items should align to the screen automatically
For example,
if the task is removed(hidden) the item1, ...
0
votes
0
answers
15
views
<table> size management with Angular, Html and Less
I have a table made up of a large number of data items, which means that I can no longer see/enter the new values, as shown in this image :
So I tried adding a low scroll, I thought it would save ...
-1
votes
3
answers
83
views
CSS Text shadow with greater offsets [closed]
I Need a little help in making the outline effect like in the image below:
I tried using CSS text-shadow property but its not working as same as i want.
text-shadow:
6px 6px 0 #000,
/* ...
0
votes
1
answer
22
views
Parent less not applying to child while using & operator
.text1 {
font-weight: normal;
font-family: cursive;
color: green !important;
&-xxs {
font-size: smaller;
}
&-sm {
...
0
votes
1
answer
24
views
LESS and CSS range syntax for @media queries
I am trying to experiment with the range syntax for @Media queries. But I am getting an error on compile that I can not resolve. I am doing this using an Angular framework and VS code. At this point ...
1
vote
0
answers
42
views
:not() apply for all html tags in specific class
I have structure like
...
<div class="footer">
<div class="locket-wrapper">
...
there is many many code before and after. What i wanna do is not apply style for ...
0
votes
0
answers
237
views
Storybook/webpack does not load less styles from components
I'm trying to update a react components monorepo from storybook 5.3 and webpack 4.4 to storybook 6.5 and webpack 5.
After overcoming multiple hurdles, I am at the point where the storybook does run ...
0
votes
1
answer
65
views
webpack less packaging result cache occasionally fails
When I upgrade webpack4.x to 5.88.1, I use the cache function of webpack to improve the build speed.
But in some cases that cannot be reproduced stably, there will be errors in the less compiled code ...
0
votes
1
answer
19
views
How to use $ character in sass file
I have some sass files that contain the $ character.
All files get errors when compiling. Because $ is reserved in sass.
In the next example I want to select all css classes ending with 9.
How to use $...
0
votes
1
answer
29
views
Fill up container with nav list items
a front-end beginner here. I was trying to build this page and I am having trouble with aligning the navbar items with the rest of the components.
This is how it currently looks on my page.
and this ...
0
votes
2
answers
30
views
An element with CSS float moving out from its parent element
In my app, there is a part where it lists articles. Title and author are displayed. The problem is that when the author can't fit to one line with the title but the title is not long enough to split ...
0
votes
2
answers
151
views
Convert LESS lighten and darken to CSS color-mix [duplicate]
I'm trying to convert some LESS color functions (lighten/darken) to use the CSS color-mix function instead so that I can make use of CSS variables.
I have a dependency that uses these internally and ...
2
votes
1
answer
23
views
the relationship between styled component and less preprocessor
recently i learn that if i want to use '&:hover` in the .css files,
i have to use less preprocessor.
in styled component, we can use &:hover in code.
so my question is that
whether react use ...
-2
votes
2
answers
52
views
Making `export LESS=R` persistent across sessions in fish
New to the command line here
My title may be a case of classic x/y problem where it describes the attempted solution instead of the problem itself.
Nevertheless, my issue is with git log where it ...
1
vote
0
answers
23
views
When using less-watch-compiler I sporadically get error message "Does not exist" and then it stops working
I am using the less-watch-compiler installed by npm. I am using it to precompile .less files into .css files. The command line I am running is :
$ npx less-watch-compiler src/ public/dist/
I get ...
0
votes
0
answers
20
views
Error in ./src/styles.less when upgrading from Angular 9 to 10
Im upgrading angular from 9 to 10, and when i run ng build I this error.
ERROR in ./src/styles.less (./node_modules/css-loader/dist/cjs.js??--14-1!./node_modules/postcss-loader/src??embedded!./...
0
votes
1
answer
22
views
Passing variables to mixin in LESS
I'm fairly new to LESS and mixins but i'm trying to generate a mixin to dynamicly generate some classes with certain variables. The mixin below is not working properly. Could anyone point me in the ...
1
vote
1
answer
28
views
SASS- apply CSS if attribute selector not present
I've an HTML & CSS
[class^="layout-"] div, [class*=" layout-"] div {
display: inline-block;
}
.layout-20X80 div.label-txt {
width: 20%
}
.layout-20X80 div.value-container {
width: 80%
}...
2
votes
1
answer
177
views
SCSS Intellisense doesn't show up variables from imported scss files
I installed SCSS IntelliSense extenstion in VS Code but it doesnt suggest any of available variables from other .scss files
It look like this:
One of my .scss files which i imported:
What i've ...
0
votes
1
answer
59
views
SCSS set width based on classes
I've an HTML
.layout-20X80 {
div.label-txt {
width: 20%;
}
div.value-container {
width: 80%
}
}
.layout-30X70 {
div.label-txt {
width: 30%
}
...
0
votes
0
answers
240
views
Customize ant design theme on Nuxtjs3
I have got a nuxtjs3 project with ant design and nuxtjs 3 I want to customize it but the new design seems not to work
Below are the nuxtjs3 project configurations
it compiles well but it still has ant ...
0
votes
2
answers
38
views
Why is the child div clipped even if overflow-y of the parent is auto or visible
There is a parent div whose position is set to relative. And there is a child div that has position absolute. I want to place it on top of the parent div but it hides the content as parent's overflow-...
0
votes
0
answers
11
views
LESS Parse Error when Generating Dynamic Class Names with each() Function
I'm trying to generate dynamic CSS class names using the each() function and string interpolation in LESS.
I've attempted the following code:
@spacing-sizes: 0 0.25 0.5 1 1.5 3;
@breakpoints: '' 'sm' '...
0
votes
1
answer
29
views
Does sass have a way to replace the @plugin function of less?
less has @plugin grammar, I want to change it to sass, how can I do it?
I want to migrate less @plugin to Sass
for example:
@plugin "./palette";
@red-1: color-palette(@red-6, 1);
the color-...
0
votes
0
answers
136
views
Storybook Angular - Error: cssText is undefined when loading component with LESS style
I'm getting the error above in a project that I have set up in the following manner:
Angular 16 (ng new myApp --style less --strict)
Added NG-Zorro (ng add ng-zorro-antd)
Added Storybook (npx ...
0
votes
0
answers
35
views
How to reduce page size of output from less -X, or git log?
I am not sure if this is a git problem, or a less problem, or a batch problem, or something else - so I will simply describe my problem in the way I experience it.
I am using batch in my terminal, and ...
0
votes
0
answers
23
views
Customize 'React Scroll Calendar' - change colors on display and on select
I am using the react-scroll-calender npm module in my project and I need to customize the look and feel starting with the colors.
https://www.npmjs.com/package/react-scroll-calendar
I found the CSS &...