zawijanie .less definicji css w przestrzeni nazw

Question

Chciałem użyć CSS twitter bootstrap tylko w określonym elemencie na mojej stronie internetowej.

Próbowałem zrobić to jak w poniższym kodzie. Ale po skompilowaniu tego do pliku css nic nie zostało wyprowadzone. Jeśli przeniosłem @import poza #my_div, otrzymałem wszystkie definicje css dla boostrap Twitter.

#my_div { 
    @import "../twitter_bootstrap/lib/bootstrap.less"; 
} 

W jaki sposób mogę nadać przestrzeni nazw plik less css?

Answer 1

Dokumentacja LESS zawiera dział o numerze namespaces.

Tak można zdefiniować lib w osobnym dokumencie:

#ns { 
    .twitter() { 
    // Instructions to be used later 
    // Nothing will appear in compiled CSS except if called later (because of parenthesis) 
    } 
} 

import tego pliku na początku pliku CSS być skompilowany i korzystać z tych wskazówek:

#my_div { 
    #ns > .twitter; 
} 

Answer 2

ten sposób Zrobiłem to. Odbywa się to w katalogu głównym folderu pobierania, który jest pobrany lub sklonowany z git.

## ./less/namespace.css (New file) 

#ns { 
    .twitter() { 
    @import "less/bootstrap.less"; 
    } 
} 

## ./style.less 

@import "less/namespace.less"; 

.namespace { 
    #ns > .twitter; 
} 

Następnie uruchom mniej style.less> style.css

Answer 3

nie używam less na miejscu na żywo, ani ja ręcznie robi kompilowania więc jest to rodzaj „zwykłej” wersji. Nie jest tak zautomatyzowany jak inne, ale może dotyczyć niektórych użytkowników.

1. Edycja bootstrap.css/bootstrap-responsive.css

   .tb { 
       // copy/paste the entire bootstrap.css 
   } 
   

2. rekompilacji z mniej lub użyć online mniej kompilator - http://winless.org/online-less-compiler

3. Edycja teraz-skompilowany plik i zmienić body {} deklaracje CSS tb {}.

4. Użyj nowego pliku CSS.

5. Umieść "bootstrapped" zawartość wewnątrz <div class='tb'></div>

Answer 4

Oto jak to zrobiłem, na podstawie majgis męska github widelcem powyżej:

bootstrap-ns.less:

@import "namespace.less" 
.bs { 
    #ns > .twitter; 
    } 

namespace.less:

#ns { 
    .twitter(){ 
    @import "bootstrap.less"; 
    } 
} 

Następnie odwołasz się do bootstrap-ns.less na swojej stronie html. Zostało to przetestowane za pomocą dotLESS.

Answer 5

jeśli masz kontrolę nad parametrami kompilacji, ustaw tylko strictImports na wartość false i pracuj zgodnie z przeznaczeniem, aby wszystko było w porządku. rozważyć spojrzenie na less-strictimports lub na to issue.