Функция Less.js String e()

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

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

В этой статье мы собираемся обсудить функцию String e() , функция которой состоит в том, чтобы возвращать экранированную версию содержимого строки без кавычек.

Синтаксис:

e(value)

Параметры:

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

Тип возвращаемого значения: этот метод возвращает строковое значение.

Пример 1: приведенный ниже код демонстрирует использование и реализацию функции String e() , а также использование функций if и булевых логических функций.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js String e() Function</b></h3>
    <div class="c1">  
        <p>width: e("65%")<br>width: 65%</p> 
    </div>
</body>
  
</html>

стиль.лесс:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@str: "65%";
@eStr: e(@str);
body {
    background-color: @body-bg-color;
}
.c1 {
    width: @eStr;
    height: 150px;
    margin: 1rem;
    background-color: @light;
    padding: 40px 0px 0px 55px;
}
p {
    color: @dark;
}

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

lessc styles.less styles.css

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

style.css: был скомпилирован вывод CSS из приведенного выше файла Less.

CSS

body {
    background-color: #eeeeee;
}
.c1 {
    width: 65%;
    height: 150px;
    margin: 1rem;
    background-color: #fdff92;
    padding: 40px 0px 0px 55px;
}
p {
    color: hsl(25, 71%, 8%);
}

Выход:

Пример 2. Код ниже демонстрирует использование и реализацию функции String e(), а также использование функций типа isstring и ispercentage .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js String e() Function</b></h3>
    <div class="c1">  
        <p>boolean(isstring(@eStr))<br>TRUE</p> 
        <p>boolean(ispercentage(@eStr))<br>FALSE</p> 
    </div>
</body>
  
</html>

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@str: "55%";
@eStr: e(@str);
@cond1: boolean(isstring(@eStr));
@cond2: boolean(ispercentage(@eStr));
body {
    background-color: @body-bg-color;
}
.c1 {
    width: @eStr;
    height: 150px;
    margin: 1rem;
    background-color: if(@cond1, @dark, @light);
    padding: 40px 0px 0px 55px;
}
p {
    color: if(@cond2, @dark, @light);
}

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

lessc styles.less styles.css

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

style.css: был скомпилирован вывод CSS из приведенного выше файла Less.

CSS

body {
    background-color: #eeeeee;
}
.c1 {
    width: 55%;
    height: 150px;
    margin: 1rem;
    background-color: hsl(25, 71%, 8%);
    padding: 40px 0px 0px 55px;
}
p {
    color: #fdff92;
}

Выход:

Ссылка: https://lesscss.org/functions/#string-functions-e

JavaScript Picked

Функция Less.js String e()

HTML

CSS

CSS

HTML

CSS

CSS

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