sass的用法

一、内置函数变亮和变暗颜色

内置函数:可以自动变化颜色

lightendarken 函数都是通过增加或者减小 HSL 中颜色的亮度来实现调节的。

$amount: 50%;

h1 {
    $color1: #000000;
    color: lighten($color1, $amount);
}

h2 {
    $color2: #ffffff;
    color: darken($color2, $amount);
}

二、列表(Lists)

列表就是 Sass 的数组。列表是一个一维的数据结构(不同于 maps),用于保存任意类型的数值(包括列表,从而产生嵌套列表)。

$font-stack: ('Helvetica', 'Arial', sans-serif);

三、Maps

$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

多个变量建议使用map,因为:最重要的优势就是 map 的遍历功能,这在多个不同变量中是不可能实现的。另一个支持使用 map 的原因,是它可以创建 map-get() 函数以提供友好 API 的功能。比如,思考一下下述 Sass 代码:

  • map-get(map,key)
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$z-indexes: (
  "modal": 5000,
  "dropdown": 4000,
  "default": 1,
  "below": -1
);

h1 {
    font-size: map-get($font-sizes, "small"); // 12px
    z-index: map-get($z-indexes, 'modal'); // 5000
}

四、变量的作用域标识符

  • !default:有利于开发者重写样式

  • !global:默认不写

!default

如果创建一个库、框架、栅格系统甚至任何的 Sass 片段,是为了分发经验或者被其他开发者使用,那么与之配置的所有变量都应该使用 !default 标志来定义,方便其他开发者重写变量。

// your-library
$baseline: 1em !default;

开发者才能在引入你的库之前定义自用的 $baseline,引入后又不必担心自己的值被重定义了。

// 开发者自己定义的变量来覆盖第三方库的样式
$baseline: 2em;
// 引入第三方库,当不加 !default 会默认覆盖第二行的变量
@import "your-library";

// 最后输出:$baseline == 2em;

!global:

!global 标志应该只在局部范围的全局变量被覆盖时使用。定义根级别的变量时,!global 标志应该省略。

$baseline: 2em;

五、扩展@Extend

@extend :它允许一个选择器继承另一个选择器的所有样式,从而减少重复代码并提高样式的可维护性。

例如:

sass代码

%button {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
}

.button-primary {
  @extend %button;
  background-color: blue;
  color: white;
}

编译后

.button-primary {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  background-color: blue;
  color: white;
}

📖知识点:使用 % 占位符类

  • %button 是一个占位符类,不会直接生成 CSS 代码。
  • 只有当它被 @extend 引用时,才会将它的样式应用到实际的选择器中。

六、混合(Mixin)

通过@mixin定义变量,@include使用变量,@content作占位

  • 无参混合
  • 含参混合

无参混合:

@mixin content {
  width: 100px;
  height: 100px;
  background-color: sandybrown
};

h1 {
  @include content;
}

含参混合:

  1. 用法1
@mixin content($width, $height, $color) {
  width: $width;
  height: $height;
  background-color: $color;
};

h1 {
  @include content(100px, 100px, #ff8c00);
}

也可以给默认值

@mixin content1($width: 100px, $height: 100px, $color: blue) {
  width: $width;
  height: $height;
  background-color: $color;
}

h2 {
  @include content1;
}
  1. 用法2

使用...将参数展开

@mixin content($width, $height, $color) {
  width: $width;
  height: $height;
  background-color: $color;
}

h1 {
  $params: (100px, 100px, #ff8c00);
  @include content($params...);
}

@content

通常用于在调用@mixin时插入传递的内容

@mixin myMixin {
    color: blue;
    @content;
}

.demo {
    @include myMixin {
        font-size: 20px;
    }
}

编译后:

.demo {
    color: blue;
    font-size: 20px;
}

七、条件语句

Sass 通过 @if@else 指令提供了条件语句

$flag: true;

@if $flag {
  h2 {
    color: blue;
  }
} @else {
  h2 {
    color: red;
  }
}

八、循环

  • @each
  • @for
1、@each

@each 循环绝对是 Sass 提供的三个循环方式中最常用的。它提供了一个简洁的 API 来迭代列表或 map。

  • 遍历list
$themes: (
  red,
  yellow,
  green,
  blue,
  purple
);
$prefix: 'my-theme';

@each $theme in $themes {
  .#{$prefix}-#{$theme} {
    background-color: $theme;
  }
}
  • #{} 语法:用于在 SCSS 中插入变量的值。
  • 动态生成类名:在选择器中使用 #{} 可以根据变量的值动态生成类名。
  • 避免字面字符串:不使用 #{} 时,变量会被当作字面字符串处理,而不是变量的值。

生成的结果为:

.my-theme-red {
  background-color: red;
}
.my-theme-yellow {
  background-color: yellow;
}
.my-theme-green {
  background-color: green;
}
.my-theme-blue {
  background-color: blue;
}
.my-theme-purple {
  background-color: purple;
}
  • 遍历map
$map: (
  'red': red,
  'yellow': yellow,
  'green': green,
  'blue': blue,
  'purple': purple
);

@each $key, $value in $map {
  .section-#{$key} {
    background-color: $value;
  }
}
2、@for

