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

在现代前端开发中，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.mzph.cn/bicheng/64163.shtml

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

相关文章

C++中函数的特性

C++中函数的特性

文章目录 一、C中形参带默认值的函数二、C中的inline内联函数三、C中的inline内联函数和普通函数的区别四、C中函数重载五、C为什么支持函数重载六、C语言为什么无法实现函数重载 一、C中形参带默认值的函数 在C中&#xff0c;形参带默认值的函数是指在函数声明或定义时&#…
阅读更多...
关于Postgresql旧版本安装

关于Postgresql旧版本安装

抛出问题 局点项目现场&#xff0c;要求对如下三类资产做安全加固&#xff0c;需要在公司侧搭建测试验证环境&#xff0c;故有此篇。 bclinux 8.2 tomcat-8.5.59 postgrel -11 随着PG迭代&#xff0c;老旧版本仅提供有限维护。如果想安装老版本可能就要费劲儿一些。现在&…
阅读更多...
使用echarts实现3d柱状图+折线图

使用echarts实现3d柱状图+折线图

以下代码有问题请直接问国内直连GPT/Claude HTML 需要注意threeDchart一定要设置宽度高度&#xff0c;不然图不显示,然后echarts版本不要太低&#xff0c;不然也不显示 <div id"threeDchart" class"threeDchart"></div>js set3DBarChart2(dat…
阅读更多...
2024.1212-02-虚拟私人网（VPN) 虚拟局域网 及隧道技术(四)--GRE47 Etherip97 原理及应用

2024.1212-02-虚拟私人网（VPN) 虚拟局域网 及隧道技术(四)--GRE47 Etherip97 原理及应用

虚拟局域网 及隧道技术&#xff08;四&#xff09;-GRE47 & Etherip97原理及应用 概述原理及应用EOIP/Etherip概念区别 隧道协议标准EtherIP &#xff08;IP protocol number 97&#xff09;GRE 开源工具katlogic-eoip 验证环境GRE&#xff08;EOIP&#xff09;演示验证Eth…
阅读更多...
一个初始化bitmap的小算法

一个初始化bitmap的小算法

一个初始化bitmap小算法 根据长度&#xff0c;创建bitmap初始化bitmap 根据长度&#xff0c;创建bitmap 看到一个开源项目&#xff0c;利用bitmap存储数据&#xff0c;其中创建和初始化过程&#xff0c;比较经典。这里摘录出来&#xff0c;以备后续使用。代码采用的是golang …
阅读更多...
【从零开始入门unity游戏开发之——C#篇01】理论开篇，理解什么是编程

【从零开始入门unity游戏开发之——C#篇01】理论开篇，理解什么是编程

文章目录 前言前置条件进制什么是十进制、二进制二进制有什么用&#xff1f;为什么计算机用二进制而不用十进制&#xff1f;二进制转十进制十进制转二进制二进制运算 计算机中的数据存储单位什么是编程&#xff1f;什么是代码&#xff1f;什么是编程语言&#xff1f;常见的编程…
阅读更多...
黑盒白盒测试

黑盒白盒测试

任务1 黑盒测试之等价类划分法 【任务需求】 【问题】例&#xff1a;某报表处理系统要求用户输入处理报表的日期&#xff0c;日期限制在2003年1月至2008年12月&#xff0c;即系统只能对该段期间内的报表进行处理&#xff0c;如日期不在此范围内&#xff0c;则显示输入错误信息…
阅读更多...
CSS学习记录11

CSS学习记录11

CSS布局 - display属性 display属性是用于控制布局的最终要的CSS属性。display 属性规定是否/如何显示元素。每个HTML元素都有一个默认的display值&#xff0c;具体取决于它的元素类型。大多数元素的默认display值为block 或 inline。 块级元素&#xff08;block element&…
阅读更多...
ByteCTF2024

ByteCTF2024

wp参考&#xff1a; 2024 ByteCTF wp 2024 ByteCTF WP- Nepnep ByteCTF 2024 writeup by Arr3stY0u 五冠王&#xff01;ByteCTF 2024 初赛WriteUp By W&M ByteCTF 2024 By W&M - W&M Team ByteCTF Re WP - 吾爱破解 - 52pojie.cn 2024 ByteCTF - BediveRe_R…
阅读更多...
C#，在 C# 语言中将 LaTeX 转换为 PNG 或 JPG 图像

C#，在 C# 语言中将 LaTeX 转换为 PNG 或 JPG 图像

