EzDevInfo.com

Understanding Bootstrap's clearfix class

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

1. Why not use display:block?
2. In addition, why does it also apply to the ::before pseudoclass?

Variable Name Error "is undefined" even though "variables.less" imported

I started using LESS today. But it's kinda weird. This code does not work. I get an error:

! Variable Name Error: @linkColor in a is undefined.

My bootstrap:

@import "variables.less";
@import "normalize.less";

variables.less:

@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

normalize.less:

a {
    color: @linkColor;
}
a:visited {
    color: @linkColor;
}
a:hover {
    color: @linkColorHover;
}

When I make an

@import "variables.less"

in the normalize.less file, everything works fine.

Thanks for your help :)

How do you create multiple box-shadow values in LESS CSS

Read This

There are several "correct" answers. Since this question gets a lot of traffic, I figured I should keep up with what (I think) the best answer is (based on the LESS documentation) as the LESS project matures, and change my accepted answer accordingly.

I'm using LESS and I haven't been able to find a fix for allowing multiple CSS3 box-shadows. I have the following mixin:

.box-shadow(@arguments) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

and I'm attempting this:

.box-shadow(
    inset 0 0 50px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.5);
);

This works in normal CSS3, but fails when running from a LESS file. I've read somewhere that the comma separating the 2 shadows is what causes the issue in the LESS parser.

Does anyone know how to make this work? The only workaround I can think of is creating an additional CSS file that contains my multiple box-shadow properties.

Correct way to create rounded corners in Twitter Bootstrap

I've just started with Twitter Bootstrap and here is one question.

I am creating custom <header> block, and I want it's bottom corners to be rounded.

Is there any "correct" way to do this by using predefined classes, or I have to specify it manually like:

border-radius: 10px;               // and all that cross-browser trumpery

For now, I'm using css styles. Maybe it will be better to use less for that issue?

Can Visual Studio 2013 generate CSS files from .less files?

Visual Studio 2013 is awesome, now with syntax highlight and autocomplete for .less files. But does it also generate the respective CSS files? Do I need to install other extensions for that?

Less/Sass debugging in Chrome Dev Tools/Firebug [closed]

How do you guys do maintenance on CSS built with Less/Sass?

One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?

Does LESS have an "extend" feature?

SASS has a feature called @extend which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins).

Does LESS have this feature as well?

How to namespace Twitter Bootstrap so styles don't conflict

I want to use Twitter Bootstrap, but only on specific elements, so I need to figure out a way to prefix all Twitter Bootstrap classes with my prefix, or use the less mixins. I'm not experienced with this yet so I don't quite understand how to do this. Here's an example of the HTML that I'm trying to style:

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

In this example, Twitter Bootstrap would normal style both h1s, but I want to be more selective about which areas I apply the Twitter Bootstrap styles.

LESS CSS nesting classes

I'm using LESS to improve my CSS and am trying to nest a class within a class. There's a fairly complicated hierarchy but for some reason my nesting doesn't work. I have this:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

I can't get the .g.posted to work. it just shows the .g bit. If i do this it's fine:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

I'd like to nest the .posted in .g though. Any ideas?

Is there a SASS.js? Something like LESS.js?

I have used LESS.js before. It's easy to use, something like

<link rel="stylesheet/less" rel='nofollow' href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>

I saw SASS.js. How can I use it in a similar way? Parsing a SASS file for use immediately in HTML. It seems like SASS.js is more for use with Node.js?

var sass = require('sass')
sass.render('... string of sass ...')
// => '... string of css ...'

sass.collect('... string of sass ...')
// => { selectors: [...], variables: { ... }, mixins: { ... }}

import .css file into .less file

Can you import .css files into .less files...?

I'm pretty familiar with less and use it for all my development. I regularly use a structure as follows:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

All imports are other .less files and all works as it should.

My current issue is this: I want to import a .css file into .less that references styles used in the .css file as follows:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

The .css file contains a class called .type but when I try to compile the .less file I get the error NameError: .type is undefined

Will the .less file not import .css files, only other .less ones...? Or am I referencing it wrong...?!

Less Aggressive Compilation with CSS3 calc

The Less compilers that I'm using (OrangeBits and dotless 1.3.0.5) are aggressively translating

body { width: calc(100% - 250px - 1.5em); }

into

body { width: calc(-151.5%); }

Which is obviously not desired. I'm wondering if there is a way to signal to the Less compiler to essentially ignore the attribute during compilation. I've searched through the Less documentation and both compilers' documentation and I could not find anything.

Does Less or a Less compiler support this?

If not, is there a CSS extender that does?

Going to a specific line number using Less in Unix

I have a file that has around million lines. So, I need to go to line number 320123 to check the data, how do I do that?

Disable LESS-CSS Overwriting calc()

Right Now I'm trying to do this in CSS3 in my LESS code:

width: calc(100% - 200px);

However, when LESS compiles it is outputting this:

width: calc(-100%);

Is there a way to tell LESS not to compile it in that manner and to output it normally?

Twitter Bootstrap Customization Best Practices [closed]

I'm working with Bootstrap 2.0.3 using LESS. I want to customize it extensively, but I want to avoid making changes to the source whenever possible as changes to the libraries are frequent. I am new to LESS so I don't know how its compilation entirely works. What are some best practices for working with LESS or LESS based frameworks?