FAQ Database Discussion Community


Reference imported LESS styles but not output them

css,less
How can imported LESS styles be referenced but not outputted? I was sure that reference should do the trick but it doesn't seem to work as intended. As this Codepen shows, .modal-content-custom { @import (less, reference) "https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css"; .modal-content; } compiles to .modal-content-custom { position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip:...

LESS: associative array in LOOP

for-loop,less,mixins,less-mixins
I need to add an icon to a page, depending by its content. In other words, if a page contain an image, a gallery, a video... I'll add an icon indicating its nature. To do this, I add CSS class to body tag and use descendant selector to add icons...

PhpStorm LESS Watcher configuration

css,less,phpstorm
I am using PhpStorm 8 to work on some LESS files. variables.less gets imported from styles.less. When I save variables.less only a variables.css is being made. How do I configure the watcher to transpile only styles.less > styles.css and automatically upload styles.css? Here's my current config: ...

compiling multiple less files into one fails to recognize variables from variables.less

css,gruntjs,less
I have multiple less files where the structure is as follows LESS variables.less mixins.less main.less grid.less button.less variables.less has some variables such as @padding-small: 20px; @background-color: #fff; Currently each of the less files compiles to its own css file. However i want all the less files to be compiled to...

django-compressor not working on less files in production

django,less,django-compressor
I'm not sure what caused this, it was working earlier. The problem is that I'm not getting any useful debug information in my logs, so I don't know where the failure is occurring. {% compress css %} <link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}css/style.less" /> {% block extrastyle %} {% endblock...

LESS - Create ID by looping through two variables

css,loops,variables,less
I am trying to create a loop that outputs all of the possible combinations between coordinates -2,-2 to 2,2. Is there any way to do this without creating multiple loops? Desired Output #p1x0,#p2x0,#p-1x0,#p-2x0,#p1x1,#p-1x-1,#p-1x1,#p1x-1,#p2x2,#p-2x-2,p2x-2,p-2x2,#p2x1,#p2x-1,#p1x2,#p1x-2,#p-2x1,#p-2x-1,#p-1x2,#p-1x-2,#p0x-1,#p0x-2,#p0x0,#p0x1,#p0x2{} Current Attempt #cube-side { border:red; } .create-cubes(@n, @i: -2, @z: -2, @side-sum:@i + @z) when (@side-sum =<...

How to build a web page with flexible component?

javascript,gruntjs,less,frontend
I have an idea of building web page (without backend, because sometimes I just need to build a static page) with flexible component. But I have met some problem. I assumed the folder structure like this: components |__________header |______header.tpl(any js template is ok) |______header.less |______header.js |__________footer |______footer.tpl |______footer.less |______footer.js |__________news-list...

Defining selectors to apply to the other styles

css,css3,css-selectors,less,extend
I am fairly new to Less. There is some dynamic content coming from external source which is part of #left(id selector) tag. Here is my Less file: //can i define anything like this in `less` @not-empty: #left:not(:empty); #left { background-color: red; &:not(:empty) { font-size: 20px; background-color: green; } } #right...

jquery evalution not worked in less.css

javascript,jquery,css,less
i am using jquery function below @winheight:`$(window).height()` in my less file. when i chrunch it to css i am getting compiler error i am using crunch software Compiler Errors You are using JavaScript, which has been disabled. (Line: 10) Filename: cont.less i want window or device height at less file...

Ant exec command argument dealing with multiple files

java,ant,less,exec
I am using ant exec command to implement the less utility to view the source code of a bunch of .java files. (I know that there are other ways to do this like using concat) So the call ant view works if I specify only one file: <target name="view"> <exec...

Gulp - Sourcemapping less while combining media queries

less,media-queries,gulp,combine-media-queries
In this project I am leveraging "Gulp" for some tasks, but recently got a request to add sourcemapping.. I have the sourcemap working, but it seems to have a conflict with other plugins like 'gulp-combine-mq' and "gulp-combine-media-queries" aka "cmq" When running my styles task with "cmq" commented out, i get...

Multiple CSS classes with Less

