解锁CSS新维度：预处理器之LessSass

news2024/12/15 5:49:06

在现代前端开发中，CSS（层叠样式表）是用于控制网页外观的主要技术。然而，随着项目的复杂度增加，传统的CSS编写方式逐渐显现出其局限性，如变量复用、嵌套规则、模块化管理等需求难以满足。为此，出现了CSS预处理器，如Sass和Less，它们提供了更强大的功能，使得CSS编写更加高效和灵活。

回顾

CSS是一种用于描述HTMLz或XML（包括各种XML方言如SVG、XUL等）文档样式的样式表语言。它允许开发者定义元素的颜色、字体、布局等属性，从而实现网页的视觉 效果。

CSS的基本特点

  • **层叠性：**多个样式规则应用于同一个元素时，浏览器会根据优先级规则决定最终应用哪个样式。
    • 内联样式 > ID 选择器 > 类选择器 > 标签选择器：内联样式（直接在 HTML 标签中定义的样式）具有最高的优先级，其次是 ID 选择器，然后是类选择器，最后是标签选择器。
    • !important：开发者可以使用 !important 关键字来强制某个样式规则的优先级，使其高于其他规则。
    • 继承：某些样式属性（如 color、font-size 等）会从父元素继承到子元素，除非子元素有明确的样式声明。
  • 继承性：如果父元素设置了某种样式，子元素也会自动应用该样式，除非子元素有明确的样式声明覆盖它。
    • 文本相关属性：如 color、font-family、font-size、line-height 等。
    • 列表相关属性：如 list-style。
    • 表格相关属性：如 border-collapse
  • 选择器：可以根据不同的条件选择元素。
    • 标签选择器：选择特定的 HTML 标签。例如，p 选择所有 <p> 标签。
    • 类选择器：选择具有特定类名的元素。例如，.my-class 选择所有带有 class="my-class" 的元素。
    • ID 选择器：选择具有特定 ID 的元素。例如，#my-id 选择唯一带有 id="my-id" 的元素。
    • 伪类选择器：选择处于特定状态的元素。例如，:hover 选择用户悬停时的元素，:nth-child() 选择特定位置的子元素。
    • 属性选择器：选择具有特定属性或属性值的元素。例如，input[type="text"] 选择所有 type="text" 的 <input> 元素。
    • 组合选择器：通过组合多个选择器来选择更复杂的元素。例如，div p 选择所有位于 <div> 内的 <p> 元素。

CSS-变量

变量：CSS允许开发者在样式表中定义可重用的值，这些变量可以在整个样式表中使用，并且可以在运行时动态修改。CSS 变量为样式管理提供了更大的灵活性和可维护性，尤其是在大型项目中。

定义CSS变量

CSS 变量的定义使用 -- 前缀，表示这是一个自定义属性。变量可以在任何选择器内部定义，但通常建议在 :root 或 html 选择器中定义全局变量，以便在整个文档中使用。

:root {
  --variable-name: value;
}

:root 是一个伪类，表示文档的根元素（即 <html>），因此在 :root 中定义的变量可以在整个文档中访问。
--variable-name 是变量的名称，必须以 -- 开头。
value 是变量的具体值，可以是颜色、长度、字体等任何有效的 CSS 值 

:root {
  --primary-color: #3498db;
  --font-size-base: 16px;
  --border-radius: 5px;
}
  • 要使用 CSS 变量，需要使用 var() 函数。var() 函数接受两个参数：
    • 第一个参数是要使用的变量名称。
    • 第二个参数（可选）是默认值，如果变量未定义或无效时将使用该默认值。
property: var(--variable-name, fallback-value);

property 是要应用样式的 CSS 属性。
--variable-name 是要使用的变量名称。
fallback-value 是可选的默认值，当变量未定义或无效时使用。 

:root {
  --primary-color: #3498db;
}

