Учебники

LESS — Передача наборов правил в Mixins

Сентябрь 5, 2018

Отдельный набор правил содержит наборы правил, такие как свойства, вложенные наборы правил, объявление переменных, миксины и т. Д. Он хранится в переменной и включается в другую структуру; все свойства набора правил копируются в эту структуру.

пример

В следующем примере показано, как передать набор правил в mixin в файле LESS —

passing_ruleset.htm 

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

Затем создайте файл style.less .

style.less 

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

Вы можете скомпилировать файл style.less в style.css , используя следующую команду — 

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css 

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

  • Сохраните приведенный выше HTML-код в файлеpass_ruleset.htm .

  • Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файлеpass_ruleset.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Меньше прохождения правил для смешивания

Обзорный

Все переменные и миксины в отдельном наборе правил доступны везде, где вызывается или определяется набор правил. В противном случае, как вызывающая сторона, так и области определения доступны по умолчанию. Область объявления имеет приоритет, если обе области содержат один и тот же миксин или переменную. Отдельное тело набора правил определяется в области объявления. Он не меняет свою область действия после копирования отдельного набора правил из одной переменной в другую.

В следующей таблице перечислены все типы областей действия.

Переменные и миксины определяются внутри отдельного набора правил.

Просто давая ссылки, набор правил не имеет доступа к каким-либо новым областям действия.

Отсоединенный набор правил может получить доступ к области, импортировавшись в нее.

45
Share: