当前位置: 首页 > news >正文

Sass的使用要点

Sass 是一个 CSS 预处理器,完全兼容所有版本的 CSS。实际上,Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码,节省开发时间。

一、注释

方式一:双斜线 //

方式二:css方式    /*  */

PS:当 Sass 编译成CSS时,第一种注释不会编译到CSS中(只在Sass文件中可见),第二种注释会编译到CSS中

二、嵌套

1、使编码更简洁清晰:

在CSS中,如果想为其父元素的继承元素定义样式,就必须每次都选择父元素:

html, body {height: 100%;
}html #root, body #root {height: 100%;
}html .div-with-button, body .div-with-button {background-color: black;
}html .div-with-button button, body .div-with-button button {background-color: #e4c681;
}html .div-with-button button:hover, body .div-with-button button:hover {background-color: #ffe082;
}

Sass相对而言就更简洁:

html, body {height: 100%;#root {height: 100%;}.div-with-button {background-color: black;button {background-color: #e4c681;&:hover {background-color: #ffe082;}}}
}

2、在嵌套中使用 &

& 总是指向它上面的元素,可以用于伪类伪元素

sasscss
 .box {
  &:focus{} 
  &:hover{}
  &:active{}
  &:first-child{} 
  &:nth-child(2){}
  &::after{} 
  &::before{} 
}
.box:focus{} 
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{}
.box::before{}

css:

button {background-color: #535353;color: #000;
}
button:hover {background-color: #000;color: #fff;
}

sass:

button {background-color: #535353;color: #000;&:hover {background-color: #000;color: #fff;}
}

3、多个类名以相同的词开头的嵌套

如果多个类名以相同的词开头(比如box-yellowbox-red),就可以嵌套它们:

.box {&-yellow {background: #ff6347;}&-red {background: #ffd700;}&-green {background: #9acd32;}
}

CSS:

.box-yellow {background: #ff6347;
}
.box-red {background: #ffd700;
}
.box-green {background: #9acd32;
}

4、用冒号嵌套属性

当样式包含多个属性时,就可以将该样式写成类似对象的样子,降属性都包裹在{}里,不用单独写每个样式

sass:

add-icon {background : {image: url("./assets/arrow-right-solid.svg");position: center center;repeat: no-repeat;size: 14px 14px;}
}

css:

.add-icon {background-image: url("./assets/arrow-right-solid.svg");background-position: center center;background-repeat: no-repeat;background-size: 14px 14px;
}

PS:在编写Sass时,嵌套不要太深,尽量不要超过三层,超过之后就会导致代码难以维护,并且在编译为CSS时就会出现不必要的选择器,就会导致CSS文件变大

三、变量

在Sass中,我们可以将任何有效的CSS值保存在变量中。变量使用$符号定义。

定义变量:

$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;$font-p: 13px;
$font-h1: 28px;$base-font: 'Noto Sans KR', sans-serif;

使用变量:

body {background-color : $bg-color;font-size : $font-p;font-family : $base-font;
}h1 {font-size: $font-h1;color: $black;
}p {font-size: $font-p;color: $black;
}a {color: $link-color;
}

当Sass编译成CSS时,所有的变量都会被替换为定义的变量值。变量可以减少重复、进行复杂的数学运算等。

CSS变量是有范围的,位于顶层的变量都是全局变量,在块中定义的变量都是局部变量。全局变量可以在任何地方使用,局部变量只能在变量定义的块中使用。

$my-global-variable: "global";div {$my-local-variables: "local";
}

变量值是可以覆盖

要想改变全局变量,就需要添加!global修饰符

Sass变量可以指定默认值,带有 !default 的变量只有在没有值的情况下才会生效:

$message-color: blue !default;.message {color: $message-color;
}

可以在 @import 之前覆盖模块默认值

sass:
$message-color: black;
@import 'my-module';.message {color: $message-color;
}css:
p.message {color: black;
}

四、Mixins 和  Include

mixin 是一组可以重用的 CSS 声明,语法类似于JavaScript中的函数,使用 @mixin 指令来代替 function 关键字。调用 mixin 是通过 @include 语句完成的。

mixins 使元素水平垂直居中的方法:

@mixin absolute-center() {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}.element {@include absolute-center();
}

mixin支持传递参数:

@mixin square($size) {width:$size;height:$size;
}
div {@include square(60px);background-color:#000;
}

参数可以是可选的,可选参数的定义和Sass变量的定义形式是一样的:

@mixin square($width: 50px) {width:$size;height:$size;
}

将 CSS 规则传递给 mixins,这些规则可以在使用 @content 的 mixin 中使用:

@mixin hover-not-disabled {&:not([disabled]):hover {@content;}
}
.button {border: 1px solid black;@include hover-not-disabled {border-color: blue;}
}/*这样mixin中的@content在编译后就会变成border-color: blue;
这样写有助于减少&:not([disabled]):hover部分的重复。*/

五、@import 和 @use

使用 @import 将文件分块并导入到一个父文件中:

@import 'normalize';

在使用@import时,所有变量、mixin 等都可以全局访问,因为一切都是全局的,所以库必须为其所有成员添加前缀以避免命名冲突。因此不建议使用 @import。

可以使用 @use 来代替,它的基本用法与@import 相同:

@use 'normalize';

使用 @use 导入的文件称为模块。要使用这些模块的 mixin 或变量,必须使用命名空间来调用它们。默认情况下,命名空间是文件名(不带扩展名)。

当 _ 被添加到 SCSS 文件的文件名前时,解析器知道它是一个部分文件并且它仅用于导入。导入时,_ 部分是可选的。注意,这里使用 src/colors 来导入 src/_colors.scss

@use 'src/colors';

可以使用 as 来使用自定义命名空间:

@use 'src/colors' as c;

六、算术运算符

在CSS中可以使用calc()进行数学计算,Sass 支持直接使用+、-、/、*、% 操作符对值和变量进行计算:

$content-width: 600px;
content {width:$content-width;
}
.inner-content {width: $content-width - 60px; 
}
.outer-content {width: $content-width + 60px;
}

七、流程控制

在 Sass 中有四种类型的流程控制规则:@if /@else@each@for 和@while

@if 和 @else 类似于 JavaScript 中的 if 和 else:

@mixin theme($is-dark: false) {@if $is-dark {}@else {}
}

@each 类似于 JavaScript 中的 for of

$sizes: 40px, 50px, 80px;
@each $size in $sizes {.icon-#{$size} {    /*#{$size} 表示法用于使用变量制作动态属性名称和选择器,这称为插值。*/font-size: $size;height: $size;width: $size;}
}

@for 类似于 JavaScript 中的 for 循环:

@for $i from 1 through 4 {.bubble-#{$i} {transition-delay: .3 * $i;}
}

@while(不常用)类似于 JavaScript 中的 while 循环。

八、继承、扩展

有时需要编写一个仅用于扩展的样式规则。在这种情况下,可以使用占位符选择器,它看起来像以 % 而不是 . 开头的类选择器。

%flex {display: flex;
}.some-class {height: 50%;background-color: black;
}%flex_with_color {@extend %flex;@extend .some-class;
}%button_styles {height: 50px;width: 200px;
}div {@extend %flex_with_color;button {@extend %button_styles;color: #424242;background-color: #d966fb;}
}

编译成css:

div {display: flex;
}.some-class, div {height: 50%;background-color: black;
}div button {height: 50px;width: 200px;
}div button {color: #424242;background-color: #d966fb;
}

九、媒体查询

body {article {p {font-size: 100%;color: black;padding: 10px;@media (max-width: 768px) {font-size: 150%;}}}
}css:body article p {font-size: 100%;color: black;padding: 10px;
}@media (max-width: 768px) {body article p {font-size: 150%;}
}

媒体查询是支持嵌套的,并将所有适用的查询与 and 运算符结合起来:

p {@media (max-width: 768px) {font-size: 150%; @media (orientation: landscape) {line-height: 75%; }}
}css: @media (max-width: 768px) {p {font-size: 150%;}
}@media (max-width: 768px) and (orientation: landscape) {p {line-height: 75%;}
}

相关文章:

Sass的使用要点

Sass 是一个 CSS 预处理器,完全兼容所有版本的 CSS。实际上,Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码,节省开发时间。 一、注释 方式一:双斜线 // 方式二:…...

计算机启动过程,从按下电源按钮到登录界面的详细步骤

1、背景 自接触计算机以来,一直困扰着我一个问题。当我们按下电脑的开机键后,具体发生了哪些过程呢?计算机启动的具体步骤是什么? 计算机启动过程通常分为五个步骤:电源自检、BIOS自检、引导设备选择、引导程序加载和…...

LeetCode 刷题之 BFS 广度优先搜索【Python实现】

1. BFS 算法框架 BFS:用来搜索 最短路径 比较合适,如:求二叉树最小深度、最少步数、最少交换次数,一般与 队列 搭配使用,空间复杂度比 DFS 大很多DFS:适合搜索全部的解,如:寻找最短…...

Hadoop01【尚硅谷】

大数据学习笔记 大数据概念 大数据:指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。 主要解决,海量数据的存储…...

Echarts 配置横轴竖轴指示线,更换颜色、线型和大小

第018个点击查看专栏目录本示例是描述如何在Echarts上配置横轴竖轴指示线,更换颜色、线型和大小。方法很简单,参考示例源代码。 文章目录示例效果示例源代码(共85行)相关资料参考专栏介绍示例效果 示例源代码(共85行&a…...

OpenAI 官方API Java版SDK,两行代码即可调用。包含GhatGPT问答接口。

声明:这是一个非官方的社区维护的库。 已经支持OpenAI官方的全部api,有bug欢迎朋友们指出,互相学习。 注意:由于这个接口: https://platform.openai.com/docs/api-reference/files/retrieve-content 免费用户无法使…...

SpringBoot 日志文件

(一)日志文件有什么用?除了发现和定位问题之外,我们还可以通过日志实现以下功能:记录用户登录日志,以便分析用户是正常登录还是恶意破解用户。记录系统的操作日志,以便数据恢复和定位操作 。记录程序的执行时间&#x…...

SQL71 检索供应商名称

描述Vendors表有字段供应商名称(vend_name)、供应商国家(vend_country)、供应商州(vend_state)vend_namevend_countryvend_stateappleUSACAvivoCNAshenzhenhuaweiCNAxian【问题】编写 SQL 语句,…...

02:入门篇 - 漫谈 CTK

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 十万个为什么 五千个在哪里?七千个怎么办?十万个为什么?。。。生活中,有很多奥秘在等着我们去思考、揭示! 同样地,在使用 CTK 时,很多小伙伴一定也存在诸多疑问: 为什么 CTK Plugin Framework 要借…...

SpringBoot常用注解

SpringBootApplication注解包含如下三个SpringBootConfigurationEnableAutoConfigurationComponentScanSpringBootConfiguration等同于Configuration,是属于spring的一个配置类这里的 Configuration 对我们来说并不陌生,它就是 JavaConfig 形式的 Spring…...

RBAC权限模型

什么是RBAC权限模型? RBAC是基于角色的访问控制,在RBAC中,权限与角色相关联,用户通过成为适当角色的成员而得到这些角色的权限。 1.0级 用户、角色、权限 2.0 权限分级 公司>部门>小组 2.1 权限继承 ps: 这个人是一个小组长…...

【郭东白架构课 模块一:生存法则】07|法则三:架构师如何找到自己的商业模式?

你好,我是郭东白,今天我们来聊聊架构活动中对商业价值的考量。 今天我们要讲的是架构师的第三个生存法则:作为一个架构师,必须要在有限的资源下最大化架构活动所带来的商业价值。对于任何一个架构活动而言,架构师的可…...

STM32 - 看门狗

独立看门狗 IWDG专业时钟LSI 低功耗仍可以运行对定时的控制比较松喂狗这些时间是按照40kHz时钟给出。实际上,MCU内部的RC频率会在30kHz到60kHz之间变化。此外,即使RC振荡器的频率是精确的,确切的时序仍然依赖于APB接口时钟与RC振荡器时钟之间…...

Redis集群搭建

一、哨兵模式 在 redis3.0之前,redis使用的哨兵架构,它借助 sentinel 工具来监控 master 节点的状态;如果 master 节点异常,则会做主从切换,将一台 slave 作为 master。 哨兵模式的缺点: (1&…...

车载基础软件——AUTOSAR AP典型应用案例

我是穿拖鞋的汉子,魔都中一位坚持长期主义的工程师! 最近不知道为何特别喜欢苏轼的一首词: 缺月挂疏桐,漏断人初静。谁见幽人独往来,缥缈孤鸿影。 惊起却回头,有恨无人省。拣尽寒枝不肯栖,寂寞…...

消息中间件----内存数据库 Redis7(第3章 Redis 命令)

Redis 根据命令所操作对象的不同,可以分为三大类:对 Redis 进行基础性操作的命令,对 Key 的操作命令,对 Value 的操作命令。3.1 Redis 基本命令首先通过 redis-cli 命令进入到 Redis 命令行客户端,然后再运行下面的命令…...

react-03-react-router-dom-路由

react-router-dom:react路由 印记中文:react-router-dom 1、路由原理 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>前端路由的基石_history</title> </head> <body><a hre…...

2自由度悬架LQR控制

目录 1 悬架系统 1.1 悬架结构示意图 1.2 悬架数学模型 1.3 路面激励 2.仿真分析 2.1simulink模型 2.2 仿真结果 2.3 结论 3. 总结 1 悬架系统 1.1 悬架结构示意图 1.2 悬架数学模型 其中&#xff1a;x1为悬架动扰度&#xff0c;x2为车身加速度&#xff0c;x3为轮胎…...

C语言返回类型为指针的一些经典题目(下)

续上一篇文章&#xff0c;上一篇文章题目都很经典&#xff0c;这一篇也不例外。一.返回类型为指针经典题目(下)1.代码(第六题)char *GetMemory3(int num) {char *p (char *)malloc(sizeof(char) * num);return p; } void Test3(void) {char *str NULL;str GetMemory3(100…...

OpenAI 官方api 阅读笔记

网站 API Key concepts Prompts and completions You input some text as a prompt, and the model will generate a text completion that attempts to match whatever context or pattern you gave it. Token  模型通过将文本分解成token来理解和处理, 处理token数量取…...

微服务项目【分布式锁】

创建Redisson模块 第1步&#xff1a;基于Spring Initialzr方式创建zmall-redisson模块 第2步&#xff1a;在zmall-redisson模块中添加相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</a…...

JavaWeb5-线程常用属性

目录 1.ID 2.名称 3.状态 4.优先级 5.是否守护线程 5.1.线程类型&#xff1a; ①用户线程&#xff08;main线程默认是用户线程&#xff09; ②守护线程&#xff08;后台/系统线程&#xff09; 5.2.守护线程作用 5.3.守护线程应用 5.4.守护线程使用 ①在用户线程&am…...

JVM调优及垃圾回收GC

一、说一说JVM的内存模型。JVM的运行时内存也叫做JVM堆&#xff0c;从GC的角度可以将JVM分为新生代、老年代和永久代。其中新生代默认占1/3堆内存空间&#xff0c;老年代默认占2/3堆内存空间&#xff0c;永久代占非常少的对内存空间。新生代又分为Eden区、SurvivorFrom区和Surv…...

JAVA练习53-打乱数组

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、题目-打乱数组 1.题目描述 2.思路与代码 2.1 思路 2.2 代码 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 2月17日练习内…...

基于RK3588的嵌入式linux系统开发(三)——Uboot镜像文件合成

本章uboot镜像文件的合成包括官网必备文件rkbin下载和uboot镜像文件合成两部分内容&#xff0c;具体分别如下所述。 &#xff08;一&#xff09;下载rkbin文件包 以上uboot编译生成的uboot镜像不能直接烧录到板卡中运行&#xff0c;需要与atf、bl31、ddr配置文件等必备文件合成…...

wireshark抓包后通过工具分包

分包说明&#xff1a;关于现场问题分析&#xff0c;一般都是通过日志&#xff0c;这个属于程序中加的打印&#xff0c;或存数据库&#xff0c;或者存文本形式&#xff0c;这种一般比较符合程序逻辑&#xff1b;还有一种就是涉及到网络通信方面的&#xff0c;需要通过抓包来分析…...

举个栗子~Tableau 技巧(251):统一多个工作表的坐标轴范围

在工作汇报场景&#xff0c;有一个很常见、很多数据粉反馈的需求&#xff1a;同一看板上的两个图表&#xff0c;因为轴范围不一致&#xff08;如下图&#xff09;&#xff0c;很难直观比较。有什么办法可以统一它们的坐标轴范围呢&#xff1f; 类似需求&#xff0c;不论两个还是…...

Centos7 调整磁盘空间

1. 查看磁盘空间占用情况&#xff1a; df -h 可以看到 /home 有很多剩余空间,占了绝大部分&#xff0c; 而我又很少把文件放在home下。 2. 备份 /home 下的内容&#xff1a; cp -r /home/ /homebak/ 3. 关闭home进程&#xff1a; fuser -m -v -i -k /home 报错: -bash: fuser…...

小菜版考试系统——“C”

各位CSDN的uu们你们好呀&#xff0c;今天&#xff0c;小雅兰的内容是小菜版考试系统&#xff0c;最近一直在忙C语言课程设计的事&#xff0c;那么&#xff0c;就请uu们看看我的学习成果吧。 课程设计任务 摘要 题目分析 流程图 关键程序代码 程序运行结果 结论与心得 参…...

Twitter被封号了?最详细的申诉教程在此

由于Twitter检测系统是十分敏感的&#xff0c;所以在运营的时候很容易莫名就出现“此账号被封禁”或者“此账号被冻结”的情况。出现这种情况大多是因为账号发送了垃圾信息、面临安全风险、发太多广告或者太久没上线被判为机器人这几个原因。被封号后&#xff0c;我们可以通过向…...

工作室网站建设/百度云盘官网

Apache Zeppelin是ASF的一个孵化项目&#xff0c;实现了基于web的在线代码编辑与数据可视化。有点类似Spark-Shell的REPL。其结果可以直接用图表来展示&#xff0c;解决了前端白痴的苦逼。Zeppelin官网我们可以直接下载 zeppelin-0.5.6-incubating-bin-all.tgz &#xff0c;然后…...

wordpress只有一个主题/软文写作300字

Android Api Guid 之App Components 笔记 -- 1 每个Android应用程序会被分给一个 linux帐号 usrer ID2 每个Android应用程序被分配一个 VM3 Application Component共四个组件&#xff1a;Activity : 参照博客有关 Activity生命周期的文章(<activity></activity>)Se…...

博客和网站有什么不同/深圳推广服务

如何连接到Oracle数据库&#xff1f;使用SQL * Plus连接Oracle数据库服务器SQL * Plus是交互式查询工具&#xff0c;我们在安装Oracle数据库服务器或客户端时会自动安装。SQL * Plus有一个命令行界面&#xff0c;允许您连接到Oracle数据库服务器并交互执行语句。注意&#xff1…...

网站域名注册流程/seminar怎么读

调试的时候遇到&#xff0c;按power按键无作用&#xff0c;但是硬件量的时候又没问题&#xff0c;而且信号能到底中断脚&#xff0c;检查发现是pmu的中断脚没有配置正确&#xff0c;导致按power按键的时候&#xff0c;中断无法被处理。 --- a/kernel/arch/arm64/boot/dts/rock…...

截屏的图片wordpress不能显示/深圳网站优化排名

在 Linux 系统中有几种文件编辑器&#xff0c;你可以根据需求选择合适的文件编辑器。在这里&#xff0c;我想推荐 Vim 编辑器。-- Magesh Maruthamuthu如果你是一名系统管理员或者开发者&#xff0c;当你在终端工作时有时会需要编辑一个文件。在 Linux 系统中有几种文件编辑器&…...

网站怎么做数据备份/广州网站建设方案维护

通过Web.config实现301重定向 IIS7以上可以通过修改Web.config实现IIS设置 现在我们通过Web.config实现301重定向 <system.webServer><validation validateIntegratedModeConfiguration"false" /><modules runAllManagedModulesForAllRequests"t…...