body {
  background-color: var(--primary-color, #f0f0f0); /* 如果 --primary-color 未定义，则使用 #f0f0f0 */
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border-radius: var(--border-radius, 10px); /* 如果 --border-radius 未定义，则使用 10px */
}

  • 局部变量

    虽然全局变量（在 :root 中定义）可以在整个文档中使用，但你也可以在特定的选择器中定义局部变量，这些变量只在该选择器的作用范围内有效。

:root {
  --primary-color: #3498db;
}

.button-group {
  --primary-color: #e74c3c; /* 局部变量，仅在 .button-group 内生效 */
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border-radius: var(--border-radius, 10px);
}

--primary-color 在 :root 中定义为全局变量，但在 .button-group 中定义了一个局部变量，覆盖了全局变量的值。因此，.button-group 内的按钮将使用 #e74c3c 作为背景颜色，而其他地方的按钮将使用 #3498db。 

  1. 嵌套变量

    在一个变量中引用另一个变量。

:root {
  --base-color: #3498db;
  --lighter-color: rgba(var(--rgb), 0.8);
  --darker-color: rgba(var(--rgb), 0.2);
  --rgb: 52, 152, 219; /* RGB 值 */
}

body {
  background-color: var(--base-color);
}

header {
  background-color: var(--lighter-color);
}

footer {
  background-color: var(--darker-color);
}
CSS-Calc计算函数
  1. 基本语法
property: calc(expression);

property：要应用样式的 CSS 属性（如 width、height、margin、padding等）。
expression：一个数学表达式，可以包含加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 操作符。

表达式中的值可以是长度、百分比、数字或其他支持的单位。 

  1. 使用示例
div {
  width: calc(100% - 20px); /* 宽度为容器的 100%，减去 20px 的边距 */
}

header {
  width: calc(80vw + 50px); /* 宽度为视口宽度的 80%，加上 50px */
}

/* 结合变量使用 */
:root {
  --base-padding: 10px;
  --gap: 20px;
}

.container {
  padding: calc(var(--base-padding) + var(--gap)); /* 内边距为 --base-padding 加上 --gap */
}

/* calc嵌套 */
.container {
  width: calc(calc(100% - 20px) / 2); /* 先计算 100% - 20px，然后将其除以 2 */
}
  1. 注意事项
    • 在 calc() 中，操作符两侧必须有空格。例如，calc(100% - 20px) 是有效的，而 calc(100%-20px) 会导致解析错误。
    • 除法时，被除数不能为 0，否则会引发错误。

Sass

Sass 是一种CSS预处理器，它扩展了CSS的功能，支持变量、嵌套、混合、继承等特性。Sass有两种语法：SCSS（Sassy CSS）和缩进语法（.sass）。SCSS语法与CSS非常相似，易于学习和使用。

Sass的特性

变量

可以定义变量来存储颜色、尺寸等值，方便全局管理和修改。

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}
嵌套

