《CSS 简易速速上手小册》第7章:CSS 预处理器与框架(2024 最新版)

在这里插入图片描述

文章目录

  • 7.1 Sass:更高效的 CSS 编写
    • 7.1.1 基础知识
    • 7.1.2 重点案例:主题颜色和字体管理
    • 7.1.3 拓展案例 1:响应式辅助类
    • 7.1.4 拓展案例 2:深色模式支持
  • 7.2 Bootstrap:快速原型设计和开发
    • 7.2.1 基础知识
    • 7.2.2 重点案例:构建响应式导航栏
    • 7.2.3 拓展案例 1:使用卡片组件展示内容
    • 7.2.4 拓展案例 2:定制 Bootstrap 主题
  • 7.3 Tailwind CSS:实用主义的 CSS 框架
    • 7.3.1 基础知识
    • 7.3.2 重点案例:构建一个响应式导航菜单
    • 7.3.3 拓展案例 1:创建一个带有卡片布局的网格
    • 7.3.4 拓展案例 2:自定义按钮样式

7.1 Sass:更高效的 CSS 编写

Sass(Syntactically Awesome Stylesheets)是一个强大的CSS扩展语言,它引入了许多有用的特性,如变量、嵌套、混入(Mixins)、继承(Inheritance)、和模块(Modules),从而使得CSS的编写变得更加高效和可维护。

7.1.1 基础知识

  • 变量:允许你存储信息,比如颜色、字体堆或任何CSS值,使得你能够在整个样式表中重用它们。
  • 嵌套:让你能够在一个选择器内嵌套另一个选择器的样式,这样可以减少代码的重复并保持样式表的清晰。
  • 混入(Mixins):是可以重用的代码块,可以接受参数,使得你可以定义一组可复用的样式。
  • 继承(Inheritance):让你可以基于一个选择器集继承另一个的样式,有助于保持你的样式表的DRY(Don’t Repeat Yourself)。
  • 模块(Modules):Sass 1.23.0引入的新特性,允许你将Sass代码分割成更小的、可维护的片段。

7.1.2 重点案例:主题颜色和字体管理

假设你正在开发一个需要支持多种主题颜色和字体的网站,Sass的变量和混入可以使这项工作变得简单。

  • Sass 样式
// 定义变量
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-stack: Helvetica, sans-serif;// 使用变量
body {font-family: $font-stack;color: $primary-color;
}.button {@mixin button-variant($color) {background-color: $color;border: 1px solid darken($color, 5%);&:hover {background-color: lighten($color, 5%);}}@include button-variant($primary-color);
}

通过定义颜色和字体变量以及按钮的混入,我们可以轻松地调整和应用主题样式。

7.1.3 拓展案例 1:响应式辅助类

利用Sass的混入和循环,我们可以创建一系列响应式辅助类,用于快速调整元素的间距、大小等。

  • Sass 样式