在 C 语言中将 LaTeX 转换为 PNG 或 JPG 图像# 12月 28&#xff0c; 2021 2 分钟 法尔汉拉扎 在 C 语言中将 TeX 转换为 PNG JPG 图像# TeX 格式用于处理技术和科学文件。它通常用于交流或发布此类文档。在某些情况下&#xff0c;您可能需要将 TeX 文件渲染为 PNG 或 JPG 等图像…
阅读更多...
AI监控赋能健身馆与游泳馆全方位守护，提升安全效率

AI监控赋能健身馆与游泳馆全方位守护，提升安全效率

一、AI视频监控技术的崛起 随着人工智能技术的不断发展&#xff0c;AI视频监控正成为各行业保障安全、提升效率的关键工具。相比传统监控系统&#xff0c;AI技术赋予监控系统实时分析、智能识别和精准预警的能力&#xff0c;让“被动监视”转变为“主动防控”。 二、AI监控应用…
阅读更多...
搭建Tomcat（一）---SocketServerSocket

搭建Tomcat（一）---SocketServerSocket

目录 引入1 引入2--socket 流程 Socket&#xff08;应用程序之间的通讯保障&#xff09; 网卡(计算机之间的通讯保障) 端口 端口号 实例 client端 解析 server端 解析 相关方法 问题1&#xff1a;ServerSocket和Socket有什么关系&#xff1f; ServerSocket Soc…
阅读更多...
爬虫学习案例5

爬虫学习案例5

爬取b站一个视频 罗翔老师某一个视频很刑 单个完整代码&#xff1a; 安装依赖库 pip install lxml requests import osimport requests import re from lxml import etree import json # 格式化展开输出 from pprint import pprint # 导入进程模块 import subprocess head…
阅读更多...
10.python函数

10.python函数

你提供的信息非常全面地介绍了Python函数的基础概念和用法。为了确保内容的现代性和准确性&#xff0c;我将对一些细节进行更新&#xff0c;并提供一些Python 3.x版本中的最佳实践。 文章目录 Python 函数定义一个函数实例&#xff1a;打印传入的字符串函数调用参数传递传不可…
阅读更多...
【深度学习】 零基础介绍卷积神经网络(CNN)

【深度学习】 零基础介绍卷积神经网络(CNN)

零基础介绍 卷积神经网络&#xff08;CNN&#xff0c;Convolutional Neural Network&#xff09;是深度学习中的一种神经网络&#xff0c;特别擅长处理图像和视频等有空间结构的数据。 假设我们在做一个“照片分类”的任务&#xff0c;比如判断一张照片中是猫还是狗。下面用一…
阅读更多...
【计算机组成原理】实验二：通用寄存器单元实验

【计算机组成原理】实验二：通用寄存器单元实验

实验二&#xff1a;通用寄存器单元实验 一、实验目的 了解通用寄存器的组成和硬件电路&#xff0c;利用通用寄存器实现数据的置数、左移、右移等功能。 二、实验内容 数据输入通用寄存器 寄存器内容无进位位左移实验 寄存器内容无进位位右移实验 三、实验步骤和结果 实…
阅读更多...
boost之bind

boost之bind

简介 用于构造函数对象&#xff0c;其定义在文件bind.hpp中 bind 其底层使用通用的模板类bind_t template<class R, class F, class L> class bind_t { public:typedef bind_t this_type;bind_t(F f, L const & l): f_(f), l_(l) {}#define BOOST_BIND_RETURN re…
阅读更多...
4G模块详解

4G模块详解

在之前的教程中&#xff0c;无线通信技术我们学习了蓝牙和 WiFi&#xff0c;今天我们要来学习 4G。 4G 模块在距离上有个突破&#xff0c;它不像蓝牙短距离&#xff0c;也不像 WiFi 只能在局域网&#xff0c;4G 模块可使用户无论在哪&#xff0c;只要有 4G 网络信号覆盖&#…
阅读更多...
QT数据库操作详解

QT数据库操作详解

在Qt中&#xff0c;操作数据库通常使用Qt SQL模块&#xff0c;该模块提供了一组类来与数据库进行交互。 数据库连接与查询执行 QSqlDatabase::addDatabase(): 添加一个数据库连接。 QSqlDatabase::open(): 打开数据库连接。 QSqlDatabase::close(): 关闭数据库连接。 QSql…
阅读更多...
如何实现接口继承与实现继承的区别？如何处理多态性与性能的平衡？

如何实现接口继承与实现继承的区别？如何处理多态性与性能的平衡？

在面向对象编程中&#xff0c;接口继承和实现继承是两个重要的概念&#xff0c;同时多态性也是面向对象编程的一大特性&#xff0c;但在追求多态性的同时&#xff0c;我们也需要考虑性能问题。本文将详细探讨接口继承与实现继承的区别&#xff0c;以及如何处理多态性与性能的平…
阅读更多...
最新文章

Copyright @ 2022~2023