html,css,html5,css3,less
I am fairly new Less and have been trying to get a jQuery plugin to work with my custom CSS generated via Less. Basically, what I have is the following html generated by a plugin: <div class="classA class B" ....> <div class="classC classD" ....> <div class="classE classF" ....> .......... I...

Using guards in the mixin

less,guard,less-mixins
I want to create a clever mixin for Bootstrap sources (mixin->buttons.less). What I have is as follows: Less: .button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; /* this variables must be used when I have parent's class="invert"*/ color: @background; background: @color; border-color: @background; /* end */ /*when not...

Less overloading mixins with different variable types

css,less,gradients
I am learning how to use LESS. I have a decent understanding of C++. I would like to create some Mixins for gradients. I started to write mixins for it so that I can just type .gradient( "the start side i.e. top", first color, second color) or .gradient( "the start...

searching through text file in terminal

linux,unix,awk,grep,less
Hi this might be a basic question for many, but it has however managed to eat a couple of hours of my time. I have large data file as an output from running a script. The file contains around 15 columns and around 100,000 rows. I wish to search through...

Validate less with gulp including BEM

css,less,bem
so I have a fairly decent sized code base which is using less (many files). I want to convert the css to use BEM (actually a variant of BEM) and I would love to find a gulp way to lint the less files including naming conventions. Is there any way...

Run LESS mixin only once

less,preprocessor
I am trying to make sure a mixin that may be called several times in different files, only outputs css once. First try (less) I first was thinking something like this: mixin @_mod: "false"; .mod(@_mod) when (@_mod = "false") { @_mod: "true"; .mod { border-radius: 6px; border: 1px solid...

LESS CSS - &:focus not working in variable selector

html,css,less
I have the following code in my .less stylesheet. @text-inputs: input[type=text], input[type=password], input[type=email], input[type=number]; @shade: rgba(0, 0, 0, 0.1); .highlight { background: @shade; } .input-highlight { @{text-inputs} { .highlight; } } .input-highlight-subtle { @{text-inputs} { &:focus { .highlight; } } } My HTML: <body class="input-highlight-subtle"> <input type="text" placeholder="Type Here" />...

Can I use css-classes as a mixin in a less-file?

css,twitter-bootstrap,less,mixins,less-mixins
In my style.less I'd like to define, that all elements with the class .element nested within an element of the class .group have the same properties of the bootstrap-class .col-sm-6. Unfortunately I can't directly add the class .col-sm-6 to the elements. In that project, bootstrap is available in the folder...

Ignore certain Gulp-less errors, or prevent it from attempting to call @imports with css keyword

fonts,error-handling,less,gulp
So I am using gulp as a task engine to handle less compilation (among other things), and part of our stylesheets include fonts from fonts.com. Here's the relevant task in our gulpfile: var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }); browserSync = require('browser-sync'); reload = browserSync.reload; gulp.task('styles', function()...

How to modify your CSS working with Mobile Angular UI and Bootstrap

css,angularjs,twitter-bootstrap,less,stylesheet
I know that my question has already a huge number of topics, but I think it could be helpful for the community to have a clear answer in one topic. This is about modifying your CSS while using Mobile Angular UI, with a bootstrap template. This is how a project...

Bootstrap - Make a dropdown out of navbar-brand that is like navbar-collapse?

html,css,twitter-bootstrap,less,jade
I'm trying to turn my navigation bar's header into something just like the navbar collapse that already exists in Bootstrap. I've managed to turn the header into a dropdown, which will span just one line. Once completed, I want it to look like (but of course, much nicer): LINK /...

On hover color not changing using LESS css

css,less,jade
I'm trying to change the color of text as well as background image, when hovered on the image. I'm using LESS and i am able to change the background image, but the color of the text is not getting changed. Please help. Here's my code snippet :- Jade code (...

Bootstrap, less, how to change number of @grid-columns for nested rows?

twitter-bootstrap,less
I'm building a bootstrap 3 layout and I'm trying to change the number of columns for the nested row so that the nested columns have the same width as top-level columns. I tried something like this but to no avail. <main id="container" class="section"> <div class="main-body"> <div class="sidebar"> <p>content</p> </div> <div...

Restrict mixin values and throw exception when invalid value is provided

less,less-mixins
I have the following Less mixin: .box-sizing(@value) { -webkit-box-sizing: @value; -moz-box-sizing: @value; box-sizing: @value; } and I would like to allow only the values 'border-box' and 'content-box' as parameter, otherwise the Less engine should throw an exception. How can I achieve this? Because without this validation I can write any...

Compile less file to css in expressjs 4.x

node.js,express,less
I want to compile the less file in public folder of expressjs application. Dependencies which I am using are "devDependencies": { "ejs": "^2.3.1", "express": "^4.10.6", "mysql": "^2.5.4" }, "dependencies": { "less": "^2.5.1", "less-middleware": "^2.0.1" } Content in styles.less file header { background-image: url('../img/bg.png'); height: 380px; input#searchBox { width: 100%; height:...

Passing Rulesets into Mixins not working [closed]

css,less
I copied the following text from the website: http://lesscss.org/features/#detached-rulesets-feature and SimpleLESS is giving me an error on the line that I copied it to. Did they remove the ruleset capabilities? Here is what I copied: // declare detached ruleset @detached-ruleset: { background: red; }; // use detached ruleset .top {...

Object doesn't support this action - all of a sudden

javascript,less
I'm running version 1.7.5 and for some incomprehensible reason, all of a sudden I'm getting syntax errors (none of my stylesheets have changed since it was working) and I'm including the .js file in the same way): Object doesn't support this action I've traced the error to this curious fragment...

What is the correct way to adjust bootstrap columns to specified widths

css,twitter-bootstrap,responsive-design,less
In bootstrap 3.0, assuming you are stuck with a 12 column grid, and you have a 3 column sidebar (col-md-3) and a 9 column main content area (col-md-9) but your sidebar content fills roughly 2 and a half columns of the sidebar width, and you are left with about a...

Nested LESS statements when dealing with the :before and :after sudo classes

css,class,less
I have the following LESS statement that tries to put a colored background on the :after sudo class: .hexagon:after { content: ""; position: absolute; bottom: -50px; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; &.red-light { border-top: 50px solid @brand-red-light; } &.red { border-top:...

Will performance improve/decrease if I directly refer LESS in html?

asp.net-mvc,performance,less
I'm using LESS CSS and Dot Less in my ASP.NET MVC project. I'm directly referring LESS using bundles bundles.Add(new LessBundle("~/styles/templates").Include("~/Content/Stylesheets/Templates.less")); But this link saying if we use less.js in the html it will degrade the user performance. But i'm not using less.js in my project. I've the following questions. Shall...

Laravel 5, Bootstrap, and Less

twitter-bootstrap,laravel,less,laravel-5
I'm just getting started with Laravel 5, and I followed this guide to install Bootstrap. It's my first time with Laravel, and I'm not familiar with responsive theming and related technologies. I then went to Startbootstrap to try out one of the templates in the Laravel framework. I created a...

BundleTransformer: CSS not bundled through @import directive

css,asp.net-mvc,less,bundle
We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files. This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the @import CSS at-rule. Sample in our root LESS file: /*...

LESS variable self concatenation

javascript,css,less
This .a { @a: 1; @b: 2; @concat: @a; @concat: ~"@{concat}@{b}"; margin: @concat; } gives an error. Syntax error: too much recursion However, this .a { @a: 1; @b: 2; @concat: e(`(function (a, b) { var concat = "" + a; concat += b; return concat; })(@{a}, @{b})`); margin: @concat;...

How to pass a LESS variable into a class name

css,less
I have a LESS variable: @columns: 12 I would like to pass this variable into a CSS class name ideally as: .one-{@columns}-inner {} Is it possible?...

Concatenate mixins call with “comma merging”

less,mixins,less-mixins
I'm investigating flexibility of comma merging in LESS, and here is a use case that currently seems to not have a solution. .foo class has 2 inner-shadows concatenated with + sign, provided by language. I tried to create a mixin that could recreate inner shadow (here without vendor prefixes for...

Less CSS Extend and media queries

css,less
I have a few Less utilities that I've used as extends - here's a typical scenario. .clearfix { &:before, &:after { content:""; display:table; } &:after { clear:both; } } However, I now find myself using media queries and the extend doesn't, well, extend, to all these scenarios. What I would...

With Grunt, how can I compile all *.less files, if I have global mixins and constants?

gruntjs,less,grunt-contrib-less
I want to organize my HTML, JS, and LESS by module. I'm already using Grunt to compile *.js and *.html from my source folders. So I configured grunt as follows: grunt.initConfig({ less: { ALL: { files: { 'compiled.css': '**/*.less' } } } } But this runs into a major problem:...

