首页 > 其他分享 >Less语法详解：从零开始，轻松掌握Less

Less语法详解：从零开始，轻松掌握Less

时间：2024-11-04 10:46:54浏览次数：3  
标签：Less color header 从零开始 radius str border 详解

Less 是一种动态样式表语言，它扩展了 CSS 语言，增加了变量、混合（mixins）、函数等特性。Less 可以运行在 Node 或浏览器上，并且可以与各种构建工具无缝集成。本文将对less基础语法进行讲解。

一.安装与编译

安装 Less

在开始使用 Less 之前，需要先安装它。如果使用 Node.js，可以通过 npm 安装 Less。

npm install -g less

编写 Less 代码

Less 代码与 CSS 非常相似，但有一些额外的特性。先看一个简单的 Less 示例：

@primary-color: #333;

body {
  color: @primary-color;
}

#header {
  background-color: @primary-color;
}

编译 Less 代码

可以使用 Less 命令行工具：

lessc style.less style.css

编译 style.less 文件并生成 style.css 文件。

二.基本语法

1.变量

Less 允许定义变量，这些变量可以在整个样式表中重用，变量以 @ 符号开头，后面跟着变量名。

@primary-color: #333;

body {
  color: @primary-color;
}

#header {
  background-color: @primary-color;
}

（1）定义变量

@primary-color: #333; // 定义一个颜色变量
@base-font-size: 16px; // 定义一个字体大小变量
@padding: 10px; // 定义一个内边距变量

（2）在样式表中使用变量：

body {
  color: @primary-color; // 使用颜色变量
  font-size: @base-font-size; // 使用字体大小变量
}

#container {
  padding: @padding; // 使用内边距变量
}

（3）变量的作用域：

变量在定义它们的选择器内部有效，并且可以在嵌套的选择器中访问。如果在一个选择器中定义了一个变量，它将在这个选择器及其所有嵌套的选择器中可用。

#header {
  @link-color: #555; // 在 #header 选择器中定义变量
  a {
    color: @link-color; // 在嵌套的选择器中使用变量
  }
}

（4）变量的覆盖：

如果在一个选择器中定义了一个变量，然后在嵌套的选择器中又定义了同名的变量，嵌套选择器中的变量将覆盖外部选择器中的变量。

#header {
  @link-color: #555; // 在 #header 选择器中定义变量
  #logo {
    @link-color: #fff; // 在 #logo 选择器中定义同名的变量
    a {
      color: @link-color; // 使用 #logo 选择器中定义的变量
    }
  }
}

（5）变量的延迟解析：

Less 的变量是延迟解析的，也就是编译器会在编译过程中查找所有变量的定义，并将它们替换到相应的位置。因此，即使我们在使用变量之前定义它，编译后的 CSS 代码仍然是正确的。

// 在这里使用变量，但还没有定义
#header {
  a {
    color: @link-color; // 使用变量
  }
}

// 定义变量
@link-color: #555;

// 变量在编译时被替换

2.混合（Mixins）

混合是 Less 中一个非常有用的功能，它允许将一组 CSS 属性重用到一个或多个选择器中。

.border {
  border: 1px solid #ccc;
}

#header {
  .border;
}

#footer {
  .border;
}

（1）定义混合

混合通过 .mixin-name 的形式定义，其中 mixin-name 是混合的名称。混合内部可以包含任何 CSS 规则。

.bordered {
  border: 1px solid #ccc;
}

.rounded {
  border-radius: 5px;
}

（2）使用混合

要使用混合，只需要在需要的地方调用混合的名称，就像调用一个函数一样。

#header {
  .bordered;
}

#footer {
  .bordered;
  .rounded;
}

编译后的 CSS：

#header {
  border: 1px solid #ccc;
}

#footer {
  border: 1px solid #ccc;
  border-radius: 5px;
}

（3）带参数的混合

混合可以接受参数，参数在混合定义时指定，使用 @param 的形式。

.border-radius(@radius: 5px) {
  border-radius: @radius;
}

#header {
  .border-radius();
}

#footer {
  .border-radius(10px);
}

编译后的 CSS：

