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

SASS 学习笔记 II

SASS 学习笔记 II

上篇笔记,SASS 学习笔记 中包含:

  • 配置

  • 变量

  • 嵌套

    这里加一个扩展,嵌套中有一个 & 的用法,使用 & 可以指代当前 block 中的 selector,后面可以追加其他的选择器。如当前的 scope 是 form,可以在嵌套中使用 &-selector 指代 form-selector,如:

    HTML 有:

    <!-- Navbar -->
    <nav class="navbar"><div class="navbar-navigation"><div class="navbar-navigation-left"></div><div class="navbar-navigation-right"></div></div>
    </nav>
    <!-- End of Navbar -->
    

    scss 写:

    .navbar {&-navigation {&-left {}&-right {}}
    }
    
  • 扩展

  • mixin

  • function

  • placeholder selector

  • import & partials

这部分就这剩下的一些特性/功能去学习一下,过了一遍剩下的内容,SCSS 也差不多学完了。

SCSS 高级特性

数据类型

  • 数字

    这个基本是数字单位,如 100px,100%,100,0.1 等

  • 字符串

    这个常用于字体类和 string interpolation,如 font-family: 'Arial',string interpolation 下面会说

  • 颜色

    hex、hsl、rgb 这种

  • 布尔值

  • list

    SCSS 中的 list 一般用逗号做分隔符,不过有些和 css 一致的可以用空格,如:

    // 不用字符串 sass 会提示报错,node-sass好像没什么问题就是了
    $colors: 'red', 'orange';
    $box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    
  • map

    用法如下:

    $colors: (primary: red,secondary: green,tertiary: blue,
    );// 获取方式使用内置的 map-get
    html {background-color: map-get($colors, primary);
    }
    

    我个人觉得 map 获取单一值的意义不大,不过搭配上变量+循环/if 进行配置之类的倒是很方便。

  • null

    一般不存在的值 SCSS 默认就是 null,出现获取/使用 null 的时候,终端也会报错。

  • 特殊

    global, selector 和 function

interpolation

interpolation 就是一个将变量、表达式或选择器转换成一个字符串的方式,语法就是使用 #{},使用方法有:

$color: red;body {color: #{$color};
}$selector: '.button';
#{$selector}: {background-color: #{$color};
}

同样,这种搭配循环/if 很好用。

for 循环

语法为:@for $i from <start> through <end> {}@for $i from <start> to <end> {},前者包含 end,后者不包。

同样搭配上面介绍过的一些特性会比较好用,如:

$colors2: (1: red,2: green,3: blue,4: orange,
);// @for $i from 1 to 4, 4 is exclude
@for $i from 1 through 4 {.paragraph-#{$i} {background-color: map-get($map: $colors2, $key: $i);}
}

编译后的结果为:

.paragraph-1 {background-color: red;
}.paragraph-2 {background-color: green;
}.paragraph-3 {background-color: blue;
}.paragraph-4 {background-color: orange;
}

each 循环

有点像 JS 的 for each,如果只是想获取 list 中的值,用 @each 会方便一些,也可以不需要用 map-get

如上面的循环用 each 的写法为:

@each $i, $c in $colors2 {.paragraph-#{$i} {background-color: #{$c};}
}

这里不使用解构的方法也可以用 nth() 实现,如:

@each $item in $colors2 {.paragraph-#{nth($item, 1)} {background-color: #{nth($item, 2)};}
}

就是没这么方便。

if

也是 if/else-if/else 的用法,我觉得这种用在 media query 特别的方便。

案例

slideshow

这个主要还是用 animation 来实现的,不过使用 SCSS 的循环确实很方便,原生 CSS 定义 delay 的写法为:

.slideshow-slide:nth-child(1) {animation-delay: 0s;
}
.slideshow-slide:nth-child(2) {animation-delay: 4s;
}
.slideshow-slide:nth-child(3) {animation-delay: 8s;
}
.slideshow-slide:nth-child(4) {animation-delay: 12s;
}
.slideshow-slide:nth-child(5) {animation-delay: 16s;
}

使用 SCSS 的写法:

