学会Sass的高级用法,减少样式冗余

在当今的前端开发领域,样式表语言的进步已经显著提升了代码组织性和可维护性。Sass(Syntactically Awesome Style Sheets)作为CSS预处理器的翘楚,以其强大的变量、嵌套规则、混合宏(mixin)、循环和函数等高级特性,正在引领一种革命性的编写CSS的新方式。通过掌握Sass的这些高级用法,开发者能够有效地减少样式冗余,提升工作效率,并构建出更易于理解和扩展的样式结构。

引述一个具体的实践场景,想象一个大型项目中存在大量的重复颜色、尺寸或动画定义,使用Sass变量,可以将这些共享值统一管理,一处变更即全局生效。此外,借助@each循环语句,我们可以轻松地为一组类名生成具有不同颜色主题的一系列样式,避免了手动编写多条相似规则所带来的繁琐与潜在错误。

而诸如嵌套规则这样的功能,则允许我们以更加直观的方式模拟DOM结构,使得CSS选择器之间的层级关系更为清晰可见。同时,通过自定义混合宏,复杂的样式块得以模块化封装和复用,从而极大地降低了代码重复度,提高整体代码质量。

因此,深入学习并运用Sass的高级用法不仅简化了样式编写过程,也有助于构建出适应性强、扩展性好且易于维护的CSS代码库,是现代Web开发实践中不可或缺的一部分。

例举几个常见的用法:

一、控制指令

Sass提供了控制指令,允许你在样式表中使用条件语句和循环,从而更加灵活地控制样式的生成。

1. @if和@else if/else

Sass中的@if@else if@else指令允许你根据条件判断来输出不同的样式。

$is-dark: true;  body {  @if $is-dark {  background-color: black;  color: white;  } @else {  background-color: white;  color: black;  }  
}

2.@for

Sass的@for指令可以用于循环输出样式,支持两种循环方式:from <start> through <end>from <start> to <end>

@for $i from 1 through 3 {  .item-#{$i} { width: 10px * $i; }  
}

二、函数

Sass内置了一系列函数,可以用于处理颜色、数值和字符串等,同时你也可以定义自己的函数。

1.内置函数

Sass内置函数如darken()lighten()opacity()等,用于操作颜色值。

$base-color: #333;  .dark-text {  color: darken($base-color, 10%);  
}  .light-text {  color: lighten($base-color, 20%);  
}

2.自定义函数

你可以使用@function指令定义自己的Sass函数。

@function em($px) {  @return $px / 16 * 1em;  
}  h1 {  font-size: em(32); // 等同于 font-size: 2em;  
}

三、扩展/占位符

Sass的扩展(Extend)和占位符(Placeholder)功能,可以帮助你避免重复编写相同的样式代码。

1.扩展(@extend)

@extend允许你共享一组CSS属性的选择器。

.message {  border: 1px solid #ccc;  padding: 10px;  color: #333;  
}  .success {  @extend .message;  border-color: green;  
}  .error {  @extend .message;  border-color: red;  
}

2.占位符(%)

占位符类似于类选择器,但它不会直接输出到CSS中,只有当它被@extend时才会被渲染。

%ir {  display: inline-block;  background-color: transparent;  border: none;  padding: 0;  /* ... */  
}  button {  @extend %ir;  font-size: 1rem;  /* ... */  
}

四、Map数据结构

Sass支持Map数据结构,它允许你存储键值对,并通过键来访问对应的值。

1、map-get

 
$font-sizes: (  xsmall: 12px,  small: 14px,  medium: 16px,  large: 18px,  xlarge: 20px  
);  h1 {  font-size: map-get($font-sizes, large);  
}

2、map-merge

map-merge是Sass中的一个函数,用于将两个map(映射)合并成一个新的map。Sass中的映射表示一个或多个键值对,并且是不可改变的。因此,map-merge函数会返回一个新的map,而不会更改原始的map。

具体来说,如果你有两个map,你可以使用map-merge函数将它们合并为一个map。在合并过程中,如果两个map中存在相同的键,那么新map中的值将是第二个map中对应键的值,因为它会覆盖第一个map中的值。