#header {
  border-radius: 5px;
}

#footer {
  border-radius: 10px;
}

（4）默认参数值

在混合定义中，可以为参数指定默认值。如果调用混合时没有提供参数，将使用默认值。

.border-style(@style: solid) {
  border-style: @style;
}

#header {
  .border-style();
}

#footer {
  .border-style(dashed);
}

编译后的 CSS：

#header {
  border-style: solid;
}

#footer {
  border-style: dashed;
}

（5）命名参数

在调用混合时，可以使用命名参数来指定特定的参数值，而不是按照定义的顺序。

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @x @y @blur @color;
}

#header {
  .box-shadow(0, 2px, 5px);
}

#footer {
  .box-shadow(y: 2px, color: #ccc);
}

编译后的 CSS：

#header {
  box-shadow: 0 2px 5px #000;
}

#footer {
  box-shadow: 0 2px 1px #ccc;
}

（6）混合的嵌套

混合可以嵌套使用，适用于复杂的样式表。

#header {
  .bordered;
  .rounded(10px);
}

#footer {
  .bordered;
  .rounded(5px);
}

编译后的 CSS：

#header {
  border: 1px solid #ccc;
  border-radius: 10px;
}

#footer {
  border: 1px solid #ccc;
  border-radius: 5px;
}

（7）混合的继承

混合还可以继承其他混合的属性。

.border {
  border: 1px solid #ccc;
}

.border-radius(@radius: 5px) {
  .border;
  border-radius: @radius;
}

#header {
  .border-radius();
}

#footer {
  .border-radius(10px);
}

编译后的 CSS：

#header {
  border: 1px solid #ccc;
  border-radius: 5px;
}

#footer {
  border: 1px solid #ccc;
  border-radius: 10px;
}

混合是 Less 中一个非常强大的功能，它可以避免重复代码，使样式表更加简洁和易于维护。

3.函数

Less 提供了一些内置函数，可以帮助你进行颜色计算、数学运算等。

@primary-color: #333;

body {
  color: lighten(@primary-color, 10%);
}

#header {
  background-color: darken(@primary-color, 10%);
}

（1）内置函数

Less 提供了许多内置函数，这里给出一些常用的内置函数：

颜色函数
  • lighten(color, amount)：使颜色变亮。
  • darken(color, amount)：使颜色变暗。
  • saturate(color, amount)：增加颜色的饱和度。
  • desaturate(color, amount)：减少颜色的饱和度。
  • fade(color, amount)：改变颜色的透明度。
  • spin(color, amount)：改变颜色的色调。
  • hsl(color)：将颜色转换为 HSL 表示。
  • hsla(color, alpha)：将颜色转换为 HSLA 表示。
  • rgb(color)：将颜色转换为 RGB 表示。
  • rgba(color, alpha)：将颜色转换为 RGBA 表示。
@primary-color: #333;

// 使颜色变亮 10%
body {
  color: lighten(@primary-color, 10%);
}

// 使颜色变暗 10%
#header {
  background-color: darken(@primary-color, 10%);
}

// 增加颜色的饱和度 20%
#main-content {
  color: saturate(@primary-color, 20%);
}

// 减少颜色的饱和度 20%
#sidebar {
  color: desaturate(@primary-color, 20%);
}

// 改变颜色的透明度 0.5（50% 透明）
#overlay {
  background-color: rgba(@primary-color, 0.5);
}
数学函数
  • ceil(number)：向上取整。
  • floor(number)：向下取整。
  • round(number)：四舍五入。
  • percentage(number)：将数字转换为百分比。
  • min(a, b)：返回两个数字中的最小值。
  • max(a, b)：返回两个数字中的最大值。
字符串函数
  • extract(string, index)：从字符串中提取指定位置的字符。
@str: "Hello, World!";
@first-character: extract(@str, 1);
@last-character: extract(@str, length(@str));

#example {
  first-character: @first-character; // "H"
  last-character: @last-character;   // "!"
}
  • length(string)：返回字符串的长度。
@str: "Hello, World!";
@str-length: length(@str);

#example {
  str-length: @str-length; // 13
}
  • replace(string, pattern, replacement)：替换字符串中的模式。
