News Articles less

Override Less Mixins

I am fully aware mixins (classes) in Less couldn’t be overridden, but maybe some npm packages exist that could do it or smth else? Currently compiling with grunt-contrib-less /// vendor_mixins.less .do-my-css(@color:red) {color: @color; display: table} // custom_mixins.less .do-my-css(@color:red) {color: @color;} // public.less body { .do-my-css() }; // real output body {color: red; display: table;} // […]

LESS CSS – Not reinventing the wheel

By “wheel” I mean the nested selector path. I’ve converted a somewhat large CSS file to LESS for the most part, nesting rules in DOM order. However, some of my styles are being overridden. Basically, all of the “plain” styles have been nested making their output CSS rules extremely specific (which I want). What’s not […]

LESS – Is there a way to group styles applied to a certain selector together and then apply it in another file?

Let’s say I have a LESS file like this: .wrapper-1 { .textbox { // styles } .textbox::placeholder { // styles } .checkbox { // styles } .button { // styles } .some + other > complicated.selector::here { // styles } } Now, say I want to apply the styles within .wrapper-1 to another file for […]

Removing quotes from selector names when generating styles with Less mixin

I’m working on a legacy project that uses an old version of Less, and moving off it isn’t an option anytime soon. I’m refactoring some repetitive theming and I’ve been trying to use Less mixins to help, but I’m a little stuck, and Less isn’t something I’ve used to any great extent. I’ve defined the […]

Deliberately setting an invalid css property

I would like to deliberately set an scss variable with a string as a property value which will be read as invalid and therefore will have no effect on my ui. E.g. $invalid: "thiswontwork"; .my-element { background: $invalid; } This value will just be considered as invalid and ignored. I know that my variable would […]

Guide how to modificate JS library/ [closed]

Who know some guides about modification of JS libraries? Im noob in JS. I need to add some feature to Less library. Source: JavaSript – Stack Overflow

Form border creates space around inner elements

I’m trying to create a simple bordered form that has a button and input of type="text" inside of it. There is this spacing that appears that I cannot remove. main { display: flex; height: 100vh; width: 100vw; justify-content: center; align-items: center; } main form { display: flex; border: 2px solid green; } main form .btndep […]

Customize Ant design with Next.js

I am using ant design in my next.js project. but I want to customize it, for example: " @primary-color: orange; " I searched the internet and installed all the necessary npm packages, but since I have no webpack knowledge, I got different errors every time I tried. I tried many different codes in next.config.js but […]

Using class prefix pattern with css module

I have a general component that follows this pattern: const Example = ({ clsPrefix = ”, }: props) => { return ( <> <div className={`${clsPrefix}__div1`}>div 1</div> <div className={`${clsPrefix}__div2`}>div 2</div> </> ) } The project is transitioning to using css module gradually. While this pattern does well with global css names, I couldn’t get it to […]

Make cubes size smaller

Please run snippet in fullscreen mode, then you see cubes are too big, I want to make it smaller: Demo I have change size on root but it make a space between cubes, how can I make it small without make any space between? :root { –hue: 185; –radius: 5.5; –size: 4; } I change […]

Is SASS (SCSS) worth learning in 2021? [closed]

I have good practice with hands-on CSS3 but some people told me to learn SCSS too. I have checked the job requirements for big giants like Amazon, Oracle, Accenture, etc.. but major of them don’t really mention SASS or SCSS in their job description. They only mentioned CSS and related frameworks but not SASS/SCSS/LESS. Could […]

(LESS language) different text color/size for each levels of an unordered list | minimal line height | minimal margin, padding

In LESS language, how to: automatically apply a different text color and size for the second level of an unordered list like the following example: – white text 100% sized – blue text 80% sized – red text 60% sized – blue text 80% sized (the default code is in theme.less, shown below) // List […]

less css not rendering (for a split second) on page load

I’m using less css in my stylesheets. I’m also in localhost via xampp. I’m having an issue with my stylesheet not rendering (for a split second) on page load. The page loads quickly without the styles, then loads just a split second later with the styles applied. I would provide source code for you to […]

how to minify duplicated css proprieties code betwen css classes

Hello everyone i have a less code which will compile to css code, now all is fine , but i need to minify my css code because some classes they have the same css proprieties , is there any way to gather theme to one function and call it after inside the class or some […]

After install less loader in create react app get problem with webpack version

I try add less to project and install less and less-loader, but after I install less loader I get next message when try start project. My package.json config looks like "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": […]

Grunt Livereload to reload just the styles

Added "grunt-contrib-livereload": "^0.1.2" to sass compile grunt config. Yes, it’s reloading, but the whole DOM. Magento 2 native config reloader reloading just the styles, not page reload. How I can setup grunt in this way? Thanks module.exports = function (grunt) { const sass = require(‘node-sass’); const timer = require(‘grunt-timer’); require(‘time-grunt’)(grunt); require(‘load-grunt-tasks’)(grunt); timer.init(grunt, { deferLogs: true, […]

Selecting a web element based on a .less css sheet

our application has radio buttons, on which I would like to test for the radio button checked state. These cannot be accessed with a standard selector using standard Robot Framework seleniumlibrary keywords (using css, xpath or otherwise – selected state is not in application page) However, the less page has the checked the value for […]

How to position text to be on the top edge of its container div?

Here the Lorem ipsum text i want to achieve. I tried it with setting the container div to position relative and the text container to position absolut and move it with top: negative value, but it seems not doing what i want. Source: CSS – Stack Overflow

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.