LessJs file not being processed in ASP.NET

asp.net-mvc,less
I'm experiencing a peculiar issue and I'm having trouble diagnosing it. I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as...

Using rulesets in LESS for media queries

less,media-queries
When using Sass I would do something global like this (which I got from CSS-tricks btw) // Variables for MQ's $mq-mobile-portrait : 320px !default; $mq-mobile-landscape : 480px !default; $mq-tablet-portrait : 768px !default; $mq-tablet-landscape : 1024px !default; $mq-desktop : 1382px !default; Then I would create mixins for the media queries like...

Extending nested selectors in LESS

less
I have the follwing HTML (basically) table tr td .c1 .c2 .c3 td tr ... more rows... table I would like to write LESS for the CSS that applys to the c1, c2, c3 on tr:hover. When you roll over the row the button inside the row have different properties....

less.modifyVars not working in Asp.Net MVC

c#,asp.net-mvc,asp.net-mvc-5,less,dotless
I have read this tutorial for working with Less in Asp.Net MVC5. To integrate LESS in ASP.NET MVC, I download and install the dotless NuGet package. And then added this bundle: var lessBundle = new Bundle("~/Less").Include("~/Content/Less/*.less"); lessBundle.Transforms.Add(new LessTransform()); lessBundle.Transforms.Add(new CssMinify()); bundles.Add(lessBundle); Here is the LessTransform: public class LessTransform : IBundleTransform...