@str: "Hello, World!";
@replaced-str: replace(@str, "World", "Less");

#example {
  replaced-str: @replaced-str; // "Hello, Less!"
}
  • to-upper-case(string)：将字符串转换为大写。
@str: "hello, world!";
@upper-str: to-upper-case(@str);

#example {
  upper-str: @upper-str; // "HELLO, WORLD!"
}
  • to-lower-case(string)：将字符串转换为小写。
@str: "HELLO, WORLD!";
@lower-str: to-lower-case(@str);

#example {
  lower-str: @lower-str; // "hello, world!"
}

（2）自定义函数

除了内置函数，还可以自定义函数。自定义函数允许封装一段代码，并在需要时调用它。

@function my-function($arg1,$arg2) {
  @return $arg1 +$arg2;
}

#header {
  width: my-function(100px, 50px);
}

（3）使用函数

在 Less 中使用函数非常简单，只需调用函数并传入相应的参数即可。

@primary-color: #333;

body {
  color: lighten(@primary-color, 10%);
}

#header {
  background-color: darken(@primary-color, 10%);
}

4.嵌套

Less 允许嵌套编写 CSS 规则，让代码更加简洁和易于维护。

<div id="header">
  <div id="logo">
    <!-- Logo content here -->
  </div>
  <div id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

// 定义一个混合（mixin）
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// 定义一个混合（mixin）
.box-shadow(@x, @y, @blur, @color) {
  -webkit-box-shadow: @x @y @blur @color;
  -moz-box-shadow: @x @y @blur @color;
  box-shadow: @x @y @blur @color;
}

// 使用混合（mixin）并嵌套规则
#header {
  .border-radius(10px); // 应用混合（mixin）
  .box-shadow(0, 2px, 5px, rgba(0, 0, 0, 0.2)); // 应用混合（mixin）

  #logo {
    width: 300px;
    height: 100px;
    // 嵌套规则
    &:hover {
      .border-radius(15px); // 应用混合（mixin）
      .box-shadow(0, 5px, 10px, rgba(0, 0, 0, 0.3)); // 应用混合（mixin）
    }
  }

  #navigation {
    ul {
      list-style-type: none;
      li {
        display: inline;
        a {
          text-decoration: none;
          color: #333;
          // 嵌套规则
          &:hover {
            color: #111;
          }
        }
      }
    }
  }
}

5.运算

Less 允许在样式表中进行数学运算，支持加法（+）、减法（-）、乘法（*）、除法（/）和取模（%）等基本数学运算。这些运算可以在变量、混合（mixin）、函数和属性值中使用。

（1）变量运算

@base-font-size: 16px;
@base-line-height: 24px;

body {
  font-size: @base-font-size;
  line-height: @base-line-height;
  // 使用数学运算计算 padding
  padding: (@base-line-height - @base-font-size) / 2;
}

（2）混合运算

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .border-radius(10px); // 应用混合（mixin）
  #logo {
    width: 300px;
    height: 100px;
    // 使用数学运算计算圆角大小
    .border-radius(@radius: 10px + 5px); // 应用混合（mixin）并传递参数
  }
}

（3）函数运算

@base-color: #333;

@darken-color(@color, @amount) {
  // 使用函数进行颜色运算
  return darken(@color, @amount);
}

#header {
  background-color: @base-color;
  // 使用函数运算计算背景颜色
  color: @darken-color(@base-color, 10%);
}

（4）属性值运算

@base-padding: 10px;

#container {
  padding: @base-padding;
  #inner {
    // 使用数学运算计算内边距
    padding: @base-padding * 2;
  }
}

6.导入

Less 允许导入其他 Less 文件。

@import "variables.less";
@import "mixins.less";

#header {
  .border();
}

标签：Less,color,header,从零开始,radius,str,border,详解
From： https://blog.csdn.net/m0_59873661/article/details/143476715

