Функция Less.js Misc color()

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

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

В этой статье мы собираемся обсудить функцию Misc color() , функция которой заключается в преобразовании строкового значения в объект цвета. Эта функция возвращает значение цветового объекта, и она может принимать только шестнадцатеричный код цвета, а не значения HSL или RGB.

Синтаксис:

color("string")

Параметры:

string : Это единственный обязательный параметр для этой функции. Этот параметр принимает строковое значение имени цвета, в основном шестнадцатеричный код цвета.

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

Пример 1: приведенный ниже код демонстрирует использование и реализацию функции Misc color() вместе с функциями if и boolean .

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 color() Function</h3>
    <div class="c1">
        <p>boolean(iscolor("#21ff7a"))
            <br>TRUE
        </p>
    </div>
</body>
  
</html>

стиль.лесс:

CSS

@body-bg-color: #eeeeee;
@str: "#21ff7a";
@color1: color(@str);
@color2: #381508;
@cond: boolean(iscolor(@color1));
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: 500px;
    height: 250px;
    background-color: if(@cond, @color1, @color2);
    margin: 1rem;
}
  
p {
    color: if(@cond, @color2, @color1);
    font-size: 1.5rem;
    padding: 5rem 0 0 4.5rem;
}

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

lessc style.less style.css

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

CSS

body {
    background-color: #eeeeee;
}
  
.c1 {
    width: 500px;
    height: 250px;
    background-color: #21ff7a;
    margin: 1rem;
}
  
p {
    color: #381508;
    font-size: 1.5rem;
    padding: 5rem 0 0 4.5rem;
}

Выход:

Пример 2: приведенный ниже код демонстрирует использование и реализацию функции Misc color() вместе с использованием функций насыщения цвета с функциями if и логическими функциями.

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 color() Function</h3>
    <div class="c1">
        <p>saturate(#80e619, 50%)
            <br>boolean(iscolor("#80ff00"))
            <br>TRUE
        </p>
    </div>
</body>
  
</html>

стиль.лесс:

CSS

@body-bg-color: #eeeeee;
@str: "#80e619";
@color1: color(@str);
@color2: #381508;
@color3: saturate(@color1, 50%);
@cond: boolean(iscolor(@color3));
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: 500px;
    height: 250px;
    background-color: if(@cond, @color3, @color2);
    margin: 1rem;
}
  
p {
    color: if(@cond, @color2, @color1);
    font-size: 1.5rem;
    padding: 5rem 0 0 4.5rem;
}

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

lessc style.less style.css

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

CSS

body {
    background-color: #eeeeee;
}
  
.c1 {
    width: 500px;
    height: 250px;
    background-color: #80ff00;
    margin: 1rem;
}
  
p {
    color: #381508;
    font-size: 1.5rem;
    padding: 5rem 0 0 4.5rem;
}

Выход:

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

JavaScript Picked

Функция Less.js Misc color()

HTML

CSS

CSS

HTML

CSS

CSS

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