How to throw an error in the LESS compiler

css,compiler-errors,less,throw,less-mixins
Question Is there any way to (programmatically) throw an error in the LESS compiler? Why? I have been fiddling around with mixin guards today, because I wanted to generate my CSS margin based upon element size and element count. I thought it would be cool to directly throw an error...

FontAwesome - Failed to decode downloaded font

css,fonts,less,font-awesome
I found allready this: http://stackoverflow.com/search?q=Failed+to+decode+downloaded+font But the Answers dont help to fix my problem =/ I got on my page this errors in console: Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff2 index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font:...

Less beautifier - format code

sorting,format,less
Is there is code beautifier for less such as http://www.lonniebest.com/formatcss/ for css? I need sort properties in less code by alphabet.

Laravel elixir - more specific error messages from gulp

less,gulp,laravel-elixir
I'm receiving the following error when trying to compile the less files for a theme that I purchased that was packaged with less files. Here's the output I'm seeing: $ gulp [22:53:49] Using gulpfile ~/path/to/gulpfile.js [22:53:49] Starting 'default'... [22:53:49] Starting 'less'... [22:53:49] Running Less: resources/assets/less/style.less [22:53:49] Finished 'default' after 524...

Less code for '+' css selector

css3,less
I was working with custom radio buttons and checkboxes, the css is vast so I want to convert it to less way of organizing but how can I convert this statement to less input[type='checkbox']:checked + .mycheck-overlay:before{ /*some css*/ } any help would be greatfull.......

Import LESS file only for one page

css,less
I have main all.less file, where I'm including all other less files e.g. @import "scaffolding.less"; @import "type.less"; @import "code.less"; @import "grid.less"; @import "homepage.less"; So my question is. Is it possible to get"homepage.less" only in homepage (importing it in all.less). Please Note that I don't want to attach it directly in...

Change Bootstrap gutter