相关文章

  • 万字长文带你从零开始：构建你的首个ComfyUI工作流，AI绘画进阶必看教程，ComfyUI零基础入门
    我今天又来给大家分享AI教程了，本期教程主角就是ComfyUI入门教程从2023年下半年开始，AI绘画界出现了一颗新星——ComfyUI。这个工具以其快速、流畅的图像生成能力，以及对低配置设备的友好性，迅速在创作者中流行起来。ComfyUI的一个亮点是能够一键加载大量工作流，让用户轻松实现......
  • 在线、离线安装nginx详解
    一、在线安装1、复制脚本首先，将以下脚本内容复制并保存为/tmp/install_nginx.sh文件。#!/bin/bash#安装工具包yum-yinstallyum-utilsif[$?-eq0];thenecho"yum-utils安装成功"elseecho"yum-utils安装失败，请重试"exit1fi#设置yum存储库nginx......
  • 【链路层】空口数据包详解(1)：LE未编码物理层的数据包格式
    目录一、概述1.1.数据包结构1.2.传输特性二、前导码(Preamble)2.1.功能2.2.长度2.3.位同步2.4.重要性三、接入地址（AccessAddress）3.1.周期性广播序列中的接入地址3.2.其他广播信道数据包的接入地址3.3.链路层状态与接入地址生成3.4.接入地址要求3.5.......
  • SQLI LABS | Less-27 GET-Error Based-All Your UNION & SELECT Belong To Us-String-
    关注这个靶场的其它相关笔记：SQLILABS——靶场笔记合集-CSDN博客0x01：过关流程输入下面的链接进入靶场（如果你的地址和我不一样，按照你本地的环境来）： http://localhost/sqli-labs/Less-27/本关考察的是SQL注入的绕过姿势，至于发现注入点，相信强大如你已经很容易测出来了，......
  • 用 Vue 和 CSS 快速实现电商风格的底部信息区域 从零开始：Vue 实现响应式电商底部布局
    效果图博客标题推荐用Vue和CSS快速实现电商风格的底部信息区域从零开始：Vue实现响应式电商底部布局新手必学！使用Vue构建精美电商底部导航Vue项目实战：构建电商风格的底部信息区域简单易懂！用Vue实现电商网站底部信息模块博客正文目录引言步骤一：创建基本HTML......
  • 【Google Cloud】专用 Google 访问通道的组成和利用方法详解
    专用Google访问通道（PrivateGoogleAccess）允许从没有外部IP的虚拟机访问GoogleCloud服务的API。本文将详细介绍此功能。什么是专用Google访问通道专用Google访问通道（PrivateGoogleAccess）是指在GoogleCloud（原称GCP）中，允许没有外部IP（公网IP）的虚拟机或本地......
  • HTTP协议详解
    什么是HTTP协议？HTTP协议是HyperTextTransferProtocol（超文本传输协议）的缩写,是用于万维网（WWW:WorldWideWeb）服务器与本地浏览器之间传输超文本的传送协议。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的......
  • 从零开始了解数采（十）——注塑机从工艺监控到智能管理
    注塑制品（Injectionmoldingproducts）是指用注塑成型机把塑料加热塑化熔融，然后再注射到成型模具空腔内成型，经冷却降温，熔体固化后脱模，注塑成型机注射成型的制品.注塑制品广泛应用在运输，包装，邮电，通讯，建筑，家电，计算机，航空航天，国防等国民经济的所有领域，已成为不可缺少的生产资料和消......
  • 从零开始了解数采（十一）——数控机床的采集与运用
    随着制造业朝向智能化发展，CNC（数控机床）设备的数据采集已成为优化生产流程、提高产品质量、降低维护成本的重要手段。通过对CNC设备的核心数据进行采集和分析，企业能够在设备维护、刀具管理、生产优化方面实现显著提升。本篇文章将深入探讨CNC数据采集的关键技术方法、应用场景以......
  • 从零开始了解数采（九）——数据采集的艺术：精度与实时性的完美平衡
    在工业数据采集的世界中，数据的精度和实时性就像一台高效机器的心脏与血液。它们不仅决定了数据采集系统的性能，还直接影响到生产决策和设备管理的质量。本文将介绍数据采集中的精度与实时性要求，以及如何通过有效的策略来满足这些要求。「精度——确保数据价值数据的精度是......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99