当需要聚合伪类 :nth-* 的时候,使用 @for 循环很有用。除了这些使用场景,如果必须迭代最好还是使用 @each 循环。

@for $i from 1 through 10 {
  .item:nth-of-type(#{$i}) {
    color: hsl($i * 36, 50%, 50%);
  }
}

编译后:

.item:nth-of-type(1) {
  color: hsl(36, 50%, 50%);
}

.item:nth-of-type(2) {
  color: hsl(72, 50%, 50%);
}

.item:nth-of-type(3) {
  color: hsl(108, 50%, 50%);
}

.item:nth-of-type(4) {
  color: hsl(144, 50%, 50%);
}

.item:nth-of-type(5) {
  color: hsl(180, 50%, 50%);
}

.item:nth-of-type(6) {
  color: hsl(216, 50%, 50%);
}

.item:nth-of-type(7) {
  color: hsl(252, 50%, 50%);
}

.item:nth-of-type(8) {
  color: hsl(288, 50%, 50%);
}

.item:nth-of-type(9) {
  color: hsl(324, 50%, 50%);
}

.item:nth-of-type(10) {
  color: hsl(360, 50%, 50%);
}

九、函数

1、基本使用
$width1: 10px;
$width2: 40px;

@function widthFn($n) {
  @return $n * $width1 + ($n - 1) * $width2; // 5 * 10px + (4 * 40px) = 210px
}

.leng {
  width: widthFn(5);
}
2、内置函数

sass的内置函数就如同js的对象原型上的方法一样,下面列举两个:

percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式

/*
错误写法,不能带单位
percentage(2px / 10px)
*/

div {
	width:percentage(.2);
}
round()

round()函数将一个数四舍五入为一个最接近的整数,在round()函数中可以携带单位的任何数值。

div {
    width: round(12.5px); // 13px
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Deepin/Linux clash TUN模式不起作用,因网关导致的问题的解决方案。

网关导致的问题的解决方案 查看路由 ip route寻找默认路由 默认路由应当为Mihomo default dev Mihomo scope link 如果不是,则 sudo ip route add default dev Mihomo在clash TUN开关状态发生变化时,Mihomo网卡会消失,所以提示找不到网卡…

malloc 分配大堆块(128KB)的一次探索

前言 一次意外执行了 malloc(0x5000)&#xff0c;结构使用 gdb 调试发现其分配的位置在 TLS 区域&#xff0c;这令我不解&#xff08;&#xff1a;最后去看了下 malloc 源码和 mmap 源码实现&#xff0c;发现似乎可能是 gdb 插件的问题&#xff0c;乐 场景复现 #include <…

大数据机器学习算法和计算机视觉应用07:机器学习

Machine Learning Goal of Machine LearningLinear ClassificationSolutionNumerical output example: linear regressionStochastic Gradient DescentMatrix Acceleration Goal of Machine Learning 机器学习的目标 假设现在有一组数据 x i , y i {x_i,y_i} xi​,yi​&…

【玩转OCR | 腾讯云智能结构化OCR在图像增强与发票识别中的应用实践】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 引言 图像增强API调用实践1. API选择与参数设置2. 在线调试与结果分析3. 响应结果具体实现代码 发票…

android studio更改应用图片,和应用名字。

更改应用图标&#xff0c;和名字 先打开AndroidManifest.xml文件。 更改图片文件名字&#xff08; 右键-->构建-->重命名&#xff08;R&#xff09;&#xff09;

Git(11)之log显示支持中文

Git(11)之log显示支持中文 Author&#xff1a;Once Day Date&#xff1a;2024年12月21日 漫漫长路有人对你微笑过嘛… 参考文档&#xff1a;GIT使用log命令显示中文乱码_gitlab的log在matlab里显示中文乱码-CSDN博客 全系列文章可查看专栏: Git使用记录_Once_day的博客-CSD…

代理模式(JDK,CGLIB动态代理,AOP切面编程)

代理模式是一种结构型设计模式&#xff0c;它通过一个代理对象作为中间层来控制对目标对象的访问&#xff0c;从而增强或扩展目标对象的功能&#xff0c;同时保持客户端对目标对象的使用方式一致。 代理模式在Java中的应用,例如 1.统一异常处理 2.Mybatis使用代理 3.Spring…

猪猪软件库

猪猪软件库&#xff0c;汇聚各类宝藏软件&#xff0c;宛如一座数字百宝箱。这里涵盖了实用工具、趣味游戏、高效办公软件等丰富资源&#xff0c;满足不同用户的多样需求。界面简洁直观&#xff0c;搜索便捷流畅&#xff0c;能让你迅速定位心仪软件。 所有资源都经过严格筛选&a…

端到端自动驾驶大模型:视觉-语言-动作模型 VLA

模型框架定义、模型快速迭代能力是考查智驾团队出活能力的两个核心指标。在展开讨论Vision-Language-Action Models(VLA)之前&#xff0c;咱们先来讨论端到端自动驾驶大模型设计。 目录 1. 端到端自动驾驶大模型设计 1.1 模型输入设计 1.2 模型输出设计 1.3 实现难点分析 …

Swin transformer 论文阅读记录 代码分析

该篇文章&#xff0c;是我解析 Swin transformer 论文原理&#xff08;结合pytorch版本代码&#xff09;所记&#xff0c;图片来源于源paper或其他相应博客。 代码也非原始代码&#xff0c;而是从代码里摘出来的片段&#xff0c;配上简单数据&#xff0c;以便理解。 当然&…

LLMs之rStar:《Mutual Reasoning Makes Smaller LLMs Stronger Problem-Solvers》翻译与解读

LLMs之rStar&#xff1a;《Mutual Reasoning Makes Smaller LLMs Stronger Problem-Solvers》翻译与解读 导读&#xff1a;这篇论文提出了一种名为rStar的自我博弈互推理方法&#xff0c;用于增强小型语言模型 (SLMs) 的推理能力&#xff0c;无需微调或依赖更强大的模型。rStar…

CS 144 check5: down the stack (the network interface)

Lectures Note 略 Exercises TCP片段传输到对等方的过程&#xff1a; TCP-in-UDP-in-IP. Linux 提供了一种接口&#xff08;即“数据报套接字”&#xff0c;UDPSocket&#xff09;&#xff0c;它允许应用程序仅提供用户数据报的有效载荷和目标地址&#xff0c;而内核则负责…

Llama 3 模型系列解析(一)

目录 1. 引言 1.1 Llama 3 的简介 1.2 性能评估 1.3 开源计划 1.4 多模态扩展 ps 1. 缩放法则 2. 超额训练&#xff08;Over-training&#xff09; 3. 计算训练预算 4. 如何逐步估算和确定最优模型&#xff1f; 2. 概述 2.1 Llama 3 语言模型开发两个主要阶段 2.2…

越疆科技营收增速放缓:毛利率未恢复,持续亏损下销售费用偏高

《港湾商业观察》施子夫 12月13日&#xff0c;深圳市越疆科技股份有限公司&#xff08;以下简称&#xff0c;越疆科技&#xff0c;02432.HK&#xff09;发布全球发售公告&#xff0c;公司计划全球发售4000万股股份&#xff0c;其中3800万股国际发售&#xff0c;200万股香港公开…

微信小程序实现画板画布自由绘制、选择画笔粗细及颜色、记录撤回、画板板擦、清空、写字板、导出绘图、canvas,开箱即用

目录 画板创建canvas绘制及渲染画笔粗细功能实现画笔颜色选择画笔痕迹撤回、板擦、画布清空canvas解析微信小程序中 canvas 的应用场景canvas 与 2D 上下文、webgl 上下文的关系图像的加载与绘制说明代码说明画板创建 canvas绘制及渲染 在wxml添加对应的canvas标签代码,并在j…

混合精度训练说明

什么是混合精度训练&#xff1f;混合精度训练有什么用&#xff1f; 这里总结一下。 本文总结自kapathy的build gpt2 通常在训练过程中&#xff0c;model里面的数据默认都是torch.float32类型&#xff0c; 也就是用32bit的float型数据表示变量。 比如特征提取中提取的特征&…

draw.io 导出svg图片插入word后模糊(不清晰 )的解决办法

通常我们将图片从draw.io导出为svg格式后插入word, 会发现字体不清晰&#xff0c;特别是使用宋体时&#xff0c;折腾了半天&#xff0c;得到如下办法&#xff1a; 方法1: 在draw.io中导出pdf文件&#xff0c;使用 PDF转SVG转换器 - SVGConverter 将其转换为svg, 完美呈现。 …

ARM学习(38)多进程多线程之间的通信方式

ARM学习(38)ARM学习(38)多进程多线程之间的通信方式 一、问题背景 笔者在调试模拟器的时候,碰到进程间通信的问题,一个进程在等另外一个进程ready的时候,迟迟等不到,然后通过调试发现,另外一个进程变量已经变化了,但是当前进程变量没变化,需要了解进程间通信的方式…

【动手学运动规划】 5.2 数值优化基础:梯度下降法,牛顿法

朕四季常服, 不过八套. — 大明王朝1566 道长 &#x1f3f0;代码及环境配置&#xff1a;请参考 环境配置和代码运行! 上一节我们介绍了数值优化的基本概念, 让大家对最优化问题有了基本的理解. 那么对于一个具体的问题, 我们应该如何求解呢? 这一节我们将介绍几个基本的求解…

24-12-22 pytorch学习 基础知识 帝乡明日到,犹自梦渔樵。

文章目录 pytorch学习 基础知识pytorch学习(1) Tensors1.1 初始化Tensor1.2 Tensor 的属性1.3 Tensors 的操作1.4 与 NumPy 的桥梁1.4.1 Tensor 到 NumPy 数组1.4.2 NumPy 数组 到 Tensor pytorch学习(2) 数据集和数据加载器2.1 加载一个数据集2.2 迭代和可视化数据集2.3 为你的…