Less.js Разное Функция default()

Опубликовано: 24 Января, 2023

Меньше.js — это простой препроцессор CSS, облегчающий создание управляемых, настраиваемых и многократно используемых таблиц стилей для веб-сайтов. Поскольку CSS является динамическим языком таблиц стилей, он предпочтительнее. LESS адаптируется, поэтому он работает с широким спектром браузеров. Веб-браузеры могут использовать только CSS, которые были созданы и обработаны с помощью препроцессора CSS, языка программирования. В дополнение к таким возможностям, как переменные, функции, примеси и операции, которые помогают создавать динамический CSS при сохранении обратной совместимости, это расширение языка CSS.

В этой статье мы собираемся обсудить функцию Misc default() , которую можно использовать только внутри защитных условий. Он возвращает значение « истина» , если ни один другой миксин не соответствует условиям, и «ложь», если какие-либо другие совпадают. По умолчанию он имеет значение «истина» и используется для задания условия с истинным значением в качестве альтернативы. Когда функция по умолчанию используется вне условия защиты примеси, она обрабатывается как стандартный CSS.

Синтаксис:

default()

Пожалуйста, обратитесь к разделу Компиляция кода LESS в код CSS. статью с подробным описанием процедуры установки.

Пример 1: Код ниже демонстрирует использование и реализацию функции Misc default() и параметрического миксина.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css" />
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Less.js Misc default() Function</h3>
    <div class="c1">
        <p>
            <strong>
                .mixin(@p, @color) when (default())
                <br>.mixin(@param, @light);
            </strong>
        </p>
    </div>
</body>
  
</html>

стиль.лесс:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@param: italic;
  
.mixin(@p, @color) when (default()) {
    font-style: @p;
    color: @color;
}
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: 400px;
    height: 200px;
    margin: 1rem;
    background-color: @dark;
}
  
p {
    padding: 60px 0px 0px 80px;
    .mixin(@param, @light);
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc style.less style.css

style.css: скомпилированный файл CSS выглядит следующим образом:

CSS

body {
    background-color: #eeeeee;
}
  
.c1 {
    width: 400px;
    height: 200px;
    margin: 1rem;
    background-color: hsl(25, 71%, 8%);
}
  
p {
    padding: 60px 0px 0px 80px;
    font-style: italic;
    color: #fdff92;
}

Выход:

Пример 2: приведенный ниже код демонстрирует использование и реализацию функции Misc default() и использование нескольких этапов default() .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css" />
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Less.js Misc default() Function</h3>
    <div class="box">
        <div class="c1">
            <p class="p1">
                <strong>
                    .mixin(@color) when (iscolor(@color))
                    <br> and (default())
                </strong>
            </p>
        </div>
        <div class="c2">
            <p class="p2">
                <strong>
                    .mixin(@pix) when (ispixel(@pix))
                    <br>and (default())
                </strong>
            </p>
        </div>
    </div>
</body>
  
</html>

стиль.лесс:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@w: 300px;
  
.mixin(@color) when (iscolor(@color)) and (default()) {
    color: @dark;
}
  
.mixin(@pix) when (ispixel(@pix)) and (default()) {
    color: @light;
}
  
body {
    background-color: @body-bg-color;
}
  
.box {
    display: flex;
}
  
.c1 {
    width: @w;
    height: 200px;
    margin: 1rem;
    background-color: @light;
}
  
.c2 {
    width: @w;
    height: 200px;
    margin: 1rem;
    background-color: @dark;
}
  
.p1 {
    padding: 60px 0px 0px 80px;
    .mixin(@light);
}
  
.p2 {
    padding: 60px 0px 0px 80px;
    .mixin(@w);
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc style.less style.css

style.css: скомпилированный файл CSS выглядит следующим образом:

CSS

body {
    background-color: #eeeeee;
}
  
.box {
    display: flex;
}
  
.c1 {
    width: 300px;
    height: 200px;
    margin: 1rem;
    background-color: #fdff92;
}
  
.c2 {
    width: 300px;
    height: 200px;
    margin: 1rem;
    background-color: hsl(25, 71%, 8%);
}
  
.p1 {
    padding: 60px 0px 0px 80px;
    color: hsl(25, 71%, 8%);
}
  
.p2 {
    padding: 60px 0px 0px 80px;
    color: #fdff92;
}

Выход:

Ссылка: https://lesscss.org/functions/#misc-functions-default

JavaScript Picked

Less.js Разное Функция default()

HTML

CSS

CSS

HTML

CSS

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