@mixin responsive-margin($property, $values) {@each $size, $value in $values {.m-#{$property}-#{$size} {margin-#{$property}: $value;}}
}@include responsive-margin(left, ('sm': 5px, 'md': 10px, 'lg': 15px));

这段代码通过混入和循环生成了一系列关于左边距的响应式辅助类。

7.1.4 拓展案例 2:深色模式支持

使用Sass的变量和条件语句,我们可以为网站添加深色模式支持,让用户在不同的视觉模式之间切换。

  • Sass 样式
$light-theme: (background: #fff,text: #000,
);$dark-theme: (background: #333,text: #fff,
);body {@if $theme == dark {background-color: map-get($dark-theme, background);color: map-get($dark-theme, text);} @else {background-color: map-get($light-theme, background);color: map-get($light-theme, text);}
}

这段代码通过条件语句切换深色和浅色主题的样式设置。

通过掌握Sass,你的CSS编写将变得更加高效、组织化和强大。无论是管理复杂的样式系统、创建可复用的UI组件,还是实现主题切换功能,Sass都能让这些任务变得轻而易举。让我们开始利用Sass的高级特性,为我们的网站设计注入更多的活力和灵活性吧!

在这里插入图片描述


7.2 Bootstrap:快速原型设计和开发

Bootstrap是一个广受欢迎的前端框架,专为快速开发响应式和移动优先的网页而设计。它提供了一套丰富的HTML、CSS和JavaScript组件,帮助设计师和开发者快速构建整洁、功能丰富的网站。

7.2.1 基础知识

  • 网格系统:Bootstrap的网格系统允许你通过行(rows)和列(columns)快速创建布局,确保布局在不同设备上的兼容性和响应性。
  • 组件库:Bootstrap提供了一系列预制的组件,如按钮、导航栏、模态窗口、卡片等,可以直接在项目中使用。
  • 实用工具类:提供了大量的实用工具类,用于调整边距、填充、字体大小、对齐方式等,提高开发效率。
  • 定制性:Bootstrap允许通过Sass变量和混入来定制框架,使得开发的网站符合品牌的视觉标准。

7.2.2 重点案例:构建响应式导航栏

假设你需要为网站创建一个响应式导航栏,Bootstrap的导航组件能够让这个任务变得轻而易举。

  • HTML 结构
<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Features</a></li><!-- 更多导航项 --></ul></div>
</nav>

通过使用Bootstrap的导航栏组件,你可以快速实现一个在移动设备上友好的、可折叠的导航栏。

7.2.3 拓展案例 1:使用卡片组件展示内容

卡片组件是展示内容的理想选择,无论是产品、文章还是个人资料。

  • HTML 结构
<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

通过简单的HTML标记,Bootstrap使创建具有吸引力的卡片变得非常简单。

7.2.4 拓展案例 2:定制 Bootstrap 主题

定制Bootstrap以符合你的品牌标准是提升网站专业度的关键。

  • Sass 定制
// 自定义变量
$theme-colors: ("primary": #007bff,"success": #28a745,"info": #17a2b8
);// 引入Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

通过覆盖Bootstrap的默认变量,你可以创建一个独特且与品牌一致的主题,使网站在众多网站中脱颖而出。

Bootstrap为网站的快速原型设计和开发提供了强大的工具和资源。无论是通过使用预制的组件来加速开发,还是利用其灵活的网格系统和实用工具类来实现复杂的布局,Bootstrap都能帮助你有效地实现设计目标。掌握Bootstrap,让你的网页设计和开发工作更加高效和愉悦。

在这里插入图片描述


7.3 Tailwind CSS:实用主义的 CSS 框架

Tailwind CSS以其实用主义的设计哲学在前端开发者中获得了巨大的流行。它是一个功能类优先的CSS框架,提供了大量的实用工具类,使开发者能够通过组合这些类来构建复杂的设计,而无需离开HTML文档。这种方法旨在加快开发速度,同时保持样式的一致性和可维护性。

7.3.1 基础知识

  • 实用工具类:Tailwind 提供了成千上万的实用工具类,用于设置边距、颜色、字体大小、布局等,几乎可以控制元素的每一个样式方面。
  • 响应式设计:通过简单的类前缀,如 sm:, md:, lg:, xl:, 2xl:,可以轻松实现响应式设计。
  • 定制性:虽然Tailwind 提供了大量预设的样式,但它也支持高度定制。通过修改tailwind.config.js文件,开发者可以根据项目需求定制主题颜色、字体大小、断点等。
  • 无用CSS的清除:Tailwind 与PurgeCSS集成,可以自动移除未使用的CSS,确保最终构建的文件尽可能小。

7.3.2 重点案例:构建一个响应式导航菜单

使用Tailwind CSS构建一个响应式导航菜单,该菜单在小屏幕上隐藏,大屏幕上显示。

  • HTML 结构
<div class="flex flex-wrap justify-between items-center"><a href="#" class="text-xl text-gray-800">Logo</a><nav class="hidden md:flex space-x-4"><a href="#" class="text-gray-600 hover:text-gray-800">Home</a><a href="#" class="text-gray-600 hover:text-gray-800">About</a><!-- 更多链接 --></nav>
</div>

通过使用Tailwind的实用工具类,我们可以快速实现一个响应式的导航菜单,md:flex 确保在中等大小的屏幕及以上导航是可见的,而在更小的屏幕上则隐藏。

7.3.3 拓展案例 1:创建一个带有卡片布局的网格

使用Tailwind CSS的网格工具类来创建一个响应式的卡片布局网格。

  • HTML 结构
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"><div class="bg-white shadow rounded-lg p-4">Card 1</div><div class="bg-white shadow rounded-lg p-4">Card 2</div><!-- 更多卡片 -->
</div>

通过调整grid-cols-1, sm:grid-cols-2, lg:grid-cols-3类,我们可以定义不同屏幕大小下的列数,gap-4则为卡片之间提供了间隔。

7.3.4 拓展案例 2:自定义按钮样式

定制一个按钮样式,并在不同状态下改变其外观。

  • HTML 结构
<button class="btn-primary">Click me</button>
  • Tailwind 配置(在 tailwind.config.js 中):
module.exports = {theme: {extend: {colors: {'brand-blue': '#007bff',}}}
}
  • CSS(使用@apply指令):
.btn-primary {@apply bg-brand-blue text-white py-2 px-4 rounded hover:bg-blue-700;
}

通过在Tailwind配置文件中添加自定义颜色,并使用@apply指令应用实用工具类,我们可以快速创建一个具有品牌特色的按钮,并在悬停时改变背景色。

Tailwind CSS 通过其实用主义的设计哲学,为网页设计和开发带来了前所未有的灵活性和效率。无论是构建响应式布局、实现定制化设计,还是优化最终产物的文件大小,Tailwind都能提供强大的支持。掌握了Tailwind,你就拥有了在现代网页设计领域快速迭代和实现创意的能力。

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

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

相关文章

ueransim关于ue侧nas层相关代码解读

一.在文件UERANSIM\UERANSIM-3.2.6\src\ue\nas中enc.cpp中完成了NAS&#xff08;非接入层&#xff09;信令的加密和解密是通过NAS_ENC模块实现的。NAS_ENC模块负责将NAS信令消息进行加密&#xff0c;以确保其传输过程中的安全性。 具体来说&#xff0c;当UE发送NAS信令消息时&…

零基础如何学习编曲,究竟需要准备什么?

初学者常常弄不清楚作曲和编曲的区别&#xff0c;在这里我为大家讲解一下两者的差别。狭义上来说&#xff1a;作曲可以理解为写旋律&#xff0c;而编曲就是写伴奏。那么接下来让我们一起看看零基础编曲&#xff0c;究竟需要准备些什么? 一、理论 众所周知,乐理是最基础的理论…

【JMX】JAVA监控的基石

目录 1.概述 2.MBean 2.1.Standard MBean 2.2.Dynamic MBean 2.3.Model Bean 2.4.Dynamic MBean和Model Bean的区别 2.5.MXBean 2.6.Open Bean 3.控制台 1.概述 什么是JMX&#xff0c;首先来看一段对话&#xff1a; Java Management Extensions&#xff08;JMX&#…

探索ChatGPT-4:智能会话的未来已来

深入了解ChatGPT-4&#xff1a;前沿AI的强大功能 ChatGPT-4是最先进的语言模型之一&#xff0c;由OpenAI开发&#xff0c;它在自然语言理解和生成方面的能力已经达到了新的高度。如今&#xff0c;ChatGPT-4已经被广泛应用于多个领域&#xff0c;从教育到企业&#xff0c;再到技…

Java学习第十一节之命令行传参和断更原因

package method;public class Demo03 {public static void main(String[] args) {//args.length数组长度for (int i 0; i < args.length; i) {System.out.println("args[" i "]:"args[i]);}}}为什么没更新了&#xff1f; 家里有长辈生病了不好在医院照…

【算法与数据结构】496、503、LeetCode下一个更大元素I II

文章目录 一、496、下一个更大元素 I二、503、下一个更大元素II三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、496、下一个更大元素 I 思路分析&#xff1a;本题思路和【算法与数据结构】739、LeetCode每日温度类似…

嵌入式硬件越老越吃香,确实没错!

不知不觉已经从事硬件设计7年多了&#xff0c;7年对于一个从事硬件设计来说能有几个完整的生涯。2016年毕业&#xff0c;2023年即将结束&#xff0c;我已经在汽车这行业“摸爬滚打”了7年的时光。 回顾这7年&#xff0c;自己真的成长了很多很多。有项目失败整改的经验收获&…

Linux进程间通信(IPC)

要想进程间通信&#xff0c;数据交换&#xff0c;必须通过内核&#xff1b; 一个进程将数据写到内核&#xff0c;然后另一个进程从内核读走数据。 IPC&#xff1a;进程间通信&#xff08;interprocess communication) 通信方式&#xff1a; 管道信号共享映射区&#xff08;…

假期day7

设计qq界面 代码 ui->lab1->setPixmap(QPixmap(":/pictrue/denglu.webp"));ui->lab1->setScaledContents(true);ui->lab2->setPixmap(QPixmap(":/pictrue/passwd.jpg"));ui->lab2->setScaledContents(true);ui->lab3->setP…

fast.ai 深度学习笔记(三)

深度学习 2&#xff1a;第 1 部分第 6 课 原文&#xff1a;medium.com/hiromi_suenaga/deep-learning-2-part-1-lesson-6-de70d626976c 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自 fast.ai 课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这…

监控概述、安装zabbix、配置zabbixagent、添加被控端主机、常用监控指标、自定义监控项

监控概述 对服务的管理&#xff0c;不能仅限于可用性。 还需要服务可以安全、稳定、高效地运行。 监控的目的&#xff1a;早发现、早治疗。 被监控的资源类型&#xff1a; 公开数据&#xff1a;对外开放的&#xff0c;不需要认证即可获取的数据私有数据&#xff1a;对外不开…

DRF 分页器的使用

drf提供了三个内置分页器&#xff0c;根据前端需求选择使用。 全局配置 在配置文件中设置全局的分页方式&#xff0c;如&#xff1a; REST_FRAMEWORK {DEFAULT_PAGINATION_CLASS: rest_framework.pagination.PageNumberPagination,PAGE_SIZE: 100 # 每页数目 }也可通过继…

python coding with ChatGPT 打卡第20天| 二叉搜索树:搜索、验证、最小绝对差、众数

相关推荐 python coding with ChatGPT 打卡第12天| 二叉树&#xff1a;理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 python coding with ChatGPT 打卡第15天| 二叉树&#xff1a;翻转…

(基于xml配置Aop)学习Spring的第十五天

一 . Spring Aop编程简介 再详细点 , 如下 二 . 基于xml配置Aop 解决proxy相关问题 解决问题开始用xml配置AOP 导入pom坐标 <dependency><groupId>org.aspectj</groupId><artifactId>aspectjweaver</artifactId><version>1.9.6</vers…

【算法】排序详解(快速排序,堆排序,归并排序,插入排序,希尔排序,选择排序,冒泡排序)

目录 排序的概念&#xff1a; 排序算法的实现&#xff1a; 插入排序&#xff1a; 希尔排序&#xff1a; 选择排序&#xff1a; 堆排序&#xff1a; 冒泡排序&#xff1a; 快速排序&#xff1a; 快速排序的基本框架&#xff1a; 1.Hoare法 2. 挖坑法 3.前后指针法 快…

linux系统下vscode portable版本的c++/Cmake环境搭建001

linux系统下vscode portable版本的Cmake环境搭建 vscode portable 安装安装基本工具安装 build-essential安装 CMake final script code安装插件CMake Tools & cmakeC/C Extension Pack Testsettings,jsonCMakeLists.txt调试和运行工具 CG 目的&#xff1a;希望在获得一个新…

DolphinScheduler-3.2.0 集群搭建

本篇文章主要记录DolphinScheduler-3.2.0 集群部署流程。 注&#xff1a;参考文档&#xff1a; DolphinScheduler-3.2.0生产集群高可用搭建_dophinscheduler3.2.0 使用说明-CSDN博客文章浏览阅读1.1k次&#xff0c;点赞25次&#xff0c;收藏23次。DolphinScheduler-3.2.0生产…

svg基础(七)滤镜-feflood,feDisplacementMap 位置替换滤镜

1 feflood 此过滤器创建一个矩形&#xff0c;其中填充了指定的的颜色&#xff0c;应用了不透明度值。 1.1 语法 <feFlood x"" y"" width"" height"" flood-color"" flood-opacity""/>1.2 属性 x&#x…

【复现】泛微云桥 e-Bridge SQL注入漏洞_45

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 泛微云桥&#xff08;e-Bridge&#xff09;是上海泛微公司在”互联网”的背景下研发的一款用于桥接互联网开放资源与企业信息化系…

MySQL数据库-索引概念及其数据结构、覆盖索引与回表查询关联、超大分页解决思路

索引是帮助mysql高效获取数据的数据结构,主要用来提高检索的效率,降低数据库的IO成本(输入输出成本&#xff08;Input-Output Cost&#xff09;),同时通过索引对数据进行排序也能降低数据排序的成本,降低了CPU的消耗。 Mysql的默认存储引擎InnoDB&#xff0c;InnoDB采用的B树的…