CSS3 Меньше (препроцессор) - Открытые классы

Я пытаюсь определить общие классы для моего сайта в файле под названием generic.less и правильно связан в head в моем html-файле. Этот «менее» файл содержит:CSS3 Меньше (препроцессор) - Открытые классы

/****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;}

И тогда я пытаюсь унаследовать эти классы из разных «меньше» файлов, но это не будет работать. Я предполагаю, что препроцессор «меньше» берет классы как частные классы, определенные в одном и том же «меньшем» файле (извините за мою интерпретацию Java).

Есть ли способ определить эти классы, чтобы я мог наследовать их из другого «менее» файла? Таким образом, мне не нужно дублировать классы для каждого нового файла класса.

HTML голова выглядит следующим образом:

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

источник

2016-02-04 ProtectedVoid

Как вы пытаетесь * унаследуют *? Вы «импортировали» файл generic.less в другие .less-файлы? – Harry

@Harry Я импортировал, включая ссылку селектора классов, как свойство внутри другого класса. Я просто пытался импортировать общий файл, и он работал, это было так просто. Я думал, что достаточно просто объявить классы до их наследования, но логично, что мне нужно импортировать файл, потому что мы говорим о «предварительной обработке». Благодаря! – ProtectedVoid

МЕНЕЕ файл не знает о других LESS файлов при компиляции.
В каждом из ваших файлов LESS (кроме generic.less), вы можете import ваш общий файл с @import. Поскольку он выводит много раз CSS этого файла, вы должны добавить option (reference): файл импортируется, поэтому переменные и миксины известны остальной части файла, импортирующего его, но он не выводится.

@import (reference) "generic.less"

Sidenote: вы используете less.js, даже в разработке? Серверные инструменты, такие как gulp-less или Prepros (v4 - бесплатное программное обеспечение), очень удобны и быстрые imho.

источник

2016-02-04 09:41:52 FelipeAls

Спасибо! Получил это сейчас! Что касается sidenote, я использую «меньше препроцессора», связывающего javascript-файл «less.js», потому что я только начал с препроцессоров CSS, и я нахожу этот метод более простым. Итак, вы рекомендуете мне установить его на сервер? Благодарю. – ProtectedVoid

Как видно из LESS, это очень просто, чтобы наследовать классы, чтобы использовать их в отдельном файле нужно просто @import их к главному МЕНЬШЕ файла (к началу) http://lesscss.org/features/#import-directives-feature

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

И мы хотим использовать эти свойства внутри других наборов правил. Ну, мы просто должны отказаться от имени класса, в котором мы хотим, чтобы свойства, например, так:

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

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

Мы также можем использовать функции точно так же ..

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

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

источник

2016-02-04 09:48:31 miguelmpn

CSS3 Меньше (препроцессор) - Открытые классы

ответ

Смежные вопросы