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].

Filter by
Sorted by
Tagged with
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 ...
Stephen Brown's user avatar
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 (...
Fuxi's user avatar
  • 7,641
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 ...
moorsu's user avatar
  • 253
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 ...
Praveen RL's user avatar
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 ...
Alex Kleinubing's user avatar
-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==" ...
step's user avatar
  • 2,250
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 ...
4m Media's user avatar
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 { ...
Saddam Alam's user avatar
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-...
Muhammad Amas's user avatar
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 ...
AcinonX's user avatar
  • 75
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 ...
bhavik-civica's user avatar
-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 ...
WongKongPhooey's user avatar
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 ...
Etienne SEMON's user avatar
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 -...
Daniel Kaplan's user avatar
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 ...
Alex Lopez's user avatar
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 ...
Gerits Aurelien's user avatar
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 ...
Gerits Aurelien's user avatar
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, ...
florian's user avatar
  • 626
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-...
phez's user avatar
  • 11
-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 ...
Furqan Misarwala's user avatar
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; ...
chris's user avatar
  • 1
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 ...
standard's user avatar
-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 ...
Maksiks's user avatar
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, ...
R9102's user avatar
  • 697
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 ...
Mohamed Khelil's user avatar
-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, /* ...
Hassaan Athar's user avatar
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 { ...
rahul5's user avatar
  • 9
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 ...
neal_m's user avatar
  • 9
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 ...
WooZy's user avatar
  • 93
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 ...
ogdakke's user avatar
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 ...
luckydoge's user avatar
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 $...
Saeid Dadkhah's user avatar
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 ...
AbdoTech's user avatar
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 ...
MfyDev's user avatar
  • 423
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 ...
NRaf's user avatar
  • 7,457
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 ...
Lee Soobin's user avatar
-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 ...
L33t-HAXX0R's user avatar
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 ...
Kiwiheretic's user avatar
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!./...
roditoo's user avatar
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 ...
Jochem's user avatar
  • 93
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% }...
Kiara's user avatar
  • 25
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 ...
m4d_h4tter's user avatar
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% } ...
Kiara's user avatar
  • 25
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 ...
ahamba solomon's user avatar
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-...
Hannan Ayub's user avatar
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' '...
Luki Smigiel's user avatar
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-...
DLillard0's user avatar
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 ...
cezarlamann's user avatar
  • 1,465
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 ...
donquixote's user avatar
  • 4,997
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 &...
nada virinchi's user avatar

1
2 3 4 5
146