scss 实用教程
变量 $
定义变量
$link-color: 'blue';
变量名可以与css中的属性名和选择器名称相同
使用变量
a {color: $link_color;
}
$highlight-border: 1px solid $link_color;
中划线和下划线相互兼容,即中划线声明的变量可以使用下划线的方式引用,反之亦然。
$link-color: blue;
a {color: $link_color;
}
变量作用域
{}中定义的变量为局部变量,仅在{}内有效
$nav-color: #F90;
nav {$width: 100px;width: $width;color: $nav-color;
}
变量默认值
$fancybox-width: 400px !default;
.fancybox {width: $fancybox-width;
}
若导入的sass局部文件声明了$fancybox-width变量,则默认值无效,否则$fancybox-width将默认为400px。
vscode中高亮显示scss代码
安装插件——Beautify css/sass/scss/less

新建文件 test.scss,写入代码
$link-color: 'blue';a {color: $link_color;
}
效果如下

vscode中实时编译scss—查看最终css效果
安装插件——Live Sass Compiler

点击vscode下边栏的 Watch Sass

此时在 test.scss 同目录下会生成文件 test.css,其内容为

修改 test.scss 中的代码,test.css 会同步编译,方便实时查看最终css效果
样式嵌套
<div class="diary"><h1 class="title">标题</h1><p class="content">内容</p>
</div>
.diary {.title {color: red;}.content {color: blue;}
}
使用伪类选择器时,需要配合&符号,此时&表示父元素
a{color: green;&:hover{color: yellow;}
}
属性嵌套
方式一
nav {border: {style: solid;width: 1px;color: #ccc;}
}
转化为css后,效果如下:
nav {border-style: solid;border-width: 1px;border-color: #ccc;
}
方式二
nav {border: 1px solid #ccc {left: 0px;right: 0px;}
}
转化为css后,效果如下:
nav {border: 1px solid #ccc;border-left: 0px;border-right: 0px;
}
静默注释 //
静默注释是一种内容不会出现在生成的css文件中的注释
body {color: #333; // 这种注释内容不会出现在生成的css文件中padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
当/* … */注释出现在原生css不允许的地方,如在css属性或选择器中,这些注释也会被抹掉。
body {color /* 这块注释内容不会出现在生成的css中 */: #333;padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}
循环 @for
@for $i from 1 to 4 {.pd#{$i} {padding: $i*10 + px;}
}
转化为css后,效果如下:
.pd1 {padding: 10px;
}.pd2 {padding: 20px;
}.pd3 {padding: 30px;
}
@for 内可同时循环生成多个样式
@for $i from 1 to 4 {.pd#{$i} {padding: $i*10 + px;}.mr#{$i} {margin: $i*10 + px;}
}
from to 改为 from through 则包含边界
@for $i from 1 through 4 {.pd#{$i} {padding: $i*10 + px;}
}
得到
.pd1 {padding: 10px;
}.pd2 {padding: 20px;
}.pd3 {padding: 30px;
}.pd4 {padding: 40px;
}
混合器 @minxin
用于给一大段样式赋予一个名字,方便样式的复用
和CSS类名的区别是,CSS类名是在html中使用,混合器是在样式代码中使用。
定义混合器 @mixin
@mixin mark {color: red;background: yellow;
}
使用混合器 @include
.note {font-weight: bold;@include mark
}
最终css效果
.note {font-weight: bold;color: red;background: yellow;
}
可传参的混合器
类似JavaScript里的function
@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
调用时直接传参
a {@include link-colors(blue, red, green);
}
最终生成的css效果如下
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
如果记不清参数的顺序,可以通过语法$name: value的形式指定每个参数的值。
a {@include link-colors($normal: blue,$visited: green,$hover: red);
}
指定默认参数值
@mixin link-colors($normal,$hover: $normal,$visited: $normal)
{color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
继承 @extend
跟混合器相比,继承生成的css代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css体积更小。
//通过标签继承样式(默认的浏览器样式不会被继承,因为它们不属于样式表中的样式)
.disabled {color: gray;@extend a;
}
//通过选择器继承样式
.error {border: 1px solid red;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}
.seriousError不仅会继承.error自身的所有样式,任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
//.seriousError从.error继承样式
.error a{ //应用到.seriousError acolor: red;font-weight: 100;
}
h1.error { //应用到hl.seriousErrorfont-size: 1.2rem;
}
在class="seriousError"的html元素内的超链接也会变成红色和粗体。
相关文章:
scss 实用教程
变量 $ 定义变量 $link-color: blue;变量名可以与css中的属性名和选择器名称相同 使用变量 a {color: $link_color; }$highlight-border: 1px solid $link_color;中划线和下划线相互兼容,即中划线声明的变量可以使用下划线的方式引用,反之亦然。 $li…...
NO.304 二维区域和检索 - 矩阵不可变
题目 给定一个二维矩阵 matrix,以下类型的多个请求: 计算其子矩形范围内元素的总和,该子矩阵的 左上角 为 (row1, col1) ,右下角 为 (row2, col2) 。 实现 NumMatrix 类: NumMatrix(int[][] matrix) 给定整数矩阵 …...
牛客---简单密码python
现在有一种密码变换算法。 九键手机键盘上的数字与字母的对应: 1--1, abc--2, def--3, ghi--4, jkl--5, mno--6, pqrs--7, tuv--8 wxyz--9, 0--0,把密码中出现的小写字母都变成九键键盘对应的数字,如:a 变成 2&#x…...
devops完整搭建教程(gitlab、jenkins、harbor、docker)
devops完整搭建教程(gitlab、jenkins、harbor、docker) 文章目录 devops完整搭建教程(gitlab、jenkins、harbor、docker)1.简介:2.工作流程:3.优缺点4.环境说明5.部署前准备工作5.1.所有主机永久关闭防火墙…...
页面上时间显示为数字 后端返回给前端 response java系统
有时候,在一个系统里,会看到,有的页面时间显示正常,有的页面时间显示成数字。像这样: "createTime": 1698706491000 这是因为出参没有做转换,直接将java.util.Date类型的数据返回给前端了。 返…...
idea怎么配置tomcat
要在IntelliJ IDEA中配置Tomcat,请按照以下步骤操作: 打开IntelliJ IDEA,点击File -> Settings(或者使用快捷键CtrlAltS)。 在设置窗口左侧导航栏中,选择Build, Execution, Deployment -> Applicati…...
GoLong的学习之路(二十三)进阶,语法之并发(go最重要的特点)(锁,sync包,原子操作)
这章是我并发系列中最后的一章。这章主要讲的是锁。但是也会讲上一章channl遗留下的一些没有讲到的内容。select关键字的用法,以及错误的一些channl用法。废话不多说。。。 文章目录 select多路复用通道错误示例并发安全和锁问题描述互斥锁读写互斥锁 syncsync.Wait…...
asp.net core 生命周期
在ASP.NET Core中,有三个重要的生命周期阶段: 请求生命周期(Request Lifecycle):请求生命周期从接收到客户端的HTTP请求开始,到响应结果发送给客户端结束。在请求生命周期中,ASP.NET Core会创建…...
Leetcode刷题详解—— 目标和
1. 题目链接:494. 目标和 2. 题目描述: 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - ,然后串联起所有整数,可以构造一个 表达式 : 例如,nums [2, 1] ,可…...
学习c#的第六天
目录 C# 判断 if 语句 嵌套 if 语句 switch 语句 嵌套 switch 语句 ? : 运算符 C# 循环 循环类型 while 循环 for/foreach 循环 do...while 循环 嵌套循环 循环控制语句 break 语句 continue 语句 无限循环 C# 判断 if 语句 在C#中,if语句用于根…...
第七章 :Spring Boot web开发常用注解(二)
第七章 :Spring Boot web开发常用注解(二) 前言 本章节知识重点:作者结合自身开发经验,以及觉察到的一个现象:Springboot注解全面理解和掌握的并不多,对注解进行了全面总结,共分两个章节,可以作为web开发工程师注解参考手册,SpringBoot常用注解大全,一目了然!。本…...
IOC - Google Guice
Google Guice是一个轻量级的依赖注入框架,专注于依赖注入和IoC,适用于中小型应用。 Spring Framework是一个全面的企业级框架,提供了广泛的功能,适用于大型企业应用。 是吧!IOC 容器不止Spring,还有Google Guice,来体…...
国际阿里云:Linux实例负载高问题排查和异常处理!!!
问题描述 在您使用ECS实例过程中,可能会遇到实例系统负载较高的情况,负载过高,可能会引发一系列异常问题,简单说您如下: CPU使用率或负载过高:一般来说,当CPU使用率≥80%时,定义为C…...
【数据结构】二叉树的遍历递归算法详解
二叉树的遍历 💫二叉树的结点结构定义💫创建一个二叉树结点💫在主函数中手动创建一颗二叉树💫二叉树的前序遍历💫调用栈递归——实现前序遍历💫递归实现中序和后序遍历 💫二叉树的结点结构定义 …...
百度王颖:百度文库以AI创作能力突破语言边界,促进思想碰撞和文化融通
1月9日,2023年世界互联网大会乌镇峰会“网络传播与文明交流互鉴论坛”召开。百度副总裁、互娱和垂类平台负责人王颖出席并发表“以技术搭建跨文化交流桥梁”主题演讲。她表示,在大模型的加持下,百度各个产品都在重构,通过技术助力…...
人工智能基础_机器学习023_理解套索回归_认识L1正则---人工智能工作笔记0063
然后上一节我们说了L1,L2正则是为了提高,模型的泛化能力, 提高泛化能力,实际上就是把模型的公式的w,权重值,变小对吧. 然后我们这里首先看第一个L1正则,是怎么做到把w权重变小的 可以看到最上面是线性回归的损失函数,然后 L1可以看到,这个正则,就是在损失函数的基础上给损失…...
Learning an Animatable Detailed 3D Face Model from In-The-Wild Images论文笔记
Learning an Animatable Detailed 3D Face Model from In-The-Wild Images论文笔记 论文目标:提出一个端到端的框架,可以从非受控的图片中学习高质量、可动画的3D人脸模型。论文方法:论文结果:论文意义: 论文目标:提出一个端到端的框架,可以从非受控的图片中学习高质量、可动画…...
Lenovo联想小新Air-14笔记本2021款AMD锐龙ALC版(82LM)原装出厂Win10镜像和Windows11预装OEM系统
下载链接:https://pan.baidu.com/s/1akLkXM2HIg3eO76jqM-LVA?pwdxvo6 提取码:xvo6 系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、联想电脑管家等预装程序 所需要工具:16G或以上的U盘 文件格式:…...
在程序中链接静态库
现在我们把上面src目录中的add.cpp、div.cpp、mult.cpp、sub.cpp编译成一个静态库文件libcalc.a。 add_library(库名称 STATIC 源文件1 [源文件2] ...) link_libraries(<static lib> [<static lib>...]) 参数1:指定出要链接的静态库的名字 可以是全…...
TortoiseSVN 状态图标不显示的两种解决办法
文章目录 TortoiseSVN 方式解决注册表方式解决 TortoiseSVN 方式解决 在桌面或者资源管理器中鼠标右键打开 TortoiseSVN 设置选择 Icon Overlays (图标覆盖)Status cache(状态缓存) 选择 ‘Shell’ 选择 Icon Overlays(图标覆盖)…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...
嵌入式常见 CPU 架构
架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集,单周期执行;低功耗、CIP 独立外设;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel(原始…...