$animList: 1 0s, 2 4s, 3 8s, 4 12s, 5 16s;@each $item in $animList {.slideshow-slide:nth-child(#{nth($item, 1)}) {animation-delay: nth($item, 2);}
}

或者

$animList: 1, 2, 3, 4, 5;@each $item in $animList {.slideshow-slide:nth-child(#{$item}) {animation-delay: #{($item - 1) * 4}s;}
}

同样的写法也可以搭配 nth-child

$socialMediaColors: 1 #3b5998, 2 #b31217, 3 #dc4e41, 4 #55acee, 5 #517fa4, 6#0077b5;@each $color in $socialMediaColors {.social-icons-item:nth-child(#{nth($color, 1)}) .social-icons-link {color: nth($color, 2);border: 0.1rem solid nth($color, 2);}
}

最终完成的效果:

在这里插入图片描述

media query

media query 主要依赖 mixin,用法如下:

@mixin response($breakpoint) {@if ($breakpoint == xl) {@media (max-width: 1200px) {@content;}} @else if ($breakpoint == lg) {@media (max-width: 1000px) {@content;}} @else if ($breakpoint == md) {@media (max-width: 760px) {@content;}} @else if ($breakpoint == sm) {@media (max-width: 560px) {@content;}}
}html {font-size: 62.5%;@include response(md) {font-size: 56.25%;}@include response(sm) {font-size: 50%;}
}

相关文章:

SASS 学习笔记 II

SASS 学习笔记 II 上篇笔记&#xff0c;SASS 学习笔记 中包含&#xff1a; 配置 变量 嵌套 这里加一个扩展&#xff0c;嵌套中有一个 & 的用法&#xff0c;使用 & 可以指代当前 block 中的 selector&#xff0c;后面可以追加其他的选择器。如当前的 scope 是 form&a…...

提高 Snowflake 工作效率的 6 大工具

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可二次编辑的3D应用场景 Snowflake 彻底改变了企业存储、处理和分析数据的方式&#xff0c;提供了无与伦比的灵活性、可扩展性和性能。但是&#xff0c;与任何强大的技术一样&#xff0c;要真正利用其潜力&#xff0c;必须拥有…...

选项方式读取配置IOption、IOptionSnapshot、IOpstionMonitor的区别

IOption, IOptionsSnapshot, 和 IOptionsMonitor 都是 ASP.NET Core 中用于访问配置选项的接口。它们在不同的场景下用于获取配置选项值,并具有不同的生命周期和行为。 IOption: IOption 是一个泛型接口,表示一个配置选项的包装器。它通常在应用程序启动时被解析并注入到需…...

linux基础面试题整理

目录标题 1.说下企业为什么用linux而不用windows&#xff1f;2.linux学过什么&#xff0c;怎么学习的&#xff1f;3.linux基本命令4.linux查看端口、进程、文件类型、挂载5.使用top命令之后前五行会显示什么内容&#xff1f;6.linux怎么查找一个文件7.vim进去后的各种操作 1.说…...

IDEA开发项目时一直出现http404错误的解决方法

系列文章目录 安装cv2库时出现错误的一般解决方法_cv2库安装失败 SQL&#xff1e; conn sys/root as sysdbaERROR:ORA-12560: TNS: 协议适配器错误的解决方案 虚拟机启动时出现“已启用侧通道缓解”的解决方法 Hypervisor launch failed&#xff1b; Processor does not pr…...

NLPR、SenseTime 和 NTU 加速自动视频纵向编辑

视频人像编辑技术已经在电视、视频和电影制作中得到了应用&#xff0c;并有望在不断发展的网真场景中发挥关键作用。最先进的方法已经可以逼真地将同源音频合成为视频。现在&#xff0c;来自北京模式识别国家实验室&#xff08;NLPR&#xff09;、商汤科技研究和南洋理工大学的…...

layui下拉框select 弹出层在最外层

出现问题如图所示 想要的效果是如下 这样的效果只需一行代码就能解决 .layui-layer-page .layui-layer-content{overflow: visible!important;}...

fnn手动实现和nn实现(包括3种激活函数、隐藏层)

原文网址&#xff1a;https://blog.csdn.net/m0_52910424/article/details/127819278 fnn手动实现: import time import matplotlib.pyplot as plt import numpy as np import torch import torch.nn as nn import torchvision from torch.nn.functional import cross_entrop…...

Lua + mysql 实战代码

--[[luarocks lua语言的包管理器luasql https://luarocks.org/brew install luarocksluarocks install luasql-mysql 注意此处&#xff0c;如果你是 mariadb&#xff0c;然后要求指定 MYSQL_DIR 参数的时候&#xff0c;千万不要指到 mariadb 的安装目录&#xff0c;而是要指…...

智慧工地监管云平台源码 建筑施工一体化信息管理系统源码

智慧工地管理云平台系统是一种利用人工智能和物联网技术来监测和管理建筑工地的系统。它可以通过感知设备、数据处理和分析、智能控制等技术手段&#xff0c;实现对工地施工、设备状态、人员安全等方面的实时监控和管理。 智慧工地平台系统工作原理&#xff1a; 1、感知设备的…...

三.net core 自动化发布到docker (创建一个dotnet工程发布)

创建Jenkins-create a job 输入名称&#xff08;建议不要带“”这类的字符&#xff09;&#xff0c;选择自由风格的类型&#xff08;红框标注的&#xff09;&#xff0c;点击确定 用于测试,下面选项基本没有选择-配置代码地址 选择执行shell #!/bin/bash # 获取短版本号 GITHA…...

【Spring Cloud 八】Spring Cloud Gateway网关

gateway网关 系列博客背景一、什么是Spring Cloud Gateway二、为什么要使用Spring Cloud Gateway三、 Spring Cloud Gateway 三大核心概念4.1 Route&#xff08;路由&#xff09;4.2 Predicate&#xff08;断言&#xff09;4.3 Filter&#xff08;过滤&#xff09; 五、Spring …...

Android JNI传递CallBack接口并接收回调

在JNI中&#xff0c;可以通过传递一个Java接口对象的引用给C代码&#xff0c;并在C代码中调用该接口对象的方法&#xff0c;实现JAVA层监听C数据变化&#xff0c;下面是一个简单的示例&#xff1a; 在Java代码中定义一个CallBack接口和JNI方法 class TestLib {companion objec…...

机器学习:特征工程之特征预处理

目录 特征预处理 1、简述 2、内容 3、归一化 3.1、鲁棒性 3.2、存在的问题 4、标准化 ⭐所属专栏&#xff1a;人工智能 文中提到的代码如有需要可以私信我发给你&#x1f60a; 特征预处理 1、简述 什么是特征预处理&#xff1a;scikit-learn的解释&#xff1a; provide…...

高级艺术二维码制作教程

最近不少关于二维码制作的&#xff0c;而且都是付费。大概就是一个好看的二维码&#xff0c;扫描后跳转网址。本篇文章使用Python来实现&#xff0c;这么简单花啥钱呢&#xff1f;学会&#xff0c;拿去卖便宜点吧。 文章目录 高级二维码制作环境安装普通二维码艺术二维码动态 …...

每日一题leetcode--使循环数组所有元素相等的最少秒数

相当于扩散&#xff0c;每个数可以一次可以扩散到左右让其一样&#xff0c;问最少多少次可以让整个数组都变成一样的数 使用枚举&#xff0c;先将所有信息存到hash表中&#xff0c;然后逐一进行枚举&#xff0c;计算时间长短用看下图 考虑到环形数组&#xff0c;可以把首项n放…...

tauri-react:快速开发跨平台软件的架子,支持自定义头部UI拖拽移动和窗口阴影效果

tauri-react 一个使用 taurireacttsantd 开发跨平台软件的模板&#xff0c;支持窗口头部自定义和窗口阴影&#xff0c;不用再自己做适配了&#xff0c;拿来即用&#xff0c;非常 nice。而且已经封装好了 tauri 的 http 请求工具&#xff0c;省去很多弯路。 开原地址&#xff…...

k8s 自身原理之 Service

好不容易&#xff0c;终于来到 k8s 自身的原理之 关于 Service 的一部分了 前面我们用 2 个简图展示了 pod 之间和 pod 与 node 之间是如何通信息的&#xff0c;且通信的数据包是不会经过 NAT 网络地址转换的 那么 Service 又是如何实现呢&#xff1f; Service 我们知道是用…...

arduino Xiao ESP32C3 oled0.96 下雪花

Xiao ESP32C3使用oled 0.96实现下雪的功能 雪花下落的时候, 随机生成半径和位置 sandR和sandX,sandY 保存雪花下落位置的时候, 将其周边一圈设置为-1, 标记为有雪花 其他雪花下落的时候, 其他雪花的一圈如果遇到-1, 则停止下落, 并重复2 #include "oled.h" void …...

ElasticSearch索引库、文档、RestClient操作

文章目录 一、索引库1、mapping属性2、索引库的crud 二、文档的crud三、RestClient 一、索引库 es中的索引是指相同类型的文档集合&#xff0c;即mysql中表的概念 映射&#xff1a;索引中文档字段的约束&#xff0c;比如名称、类型 1、mapping属性 mapping映射是对索引库中文…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...