$map1: (  key1: value1,  key2: value2  
);  $map2: (  key2: value3,  key3: value4  
);  $mergedMap: map-merge($map1, $map2);  // 输出:$mergedMap 为 (key1: value1, key2: value3, key3: value4)

五、使用@import合并文件

Sass允许你使用@import指令来导入其他Sass文件,这样可以更好地组织你的样式代码。

// styles.scss  
@import 'partials/variables';  
@import 'partials/mixins';  
@import 'partials/reset';  
@import 'partials/layout';  
@import 'partials/modules';

以上只是Sass高级用法的一部分,Sass还提供了更多强大的功能,如颜色运算、选择器嵌套等。掌握这些高级用法将使你在编写样式时更加得心应手,提高代码的可读性和可维护性。通过不断地实践和学习,你可以发掘Sass的更多潜力,并将其应用于实际项目中,创造出更加美观和高效的界面。

下面我们来列举几个实战例子,实战才是快速学习的捷径。

例子

需求1:我们需要在每个标题前添加不同颜色的小方块作为无序列表的原点。如图所示

常规做法:

.icon {&::before {content: '';width: 8px;height: 8px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
}.color-icon-1 {background: #0096ff;
}.color-icon-2 {background: #ffcc00;
}.color-icon-3 {background: #00ffff;
}.color-icon-4 {background: #ff6363;
}.color-icon-5 {background: #00ccff;
}.color-icon-6 {background: #483B3B;
}

使用时就是 <p class="color-icon-1 icon" />,这种写法极其不优雅,并且定义的样式也冗余。

下面使用Sass > (@each, @mixin)进行二次封装

  • @each: 类似用JS中的for循环
  • @mixin: 利用mixin创建的函数需使用@include注入
@mixin screenBefore($color,$width: 0.13rem,$height: 0.13rem
) {&::before {content: '';width: $width;height: $height;position: absolute;top: 50%;left: 0;transform: translateY(-50%);background: $color;}
}
$colors: (1:#0096ff,2:#ffcc00,3:#00ffff,4:#ff6363,5:#00ccff,6:#483B3B);@each $colorIndex, $colorValue in $colors {.color-icon-#{$colorIndex} {@include screenBefore($colorValue )}}

是不是有写JS的既视感?

多参则利用列表去作为参数

$alarm-colors: (1:(#d9001b, 0.17rem, 0.17rem),2:(#8a00e1, 0.17rem, 0.17rem),3:(#34d160, 0.17rem, 0.17rem),4:(#00c6ff, 0.17rem, 0.17rem),5:(#d9001b, 0.15rem, 0.15rem),6:(#8a00e1, 0.15rem, 0.15rem),7:(#34d160, 0.15rem, 0.15rem),8:(#00c6ff, 0.15rem, 0.15rem));@each $colorIndex, $colorValue in $alarm-colors {$color: nth($colorValue, 1);$width: nth($colorValue, 2);$height: nth($colorValue, 3);.screen-alarm-list-#{$colorIndex} {@include screenBefore($color,$width,$height)}}

}

需求二、利用map_merge实现主题的切换

现有两个颜色map的键值对文件

// theme-default
$theme-default {colorPrimary: #FFF
}// theme-blue
$theme-blue {colorPrimary: blue
}// 主要color-map
$themes: map_merge($theme-default, $theme-blue);

下面使用高级用法,列举一个全局注入主题样式的详细过程

1、首先定义一个高阶Sass插槽处理函数。

@mixin generateThemeContent($name, $theme) {$globalTheme: $theme !global;$globalThemeName: $name !global;@if (str_length($name)>0) {.theme-#{$name} {@content;}} @else {html {@if ($generate_default) {@content;}}}
}

2、其次在Sass主入口文件中定义全局Mixin


@import './blue.scss'; // $theme-blue
@import './default.scss'; // $theme-default$themes: map_merge($theme-default, $theme-blue);
$generate_default: true; // 触发插槽判断@mixin theme {@each $curThemeName, $curTheme in $themes {@include generateThemeContent($curThemeName, $curTheme) {@content;}}
}

拿Vue为例子,在其vue.config.js配置中找到css配置如下:

css: {sourceMap: false,loaderOptions: {sass: {prependData: `@import "src/styles/theme/global-import.scss";` // 在 sass-loader v8 中,这个选项名是 "prependData"}}},

项目用法:

<style lang="scss" scoped>
@include theme {// 这里可以尽情用主题中定义的变量
}
</style>

用好Sass/Less等这类的处理器,确实能大大减少我们的重复编写样式的工作用,并且增加可读性,更贴切逻辑性编写。

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

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

相关文章

STM32学习笔记(6_5)- TIM定时器的输出捕获原理

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 现在开…

ASR-LLM-TTS 大模型对话实现案例;语音识别、大模型对话、声音生成

参考:https://blog.csdn.net/weixin_42357472/article/details/136305123(llm+tts) https://blog.csdn.net/weixin_42357472/article/details/136411769 (asr+vad) 这里LLM用的是chatglm;电脑声音播报用的playsound 代码: ##运行 python main.pymain.py from multipro…

mac电脑下安装和启动nginx

一,安装homebrew 必须安装了homebrew&#xff0c;可在终端输入命令brew -v查看是否已经安装,没安装的话安装一下: 如果未安装先安装&#xff08;网上很多文章&#xff09; 二,查看nginx是否存在 使用命令:brew search nginx查看nginx是否存在: 不存在的话,就使用brew inst…

mac 系统如何生成秘钥

1.打开终端&#xff0c;输入 cd ~/.ssh 进入.ssh目录&#xff0c;输入 ls 检查是否已经存在SSH密钥。如果看到类似 id_rsa.pub 的文件&#xff0c;说明已经有一对公钥和私钥&#xff0c;不用新建&#xff0c;直接查看就可以&#xff0c;如果没有需要生成新的密钥。 2.在终端输…

(三)Qt+OpenCV调用海康工业相机SDK抓拍示例

系列文章目录 提示&#xff1a;这里是该系列文章的所有文章的目录 第一章&#xff1a; &#xff08;一&#xff09;QtOpenCV调用海康工业相机SDK示例开发 第二章&#xff1a; &#xff08;二&#xff09;Qt多线程实现海康工业相机图像实时采集 第三章&#xff1a; &#xff08;…

许可型DeFi 项目NEOPIN:在合规的框架下推动DeFi的创新

合规化已成 DeFi 的主流方向 过去的几年里&#xff0c;全球金融市场见证了 DeFi 的快速增长。DeFi 通过提供无需中介的交易和借款等金融服务&#xff0c;为用户带来前所未有的便利。然而&#xff0c;其匿名性和去中心化的特性也为监管和安全带来挑战 —— DeFi项目的透明度不足…

C#自定义控件 生成 与 加入到项目

C#自定义控件生成 在C#中&#xff0c;自定义控件通常是通过继承现有的控件类&#xff08;如UserControl、Form等&#xff09;并添加或修改其属性和方法来实现的。以下是一个简单的示例&#xff0c;演示如何创建一个自定义控件&#xff1a; 首先&#xff0c;创建一个新的Window…

荟萃分析R Meta-Analyses 1

参考&#xff1a;Harrer, M.、Cuijpers, P.、Furukawa, TA 和 Ebert, DD (2021)。 使用 R 进行荟萃分析&#xff1a;实践指南。佛罗里达州博卡拉顿和伦敦&#xff1a;Chapman & Hall/CRC Press。 ISBN 978-0-367-61007-4。 1.1什么是荟萃分析&#xff1f; 它的创始人之一 G…

电脑如何更新AMD独立显卡驱动?安装官方驱动的方法来了!

前言 有小伙伴在电脑上安装了独立显卡之后&#xff0c;总会用驱动人生或者驱动精灵等软件给独立显卡安装驱动。这种安装方法并不能说是错的&#xff0c;反正能用就行。 安装官方驱动的办法其实很简单&#xff0c;现在独立显卡一共就那么几家&#xff0c;最常见的显卡就是Nvidi…

我们是如何在 IDE 中设计 AutoDev 的 AI 编程开发智能体语言与框架?

上周微软发布了自家的 AI 编程和软件开发智能体框架&#xff1a;AutoDev&#xff0c;其与我们开发的 IDE 插件 AutoDev 有颇多的相似之处&#xff0c;特别是一些设计思路&#xff0c;以及在对于辅助软件开发任务的智能体以及一些基础设施上。 稍有不同的是&#xff1a; 交互介质…

随手笔记——禾赛Pandar64雷达旋转方向及坐标系定义

随手笔记——禾赛Pandar64雷达旋转方向及坐标系定义 手册下载

Maven学习记录

一、简介 1. Maven&#xff1a; 基于 Java 平台的项目管理和整合工具&#xff0c;将项目的开发和管理过程抽象成一个项目对象模型&#xff08;POM&#xff09;。开发人员只需要做一些简单的配置&#xff0c;Maven 就可以自动完成项目的编译、测试、打包、发布以及部署等工作。…

【NLP学习记录】Embedding和EmbeddingBag

Embedding与EmbeddingBag详解 ●&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客 ●&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 ●&#x1f680; 文章来源&#xff1a;K同学的学习圈子1、Embedding详解 Embedding是Pytorch中最基本…

备考ICA----Istio实验8---请求超时 Request Timeouts 实验

备考ICA----Istio实验8—请求超时 Request Timeouts 实验 1. 重置bookinfo环境 kubectl delete all --all --now kubectl delete dr --all kubectl delete vs --all kubectl delete gw --all kubectl apply -f istio/samples/bookinfo/platform/kube/bookinfo.yaml kubectl a…

STM32-01基于HAL库(CubeMX+MDK+Proteus)仿真开发环境搭建(LED点亮测试实例)

STM32-01基于HAL库&#xff08;CubeMXMDKProteus&#xff09;仿真开发环境搭建&#xff08;LED点亮测试实例&#xff09; 一、 开发工具版本列表二、安装过程三、实例测试&#xff08;点亮单个LED&#xff09;0、功能需求分析1、Proteus绘制电路原理图2、STMCubeMX 配置引脚及模…

微服务day07 -- 搜索引擎 ( 数据聚合 + 自动补全 + 数据同步 + ES集群 )

1.数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f; 这些手机的平均价格、最高价格、最低价格&#xff1f; 这些手机每月的销售情况如何&#xff1f; 实现这些…

【C语言基础】:内存操作函数

文章目录 一、memcpy函数的使用和模拟实现1.1 memcpy函数的使用1.2 memcpy函数的模拟实现 二、memmove函数的使用和模拟实现2.1 memmove函数的使用2.2 memmove函数的模拟实现 三、memset函数的使用3.1 menset函数的使用 四、memcmp函数的使用4.1 memcmp函数的使用 学海无涯苦作…

Prompt提示工程上手指南:基础原理及实践(四)-检索增强生成(RAG)策略下的Prompt

前言 此篇文章已经是本系列的第四篇文章&#xff0c;意味着我们已经进入了Prompt工程的深水区&#xff0c;掌握的知识和技术都在不断提高&#xff0c;对于Prompt的技巧策略也不能只局限于局部运用而要适应LLM大模型的整体框架去进行改进休整。较为主流的LLM模型框架设计可以基…

图解Kafka架构学习笔记(二)

kafka的存储机制 https://segmentfault.com/a/1190000021824942 https://www.lin2j.tech/md/middleware/kafka/Kafka%E7%B3%BB%E5%88%97%E4%B8%83%E5%AD%98%E5%82%A8%E6%9C%BA%E5%88%B6.html https://tech.meituan.com/2015/01/13/kafka-fs-design-theory.html https://feiz…

web前端之罗盘时钟、不一样的补零方式、LED字体、padStart

MENU 效果图htmlJavaScriptstyle 效果图 html <div class"clock"><div class"second-box"></div><div class"minute-box"></div><div class"hour-box"></div><div class"day-box&…