Учебники

LESS — CSS Guards

Сентябрь 5, 2018

Защитные элементы используются для сопоставления простых значений или ряда аргументов в выражениях. Применяется к селекторам CSS. Это синтаксис объявления mixin и его немедленного вызова. Чтобы успешно вывести оператор типа if ; присоединитесь к этому с помощью функции & , которая позволяет группировать несколько охранников.

пример

В следующем примере демонстрируется использование css guard в файле LESS —

css_guard.htm 

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

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

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

style.less 

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

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

lessc style.less style.css

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

style.css 

.style {
   background-color: blue;
   color: white;
}

Выход

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

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

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

36
Share: