CSS3 Less（预处理器）-公共类

Question

I'm trying to define generic classes for my website in a file called "generic.less" and it's correctly linked in the head in my html file. This "less" file contains:

/****GENERIC CLASSES****/
/**********************/
.border-box{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.unselectable{-moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
.grayscale{-webkit-filter:grayscale(100%); filter:grayscale(100%);}
.fullcenter{top:0; bottom:0; left:0; right:0; margin:auto; position:absolute;}

And then I'm trying to inherit these classes from different "less" files but It won't work. I'm guessing that "less" preprocessor takes the classes as private classes defined in the same "less" file (sorry for my Java interpretation).

Is there any way I can define those classes so I can inherit them from other "less" file? That way I don't have to duplicate the classes for each new class file.

HTML head looks like this:

<!-- STYLE -->
<link rel="stylesheet" type="text/less" href="<?echo $path_styles;?>generic.less"> <!-- Generic classes -->
<link rel="stylesheet" type="text/less" href="<?echo $path_styles;?>index.less">
<link rel="stylesheet" type="text/less" href="<?echo $path_styles;?>bio.less">
<link rel="stylesheet" type="text/less" href="<?echo $path_styles;?>discografia.less">

Answer 1

A LESS file doesn't know about other LESS files when compiled.
In each of your LESS files (except generic.less itself, of course), you can import your generic file with @import . As it'd output many times the CSS of this file, you should add the option (reference) : file is imported so variables and mixins are known to the rest of the file import-ing it but it isn't output.

@import (reference) "generic.less"

Sidenote: are you using less.js , even in development? Server-side tools like gulp-less or Prepros (v4 was free software) are much convenient and fast imho.

Answer 2

As you see from the LESS , it's very simple to inherit classes, to use them on a separate file you just need to @import them to the main LESS file (to the beginning) http://lesscss.org/features/#import-directives-feature

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

We can also use functions the same way..

.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}
.opacity(@opacity) {
    opacity: @opacity / 100;
    filter: ~"alpha(opacity=@{opacity})";
}

a {
    .transition(all 0.4s);
    &:hover {
        .opacity(70);
    }
}