FAQ Database Discussion Community


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

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

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

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

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

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

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

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

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

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; } ...

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

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

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

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

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

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

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

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: /*...

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);...

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

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

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

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

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+:...

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

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

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

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

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

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

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

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

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

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

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

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

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; }...

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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()...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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