允许在一个选择器内部嵌套其他选择器，使代码更加简洁和有组织。

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
混合
  • 通过@mixin可以定义一组样式，然后在其他地方重用。
  • @mixin是一种在SCSS中定义可重用的样式代码块的方式。它类似于函数，可以接受参数，并且可以在需要的地方调用。
  • 使用@mixin可以将一组样式代码封装起来，然后在需要的地方使用@include来引入这些样式代码。这样可以避免重复编写相同的样式代码，提高代码的复用性和可维护性。
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button {
  @include button-style(#f00, #fff);
}

我们可以在项目中的多个地方使用.button类，并且它们都会应用相同的样式。如果需要修改按钮的样式，只需要修改@mixin的定义即可，而不需要逐个修改每个使用了该样式的地方。

继承

可以让一个选择器继承另一个选择器的样式。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

貌似混合和继承差不多，都是引用一部分样式代码块来达到代码复用的效果，怎么选择？（继承不可传递参数，不能做个性化设置，但混合支持）。

Less

Less 是另一种流行的CSS预处理器，它的语法与Sass类似，但更简洁。Less同样支持变量、嵌套、混合、函数等功能。

Less的特性

变量

与Sass类似，可以定义变量来存储常用的值。

@primary-color: #3498db;
.button {
  background-color: @primary-color;
}
嵌套

支持嵌套选择器，使代码结构更加清晰。

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
混合

通过.mixin()可以定义和重用样式。

  • 使用语法——不需要include
.mixin-name(@param1, @param2) {
  // 样式规则
}

.class-name {
  .mixin-name(value1, value2);
}
  • 使用示例
// 定义一个简单的 @mixin
.border-radius( @br:5px ) {
  border-radius: @br;
}

// 调用 @mixin
.button {
  .border-radius(10px);
  background-color: blue;
  color: white;
}
继承

通过:extend()来完成对样式的继承

  • 使用示例
.btn-submit {
  background-color:#66dd7a;
  border-radius:6px;
  width: 50px;
  height: 20px;
}

.btn2 {
  &:extend(.btn-submit);
  width: 60px;
}
函数

提供了一些内置函数，如颜色操作、数学计算等。

颜色操作

  • lighten(@color, @percentage)：使颜色变亮。
  • darken(@color, @percentage)：使颜色变暗。
  • saturate(@color, @percentage)：增加颜色的饱和度。
  • desaturate(@color, @percentage)：减少颜色的饱和度。
  • fadein(@color, @percentage)：增加颜色的透明度（alpha 值）。
  • fadeout(@color, @percentage)：减少颜色的透明度（alpha 值）。
  • fade(@color, @percentage)：设置颜色的透明度（alpha 值）。
@base-color: #f0f0f0;
.box {
  color: lighten(@base-color, 20%);
}

数学计算

@value: 3.7;

.ceiling: ceil(@value);   // 4
.flooring: floor(@value); // 3
.rounded: round(@value);  // 4

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2259762.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

游戏引擎学习第42天

游戏引擎学习第42天

仓库: https://gitee.com/mrxiao_com/2d_game 简介 目前我们正在研究的内容是如何构建一个基本的游戏引擎。我们将深入了解游戏开发的每一个环节&#xff0c;从最基础的技术实现到高级的游戏编程。 角色移动代码 我们主要讨论的是角色的移动代码。我一直希望能够使用一些基…
阅读更多...
SEGGER | 基于STM32F405 + Keil - RTT组件01 - 移植SEGGER RTT

SEGGER | 基于STM32F405 + Keil - RTT组件01 - 移植SEGGER RTT

导言 RTT(Real Time Transfer)是一种用于嵌入式中与用户进行交互的技术&#xff0c;它结合了SWO和半主机的优点&#xff0c;具有极高的性能。 使用RTT可以从MCU非常快速输出调试信息和数据&#xff0c;且不影响MCU实时性。这个功能可以用于很多支持J-Link的设备和MCU&#xff0…
阅读更多...
【01】mysql安装后MySQL Configurator无法启动的问题

【01】mysql安装后MySQL Configurator无法启动的问题

安装完Mysql之后打开MySql Configurator提示MySQL Configurator Internal error.(值不能为null.参数名:input) The Configurator will now close. mysql安装后MySQL Configurator无法启动的问题 文章目录 mysql安装后MySQL Configurator无法启动的问题1.MySQL Configurator无法…
阅读更多...
重生之我在异世界学编程之C语言：深入文件操作篇（下）

重生之我在异世界学编程之C语言：深入文件操作篇（下）

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 函数递归与迭代 引言正文一、文件的基本操作&#…
阅读更多...
【论文阅读笔记】One Diffusion to Generate Them All

【论文阅读笔记】One Diffusion to Generate Them All

One Diffusion to Generate Them All 介绍理解 引言二、相关工作三、方法预备知识训练推理实现细节训练细节 数据集构建实验分结论附录 介绍 Paper&#xff1a;https://arxiv.org/abs/2411.16318 Code&#xff1a;https://github.com/lehduong/onediffusion Authors&#xff1…
阅读更多...
Qt知识之 2. Windows下使用QtCreator创建的CMake项目，配置CMakeLists.txt文件生成sln文件方案

Qt知识之 2. Windows下使用QtCreator创建的CMake项目，配置CMakeLists.txt文件生成sln文件方案

1. 先使用QtCreator创建CMake项目 到构建系统时&#xff0c;选择CMake。 2. 创建完成后&#xff0c;进入该项目文件夹 3. 在该文件夹空白处&#xff0c;右键启动Powershell命令行窗口 4. 使用命令行前&#xff0c;记得在系统环境变量中配置所用编译器的环境变量&#xff0c;…
阅读更多...
C语言实验 函数一

C语言实验 函数一

时间：2024.12.14 6-1 弹球距离 double dist (double h,double p) {double sum = h,height;height = h*p;while(height>=TOL){sum += height * 2; //上行下行都算，所以是两倍的距离。height *=p;}return sum; } 6-2 使用函数输出一个整数的逆序数 错误代码：运行超…
阅读更多...
【C语言实现：用队列模拟栈与用栈模拟队列（LeetCode 225 232）】

【C语言实现：用队列模拟栈与用栈模拟队列（LeetCode 225 232）】

LeetCode刷题记录 &#x1f310; 我的博客主页&#xff1a;iiiiiankor&#x1f3af; 如果你觉得我的内容对你有帮助&#xff0c;不妨点个赞&#x1f44d;、留个评论✍&#xff0c;或者收藏⭐&#xff0c;让我们一起进步&#xff01;&#x1f4dd; 专栏系列&#xff1a;LeetCode…
阅读更多...
STM32标准库学习之寄存器方法点亮LED灯

STM32标准库学习之寄存器方法点亮LED灯

STM32C8T6最小系统开发板&#xff0c;点亮PC13引脚的LED灯 1.使能PC13引脚的定时器 PC13引脚为GPIOC组的第13个端口&#xff0c;GPIO的时钟使能定时器为RCC_APB2ENR&#xff0c;这是可以从手册中得出的&#xff0c;如下图所示 从下图可以得出&#xff0c;若要使能GPIOC端口&a…
阅读更多...
探索 Echarts 绘图：数据可视化的奇妙之旅

探索 Echarts 绘图：数据可视化的奇妙之旅

目录 一、Echarts 初印象 二、搭建 Echarts 绘图环境 三、绘制第一个图表&#xff1a;柱状图的诞生 四、图表的美化与定制&#xff1a;让数据更具吸引力 1. 主题切换&#xff1a;一键变换风格 2. 颜色调整&#xff1a;色彩搭配的艺术 3. 标签与提示框&#xff1a;丰富信…
阅读更多...
泷羽sec-burp(6)暴力破解与验证码识别绕过（下，验证码识别绕过0） 学习笔记

泷羽sec-burp(6)暴力破解与验证码识别绕过（下，验证码识别绕过0） 学习笔记

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…
阅读更多...
docker快速实现ELK的安装和使用

docker快速实现ELK的安装和使用

目录 一、ELK功能原理 二、项目功能展示​ 三、日志查询展示​ 四、ELK安装步骤 1、创建elasticsearch、kibana、filebeat相关data、log、conf目录 2、进入/usr/local/elk目录&#xff0c;并创建一个docker网络 3、启动 elasticsearch容器 4、运行kibana容器 5、启动f…
阅读更多...
onnx算子的注册详解及案例 （完整版）

onnx算子的注册详解及案例 （完整版）

文章目录 1. 介绍1.1 导出onnx不成功1.2 分析和解决方案2. 案例2.1 Asinh算子注册2.1.1 导出onnx2.1.2 算子注册2.2 自定义算子的注册2.1 直接导出自定义算子2.2 自定义算子的注册并导出2.3 导出带deformable conv 的onnx2.3.1 直接导出deformable conv2.3.2 注册并导出deforma…
阅读更多...
数据结构_拓扑排序

数据结构_拓扑排序

拓扑排序 &#xff08;所有点按照先后顺序排序&#xff09; 1.先找到入度为0的点&#xff0c;记录之后&#xff0c;删除这个点和它的出边&#xff1b; 2.若有两个可选&#xff0c;随便选择一个 例 a的入度为0,选a [a] 随便选一个 [a,e] 再找入度为0的点 再选c 最后选d 拓…
阅读更多...
在线项目管理工具内网怎么用

在线项目管理工具内网怎么用

随着企业规模的扩大和项目管理复杂性的增加&#xff0c;许多公司已经开始使用在线项目管理工具来提高协作效率和项目透明度。然而&#xff0c;在企业内部网络环境下如何有效地使用这些工具&#xff0c;尤其是针对安全性、权限管理以及高效团队协作的问题&#xff0c;仍然是许多…
阅读更多...
《自制编译器》--青木峰郎 -读书笔记 编译hello

《自制编译器》--青木峰郎 -读书笔记 编译hello

在该书刚开始编译hello.cb时就遇到了问题。 本人用的是wsl&#xff0c;环境如下&#xff0c; 由于是64位&#xff0c;因此根据书中的提示&#xff0c;从git上下载了64位的cb编译器 cbc-64bit 问题一: 通过如下命令编译时,总是报错。 cbc -Wa,"--32" -Wl,"-…
阅读更多...
使用C#和OPenCV实现圆形检测

使用C#和OPenCV实现圆形检测

文章目录 霍夫变换使用 OpenCV 和 C# 实现圆形检测 霍夫变换 在计算机视觉中&#xff0c;圆形检测是一个常见且有用的任务&#xff0c;特别是在物体识别、图像分析和图形处理等领域。OpenCV 是一个强大的开源计算机视觉库&#xff0c;它提供了许多工具来实现不同的图像处理功能…
阅读更多...
数字图像处理(23)：YUV444与YUV422

数字图像处理(23)：YUV444与YUV422

&#xff08;1&#xff09;在YUV颜色空间中&#xff0c;“Y”表示灰度&#xff0c;可以体现人眼对亮度的敏感程度&#xff0c;如果没有U和V信息&#xff0c;只有Y信息&#xff0c;图像仍然可以显示出来&#xff0c;只不过是灰色的&#xff1b;“U”和“V”表示色度&#xff0c;…
阅读更多...
HQChart使用教程30-K线图如何对接第3方数据42-DRAWTEXTREL,DRAWTEXTABS数据结构

HQChart使用教程30-K线图如何对接第3方数据42-DRAWTEXTREL,DRAWTEXTABS数据结构

HQChart使用教程30-K线图如何对接第3方数据42-DRAWTEXTREL,DRAWTEXTABS数据结构 效果图DRAWTEXTREL示例数据结构说明nametypecolorDrawVAlignDrawAlignDrawDrawTypeDrawDataFont DRAWTEXTABS示例数据结构说明nametypecolorDrawVAlignDrawAlignDrawDrawTypeDrawDataFont 效果图 …
阅读更多...
elasticsearch 使用Painless脚本

elasticsearch 使用Painless脚本

文章目录 1. 创建索引2. 插入模拟数据Painless 脚本的基本特点&#xff1a;Painless 脚本的常见用途1. 脚本查询和过滤示例&#xff1a;基于脚本的查询 2. 脚本字段示例&#xff1a;脚本字段 3. 聚合中的脚本示例&#xff1a;脚本聚合 4. 文档更新中的脚本示例&#xff1a;文档…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023