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

SCSS的基本用法

1、声明变量 $

声明变量的符号 $

下面这张图左半部分是scss的语法,右半部分是编译后的css。(整篇文章皆是如此)

2、默认变量 !default

sass 的默认变量仅需要在值后面加上 !default 即可。

如果分配给变量的值后面添加了 !default 标志 ,这意味着该变量如果已经赋值,那么它不会被重新赋值,但是,如果它尚未赋值,那么它会被赋予新的给定值。

上述例子因为变量$color已经被赋值为 666 ,所以后来再给它赋默认值时不会影响它原来的值, 666,所以后来再给它赋默认值时不会影响它原来的值, 666,所以后来再给它赋默认值时不会影响它原来的值,color的值仍然是$666。

3、变量调用

直接调用即可。变量声明时也可直接调用已声明的变量

4、局部变量和全局变量

在元素内部定义的变量不会影响其他元素

5、嵌套

5.1、选择器嵌套

Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点

假如有这么一个结构:

<header>
<nav><a href=“##”>Home</a><a href=“##”>About</a><a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签,在写 CSS 会这样写:

nav a {color:red;
}header nav a {color:green;
}

那么在 Sass 中,就可以使用选择器的嵌套来实现:

nav {a {color: red;header & {color:green;}}  
}

5.2、属性嵌套

Sass 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了:

.box {border-top: 1px solid red;border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写:

.box {border: {top: 1px solid red;bottom: 1px solid green;}
}

5.3、伪类嵌套

借助 &

6、混合宏

如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的。但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。

6.1、声明

6.1.1、不带参数混合宏

在 Sass 中,使用“ @mixin ”来声明一个混合宏。如:

@mixin border-radius{-webkit-border-radius: 5px;border-radius: 5px;
}

其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

6.1.2、带参数混合宏

除了声明一个不带参数的混合宏之外,还可以在定义混合宏时带有参数,如:

@mixin border-radius($radius:5px){-webkit-border-radius: $radius;border-radius: $radius;
}

6.2、调用

在 Sass 中通过 @mixin 关键词声明了一个混合宏,那么在实际调用中,其匹配了一个关键词“ @include ”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:

@mixin border-radius{-webkit-border-radius: 3px;border-radius: 3px;
}

在一个按钮中要调用定义好的混合宏“border-radius”,可以这样使用:

button {@include border-radius;
}

这个时候编译出来的 CSS:

button {-webkit-border-radius: 3px;border-radius: 3px;
}

6.3、混合宏的参数

Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形:

6.3.1、 传一个不带值的参数

在混合宏中,可以传一个不带任何值的参数,比如:

@mixin border-radius($radius){-webkit-border-radius: $radius;border-radius: $radius;
}

在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值:

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

这里表示给混合宏传递了一个“border-radius”的值为“3px”。

编译出来的 CSS:

.box {-webkit-border-radius: 3px;border-radius: 3px;
}

6.3.2、传一个带值的参数

在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如:

@mixin border-radius($radius:3px){-webkit-border-radius: $radius;border-radius: $radius;
}

在混合宏“border-radius”传了一个参数“$radius”,而且给这个参数赋予了一个默认值“3px”。

在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只需要调用默认的混合宏“border-radius”:

.btn {@include border-radius;
}

编译出来的 CSS:

.btn {-webkit-border-radius: 3px;border-radius: 3px;
}

但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如:

.box {@include border-radius(50%);
}

编译出来的 CSS:

.box {-webkit-border-radius: 50%;border-radius: 50%;
}

6.4、混合宏的不足

混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如:

@mixin border-radius{-webkit-border-radius: 3px;border-radius: 3px;
}.box {@include border-radius;margin-bottom: 5px;
}.btn {@include border-radius;
}

示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS:

.box {-webkit-border-radius: 3px;border-radius: 3px;margin-bottom: 5px;
}.btn {-webkit-border-radius: 3px;border-radius: 3px;
}

上例明显可以看出,Sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

7、扩展/继承

在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。如下所示:

// SCSS
.btn {border: 1px solid #ccc;padding: 6px 10px;font-size: 14px;
}.btn-primary {background-color: #f36;color: #fff;@extend .btn;
}.btn-second {background-color: orange;color: #fff;@extend .btn;
}

编译出来之后:

// CSS
.btn, .btn-primary, .btn-second {border: 1px solid #ccc;padding: 6px 10px;font-size: 14px;
} // 合并到了一起.btn-primary {background-color: #f36;color: #fff;
}.btn-second {background-clor: orange;color: #fff;
}

从示例代码可以看出,在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器。

8、占位符 % placeholder

它可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。来看一个演示:

%mt5 {margin-top: 5px;
}
%pt5{padding-top: 5px;
}

这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码:

// SCSS
%mt5 {margin-top: 5px;
}
%pt5{padding-top: 5px;
}.btn {@extend %mt5;@extend %pt5;
}.block {@extend %mt5;span {@extend %pt5;}
}

编译出来的CSS

// CSS
.btn, .block {margin-top: 5px;
}.btn, .block span {padding-top: 5px;
}

从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。

相关文章:

SCSS的基本用法

1、声明变量 $ 声明变量的符号 $ 下面这张图左半部分是scss的语法&#xff0c;右半部分是编译后的css。&#xff08;整篇文章皆是如此&#xff09; 2、默认变量 !default sass 的默认变量仅需要在值后面加上 !default 即可。 如果分配给变量的值后面添加了 !default 标志…...

alertmanager创建nginx-ingress basic auth鉴权

步骤 生成密码 printf "admin:$(openssl passwd -crypt xxxxxx)\n" >> auth 创建新的 Kubernetes 密钥 kubectl create secret generic basic-auth --from-file auth -n victoria-metrics 修改 ingress 以使用 secret 中的凭证来实现基本身份验证 编辑 P…...

系列六、Redis中的五大数据类型及相关操作

一、五大数据类型 String类型、List类型、Set类型、ZSet类型、hash类型。 二、String类型 2.1、内存储存模型 2.2、常用操作命令 三、List类型 3.1、概述 list列表&#xff0c;相当于Java中的list集合。特点&#xff1a;元素有序 且 可以重复。 3.2、内存存储模型 3.3、常用…...

四大运营商的大流量卡测评,看完您会选哪个运营商?

很多朋友都说网上的流量卡资费是真的便宜&#xff0c;但是小编认为资费便宜归便宜&#xff0c;但是运营商的小心思也有不少。 ​ 今天小编就带大家看一看三大运营商推出的正规流量卡都有哪些小心思&#xff1f; 首先&#xff0c;移动推出的线上大流量卡数量是最少的&#xff…...

Apache-Maven

安装Maven 解压apache-maven到目录下 Maven目录如下 bin&#xff1a;目录中存放的是可执行文件&#xff0c;JAVA项目中的编译执行打包都要使用bin. conf:存放的是Maven的配置文件&#xff0c;本地配置、私服配置都需要在conf下的settings.xml进行配置。 lib下存放的是Maven所…...

什么是原子交换?

安全地在各个区块链网络之间传输资产对于释放被困流动性并吸引更多用户进入这一领域至关重要&#xff0c;同时也保持 Web3 的信任最小化核心价值。原子交换是一种让两个人在不依赖于中介来促成交易的情况下&#xff0c;在不同的区块链网络之间交换通证资产的方式。这为 DeFi 用…...

java springboot word文档转pdf

java springboot word文档转pdf 1、环境2、依赖3、代码 1、环境 1、java、springboot 2、maven或者gradle 3、办公软件&#xff08;自己电脑上的wps或者office等&#xff0c;如果部署到服务器上也要安装&#xff0c;linux、Mac 都有&#xff0c;自己安装&#xff09; 可能会遇…...

【Leetcode Sheet】Weekly Practice 2

Leetcode Test 1281 整数的各位积和之差(8.9) 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 提示&#xff1a; 1 < n < 10^5 【原始代码】&#xff1a; int subtractProductAndSum(int n){//1 < n < 10^5//…...

【BERTopic应用 03/3】:微调参数

一、说明 一般来说&#xff0c;BERTopic 在开箱即用的模型中工作得很好。但是&#xff0c;当您有数百万个数据要处理时&#xff0c;使用基本模型处理数据可能需要一些时间。在这篇文章中&#xff0c;我将向您展示如何微调BERTopic中的一些参数并比较它们的结果。让我们潜入。 二…...

2023年上半年数学建模竞赛题目汇总与难度分析

2023年上半年数学建模竞赛题目汇总与难度分析 ​由于近年来国赛ABC题出题方式漂浮不定&#xff0c;没有太大的定性&#xff0c;目前总体的命题方向为&#xff0c;由之前的单一模型问题变为数据分析评价优化或者预测类题目是B、C题的主要命题方向。为了更好地把握今年命题的主方…...

Linux下搭建java环境

文章目录 一&#xff0c;xshell链接linux二&#xff0c;linux安装jdk环境 一&#xff0c;xshell链接linux 这里用到的工具,VMware搭配CentOS7 64位Xshell5 操作之前确保,传输Xshell连接了虚拟机 打开Xshell,文件->新建 主机ip—>进入虚拟机,右键打开终端,输入命令:ifco…...

String、StringBuffer、StringBuilder三者的异同?

String字符串 不可变的字符序列在 jdk1.8&#xff0c;我们底层用 char [ ] 存储在 jdk 17&#xff0c;我们底层用 byte [ ] 存储 StringBuffer字符串缓冲区类 可变的字符序列&#xff0c;线程安全的&#xff08;synchronized&#xff09;&#xff0c;效率低在 jdk1.8&#xf…...

htmlCSS-----弹性布局案例展示

目录 前言 效果展示 ​编辑 代码 思路分析 前言 上一期我们学习了弹性布局&#xff0c;那么这一期我们用弹性布局来写一个小案例&#xff0c;下面看代码&#xff08;上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客&#xff09; 效果展示 代码 html代码&am…...

Fiddler模拟请求发送和修改响应数据

fiddler模拟伪造请求 方法一&#xff1a;打断点模拟HTTP请求 1、浏览器页面填好内容后&#xff08;不要操作提交&#xff09;&#xff0c;打开fiddler&#xff0c;设置请求前断点&#xff0c;点击菜单fiddler,”Rules”\”Automatic Breakpoints”\”Before Requests” 2、在…...

RH850从0搭建Autosar开发环境【23】- Davinci Configurator之DCM实操实现DID的读取写入

配置DID 一、Developer中创建SWC1.1 创建Application Component Type1.2 实例化Component二、在SWC中创建接口以及Runnable2.1 创建DID的Service Ports2.2 创建DID的Service Runnable三、在Configurator连接接口以及生成代码3.1 连接DCM与SWC3.2 生成RTE3.3 生成SWC的DID的模板…...

ChatGPT收录

VSCode插件-ChatGPT 多磨助手 多磨助手 (domore.run) Steamship Steamship 免费合集 免费chatGPT - Ant Design Pro 免费AI聊天室 (xyys.one)...

Nginx随笔

Nginx下载链接 安装命令&#xff1a; apt update apt install nginx 一、基础命令&#xff08;Ubuntu&#xff09; 1、在全局 nginx -t //检查Nginx的配置文件是否有错 systemctl start nginx //启动Nginx systemctl stop nginx //停止Nginx systemctl status nginx //查…...

61. 旋转链表

61. 旋转链表 题目-中等难度示例1. 快慢指针找到分割位置2. 连成环后截断 题目-中等难度 相关企业 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出…...

Python实现动态调用Matlab自定义函数

首先需要下载与python版本对应的matlab&#xff0c;并成功执行matlab中的setup.py文件 参考流程如下 https://blog.csdn.net/s1k9y9/article/details/127793053 完成上述步骤即可开始实现动态调用matlab文件。 文件目录如下 D://call/ |–matlab |–test1 |–main.m |–test2 |…...

redis集群和分片-Redis Cluster:分布式环境中的数据分片、主从复制和 Sentinel 哨兵

当涉及到 Redis 中的集群、分片、主从复制和 Sentinel 哨兵时&#xff0c;这些是构建分布式 Redis 环境中非常重要的概念和组件。下面详细介绍这些概念以及它们在分布式环境中的作用。 Redis Cluster Redis Cluster 是 Redis 官方提供的分布式解决方案&#xff0c;用于管理和…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

Python学习(8) ----- Python的类与对象

Python 中的类&#xff08;Class&#xff09;与对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心。我们可以通过“类是模板&#xff0c;对象是实例”来理解它们的关系。 &#x1f9f1; 一句话理解&#xff1a; 类就像“图纸”&#xff0c;对…...