html,css,twitter-bootstrap,less
I'm using Bootstrap v3.3.4, and I'm quite new at it. Is there any easy way to change Bootstrap gutter without recompiling it from its less files or using the website editor or any-other way that has something to do with modifying bootstrap.css? What I'm trying to do is to get...

How do I dynamically change less variables in Meteor?

meteor,less
I have the Less package loaded in my Meteor application and it is working fine. Now I need to allow the users of my app. to override my less variables. I have looked at : less.modifyVars({ '@canvas': '#5B83AD' }); but my app. is saying that 'less is not defined'. Can...

LESS selector for element and child?

less
With LESS how can I apply styles to both a selector and the selector within it? My demo I need to apply opacity and z-index to the class a, and to label that come directly after it. .a { color: red; opacity: 0.9; z-index: 2; & + label { color:...

Brackets: Custom Theme

json,github,less,adobe-brackets
I am trying to make a custom Brackets Theme. After I created a basic package.json file I went into extension manager to apply the theme so when editing the 'theme.less' file it would apply the fixes right away. Well my theme does not show up and I do have a...

Concatenate a variable and a string to reference another variable in LESS

less
I have a large list of variables which denote colours. For example, @Yellow-100 is a pale shade of yellow and @Purple-900 is a dark shade of purple. I have a @Page-Background variable which currently points directly to @Yellow-100, along with several other variables which point to various other shades of...

Specify an attribute value using the parent selector in LESS/SCSS?

sass,css-selectors,less
Is is possible to use the parent selector in LESS/SCSS 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...

Bootstrap Input Groups

javascript,html5,twitter-bootstrap,less,searchbar
I am slightly new to web development and I am trying to teach myself. I am trying to make a searchbar with a dropdown, so far I have made it but I have a problem with the last button, it will be used as the search button. It doesnt fix...

How do you write a LESS rule to be used by a number of classes?

css,less,less-mixins
Say we need the a few different classes to use following: color:#ccf; background-color:#fcc; font-size:0.7em; How do we set this up in LESS? These classes can NOT be used with each other so setting them up in a comma separated list (.note, .product, .restricted{ } ) is not a solution. We...

Rails less url path change

ruby-on-rails,ruby,url,path,less
Developing a Rails application with the less-rails gem I found something unusual : // app/assets/common/css/desktop/typo.less @font-face{ font-family:'SomeFont'; src:url("fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot?#iefix"); // ... } The requested font is app/assets/common/css/fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot This font is compiled with less and the results is : @font-face { font-family: 'SomeFont'; src: url("desktop/fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot?#iefix"); //... } Do you know why is...

LESS CSS - Mixin Arguments and Nth-Child - without looping

css,css-selectors,arguments,less,less-mixins
I am trying to write a less argument that will associate with the id #p0x1. I would like to be able to write an argument like @ytrans = translateY(@argument * 2) then provide that argument value for each ID. #p0x1(@argument:3){@ytrans} However, I am unable to do this with the nth-child...

How to merge parent and child style properties using LESS

less
I have this less code, this is working just fine. I just want to save some spaces when the less cli compiles it. .secondary-content { background: #ffcc80; color: white !important; label, i { background: #ffcc80; color: white !important; } } When I run less from the command prompt, the output...

Inheritance with variables overriding

less
I have defined a class .class which uses a variable @var: @var: 'value'; .class { property: @var; // and much more stuff [...] } And now I want to inherit from .class and change the value of @var in the same time like this: .another-class { @var: 'another-value'; .class; }...

“Additive” property values with LESS mixin

less
I'm looking for a feature that may or may not be available in LESS. I have a mixin that adds a "glow" with box-shadow, which I use on various elements - buttons, inputs etc. .glow() { box-shadow: 0 0 5px skyBlue; } What I'm looking for is a way to...

Inject css content from absolute external url using LESS

css,less
I need to include css from external recourse into my result css. I use LESS preprocessor. Is there the way to do this? For example, .wrapper { @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css'; } But that's not working for me. I get the same css: .wrapper { @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css'; } I want it to...

Font-awesome: how does it use class names to affect its content? [closed]

html,css,less,font-awesome
I'm trying to build a program that can utilize a classname for its data (i.e. if class="hero-banner-80" I could use the 80 as its width) and I was wondering how font-awesome does it? It uses its class-name to decide which char to place inside its element, and reading the src...

Bootstraps responsive-utilities.less as single Less file?

css,css3,less,bootstrap
I want to use the visible / hide system from bootstrap without including the full framework... I try to include just the responsive-utilities.less but then i get errors from lessphp... Anyone know maybe a site where i can get this visible system seperate as stand alone less file?...

Horizontal line with fade out effect

css,design,less
I'm trying to replace bootstrap <hr /> with a gradient looking line like this one. So far I've tried used this mixin: .horizontal-gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor);...

CSS Class with Argument from HTML in Less\Sass\JQuery? [closed]

jquery,css,sass,less
I have got something like that: <div class='myclass'> <span class='myclass-value-1' value='1'>1%</span> <span class='myclass-value-2' value='2'>2%</span> ... <span class='myclass-value-99' value='99'>99%</span> <span class='myclass-value-100' value='100'>100%</span> </div> I want to create 100 different styles (e.g. different shade of color, or different width - which can be calculable by value from HTML Tag) for every element...

node.js less removes background property when there are two using variables

css,node.js,less
I have a problem with less: @frames_color: #faeacd; @menu_color_hex: #faeacd; @menu_color_rgba: rgba(250, 234 ,205 , 255); with less: .topmenu { a { background-color: @menu_color_hex; background-color: @menu_color_rgba; } } results in css: #user_field .topmenu a { background-color: #faeacd; } AND .topmenu { a { background-color: green; background-color: @menu_color_hex; background-color: red; background-color:...

Can I set a style conditional on window size?

javascript,html,css,iframe,less
I've set a style for an iframe that is a youtube video: iframe { width: 450px !important; height: 253px !important; } But if the window is resized to small size, then the left margin disappears and there is room for the original size of the iframe. Is it possible to...

Cannot install less using npm in Ubuntu within VM

less,npm,vagrant,virtual-machine,ubuntu-server
I am having this error in installing less. I use this code npm install -g less but it's showing this kind of error: > [email protected]:/$ sudo npm install -g less > npm http GET http://registry.npmjs.org/less npm http 304 > http://registry.npmjs.org/less npm http GET > http://registry.npmjs.org/mime npm http GET > http://registry.npmjs.org/mkdirp...

Nest pseudo class like hover/focus into a hyperlink with LESS

css3,less
I use LESS. How can I say that the hover/focus belongs to the first > a can I somehow put the hover/focus inside the > a? > ul > li > a { color: #fff; text-decoration: none; } > a:hover, > a:focus { // login, register background-color: @navbar-background-color; } ...

Development Workflow - Bootstrap (Less), Bower and Grunt

twitter-bootstrap,gruntjs,less,workflow,bower
I am trying to step up my game as far as my folder structure and workflow is considered. I have recently discovered that front end package management and automation of tasks are key to improve speed, decreasing dev time, decrease file size and increase profit. My issue is I am...

CSS / Less / Sass - Match every previous siblings when :hover

html,css,hover,less
In this code: <div id="Container"> <span class='first'>First</span> <span class='second'>Second</span> <span class='third'>Third</span> </div> I want to change color, when :hover. IF (.first:hover) THEN .first { color: red; } IF (.second:hover) THEN .first, .second { color: red; } IF (.third:hover) THEN .first, .second, .third { color: red; } Is this possible without...

LESS body height calculation

css,css3,less
I am using 100vh for my body content, but how can I make it so it takes away the height of my navbar? Like 100vh - 50px Is it possible?...

LESS: Permission denied error

less,web-essentials
I work in an environment where we have very limited permissions on our computer. I installed Web Essentials 2012 and created a blank .less file. The preview window is showing /* Compile Error. See error list for details */ I pulled up the error list and it's showing LESS: Permission...

What is wrong with my lessc?

django,python-2.7,less
I have a django project that I run with ubuntu 14 (as guest os in virtualbox). Now when I start the django server then I get an error message about lessc that I don't fully understand. Can you help me with it? Environment: Request Method: GET Request URL: http://localdev.kth.se:8000/social/ Django...

LESS if statement for build targets

css,less
I'm looking for functionality in LESS to be able to change one variable and have it change a bunch of different variables so that I can change my compile target and have it easily change a ton of variables. Here's an example of what I'm looking for. The only problem...

How can I use LESS in jsfiddle?

javascript,css,less
I'm new with jsfiddle, and I trying to use LESS but I did not see it in the language options, how can I make it work with LESS. I try to link less.min.js in external resources but neither worked Please help me. EDIT1: I'm proving some features of less and...

Running Autoprefixer with BundleTransformer / LESS in Debug mode

asp.net,less,autoprefixer,bundletransformer
So I currently use BundleTransformer, LESS and I'm trying to add the Autoprefixer post processor. This plugin automatically takes css like transform: scale(1.5) and converts it to -webkit-transform and -moz-transform. If I am in release mode or have BundleTable.EnableOptimizations=true then everything works just fine and the prefixes are added as...

Reuse less variable passed as an argument for parametric mixins

css,variables,less
Is it possible to use a less variable as an argument for parametric mixins? Here's an example: @red: #ff0000; @blue: #0000ff; .body-theme(@color){ background: @color; p { color: @color; } } body{ &.red{ .body-theme(@red); } &.blue{ .body-theme(@blue); } } This example isn't really clever but it should illustrate that I want...

How to set resolve path for image-width?

css,gruntjs,less,grunt-contrib-less
I have a LESS file that refers to an absolute location (it needs to be absolute or grunt-usemin won't parse it properly), but this causes the less compiler to not be able to resolve the image when processing image-width(). /client/app/app.less // logo is located at /client/assets/images/ but "/client" is the...

Compile Less with Node, with dynamic variables

css,node.js,less
I'm building a SaaS project in NodeJS and I need to build CSS on the fly using LESS. I want to be able to change some of the less variables each time I build the css. The variables come from the database and can be different for each user (thus...

How to set div to percentage of viewport?

jquery,angularjs,less
I have to set a <div class="row" ng-repeat="..">..</div> to a percentage of the viewport minus a set amount of pixels (wich propabally won't be a problem because of jQuery or LESS). The big problem is the ng-repeat. Is there a way in either jQuery, Angular or LESS to do this?...

Convert from pixels to em

css,less,less-mixins,unit-conversion
I watched a really good tutorial about bombproof webdesign from Tutsplus the other day. The instructor had an awesome function that was made in Stylus. $base_font_size = 16 $base_font_size_ems = unit($base_font_size / 16, em) $px = unit(1 / $base_font_size, rem) $px_em = unit(1 / $base_font_size, em) To call this cool...

How can I combine classes on a button using .less?

css,less
I have this .less file for buttons: button { background: @button-background; color: @text; &.primary { background-image: linear-gradient(#79d858, #569e3d); border-color: #4a993e; color: white; } &.primary:hover { background-image: linear-gradient(#89e868, #66ae4d); border-color: #4a993e; color: white; } &.primary:active, &.primary:focus { background-image: linear-gradient(#99f878, #76be5d); border-color: #4a993e; color: white; } } Can someone give me advice...

Less - How to replace integer with a string?

less
I have a LESS variable: @columns: 12; I create a dynamic class name out of it: [email protected]{columns} {} // returns .one-12 {} How do I replace the 12 with a string "twelfth" Pseudo Code [email protected]{replace(columns, "twelfth")} {} The result will be .one-twelfth {} Advice will be appreciated! ...

Redirect content to a file in ascii encoding

windows,powershell,cmd,less,windows-8.1
We're running lessc from the PowerShell like this: lessc -x style.less > style.min.css Unfortunately, style.min.css file is in unicode whereas we would like it to be in ascii. How can we force that encoding when writing the result to a file from PowerShell? Interestingly, when we run the same command...

Child class with same name

css,html5,less,media-queries
I'm not too sure if this is a problem or whether it can even be done. I'm not even sure on what I should google to find out whether it can be done/how it can be done. What I want to do is have a child class with the same...

How to write border-radius in less without dividing result

css,css3,less
How can I write this css into less: border-radius: 10px / 20px; normally css interpret something like : border-bottom-left-radius: 10px 20px; border-bottom-right-radius: 10px 20px; border-top-left-radius: 10px 20px; border-top-right-radius: 10px 20px; but less compilers are dividing 10px/20px = 0.5px ...

How to update variables with input values in .less file dynamically using AngularJS

css,angularjs,angularjs-scope,less
I realize a form of this question has been asked before (see 28208451), however, I need to get the input value and then set it as the new value so that other input fields can access it. Here is a link to my plunk. I can enter a new hue...

Using JavaScript to change Less files

javascript,css,less
I want to change a property of a Less file with JavaScript. This is my code document.getElementsByClassName('content-main--inner').style.border = '1px solid yellow!important'; I've tried it with !important and without it. But that doesn't work, the property doesn't change. I think the problem is here: ('content-main--inner') Is it possible to manipulate Less...

Defining a:focus selector

less
I have the below HTML structure. <html> <a class="customcssstyle" href="#'>Link</a> </html> Now I need to have a style, such that on focus on the link , it should appear in red. For that in normal CSS, we write it as: a.customcssstyle:focus { color:red; } May I know how we can...

ASP.NET MVC how to change less variables with javascript?

c#,css,asp.net-mvc,less
In my application I must add feature for the user to chnage UI colors. For this purpose I have created .less file and set some global variables to their default value. What is the best practice for creating theme in Asp.net MVC?...

lesscss - which is the best way

less
article { // some css code //... // end css code h1 { transition: all 0.3s; } } body.active { article { h1 { transform: translate(0, 10px); } } } I try to write better body { article { // some css code //... // end css code h1 {...

LESS: concatenate multiple background rules

less,background-image,mixins,less-mixins
I have a mixin that creates a gradient with vendors' prefixes, and I would like to add this background to a DIV in addition to another background-image. .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background:@start-color; background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image+:...

Less bootstrap theme

twitter-bootstrap,twitter-bootstrap-3,less
We use bootstrap in a project. We bought a custom made theme for bootstrap that created a nice custom style around it and added a lot of useful styles we used in our project. This theme uses LESS. Now each of our clients wanted a custom color scheme for their...

(AngularJS) Only one less file for entire Website

css,angularjs,styles,less
I am a beginner with AngularJS and I have a little problem, I installed grunt-contrib-less to support less files instead css but now I have to declare all less styles that will be compiled into only one css file. But my problem is normally when I'm using less, I write...

Browser sync reloading but CSS not changing with LESS and Gulp

less,gulp,browser-sync
I'm trying to figure out how to use browser sync in conjunction with gulp and less to get the browser to automatically update upon changes in less files after compilation. What I've got right now is causing what appears to be a reload in the system with a message "Connected...

How to customize the offset options for grid in Bootstrap using Less [closed]

css,twitter-bootstrap,less
I want to reduce the the width by which col-md-offset-1 of bootstrap assigns margin-left at a certain place. I would prefer this to be done by using LESS.

Is it possible to reference a parent selector in a LESS variable?

css,less
I'm trying to use the ampersand to bring parent selectors into a variable containing pseudo-class selectors: .my-selector, .my-other-selector { @{pseudo-states} { // rules } } The following attempts all produced the literal variable content in the generated css: @pseudo-states: &:hover, &:focus, &:active, &.active; @pseudo-states: ~"&:hover, &:focus, &:active, &.active"; @pseudo-states: ~"\&:hover,...

Nested class not applied in LESS “function”

html,css,less
Consider this LESS file... @media screen and (max-width: 1200px){ .container(100px); } @media screen and (max-width: 200px){ .container(40px); } .container(@size){ margin: 50px; div.left{ background-color: blue; font-size: @size; } div.right{ background-color: red; font-size: @size; } } And this HTML file: <div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div> I...