SASS/SCSS精华干货教程
目录
介绍
基本说明
特点
sass语法格式sass的语法格式一共有两种,一种是以".scss"作为拓展名,一种是以".sass"作为拓展名,这里我们只讲拓展名:
编译环境安装
Vscode安装编译插件
简单使用
sass语法扩张
& 符
属性嵌套
占位符 %
编辑 变量定义
全局变量和局部变量
@import导入
sass混合指令 (Mixin directives)
@extend
介绍
基本说明
SASS是一个css的预处理器,是CSS 的扩展语言,可以帮助我们减少重复的代码,生成更好的CSS格式化代码,并且兼容所有版本的CSS。
CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且在代码也不方便维护,Sass 引入合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 文件后缀为 .scss。
特点
兼容CSS:Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。
特性丰富:Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力,一直使其保持领先地位。
成熟:Sass已经经过其核心团队超过13年的精心打造。
行业认可:一次又一次地,行业把Sass作为首选CSS扩展语言。
社区庞大:数家科技企业和成百上千名开发者为Sass提供支持。
框架:有无数的框架使用Sass构建。比如Compass,Bourbon,和Susy。
sass语法格式
sass的语法格式一共有两种,一种是以".scss"作为拓展名,一种是以".sass"作为拓展名,这里我们只讲拓展名:
这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
编译环境安装
Vscode安装编译插件
vscode插件市场中搜索 sass

进行编译配置


// 是否添加不同浏览器的兼容前缀 如: -webkit- -ms- -o- -moz-等"liveSassCompile.settings.autoprefix": ["> 1%","last 2 versions"],"liveSassCompile.settings.formats": [{/*:nested --嵌套格式:expanded --展开格式:compressed --紧凑格式:compact --紧凑格式*/"extensionName": ".css","format": "compressed", //紧凑格式"savePath": "~/../css" //设置编译的css文件输出路径 不设置默认当前目录}]
简单使用

查看自动编译生成css文件


sass语法扩张
在之前的css格式中我们经常可以看到.body .div 这种表示层级结构的写法,但是层级多是可能就不太好维护,sass对这种层级就有嵌套的优化,可以看下区别

查看编译后:

可以看到sass语法将层级样式的父子关系兄弟关系的层级调整为可以嵌套的写法格式,使得可以像一些后端代码语言一样进行嵌套的使用,从而也可以更直观的看出层级样式选择器的层级关系
& 符
表示父级元素名 在嵌套使用时可以直接代替父级选择器名字使用

属性嵌套
sass可以将一个类型的属性设置进行优化嵌套

占位符 %
当需要定义一套样式并不是给某个元素用,而是只通过 @extend 指令使用 在制作 sass样式库的时候 希望sass进行忽略
直观一点直接上代码

变量定义
定义规则
1.变量以美元符号()开头,后面跟变量名;
2.变量名是不以数字开头的可包含字母、数字、下划线、横线(连接符);
3.写法同css,即变量名和值之间用冒号(:)分隔;
4.变星一定要先定义,后使用;
连接符与下划线
通过连接符与下划线定义的同名变量为同一变量,建议使用连接符

全局变量和局部变量
先来看局部变量

局部变量限制了变量使用的范围
全局变量直接定义在最外层的就是全局变量

或者使用 !global关键字定义

@import导入
在使用时还可以通过@import关键词导入其他的scss文件来进行使用
新建public.scss文件

在css.scss文件中导入public.scss文件进行使用

导入的.scss文件后缀还可以省略
注意事项:

sass混合指令 (Mixin directives)
混合指令(Mixin)用于定义可重复使用的样式 混合指令可以包含所有的css规则 绝大部分sass规则甚至通过参数功能引入变量 输出多样化的样式
mixin是可以重复使用的一组css声明
mixin有助于减少重复代码 只需声明一次 就可再文件中引用
混合指令可以包含所有的css规则 绝大部分sass规则 甚至通过参数功能引入变量 输出多样化的样式
使用参数时建议加上默认值
直接上干货代码:

在使用时使用@mixin定义需要复用的样式,使用@inclue 关键字进行调用 跟java的函数定义很类似
还可以进行参数的传递

@extend
在设计网页的时候通常遇到这样的情况: 一个元素使用样式与另一个元素完全相同,但又添加了额外的样式 通常会再html中给元素定义两个class,一个通用样式 一个特殊样式

运算(Operations)符的使用

相关文章:
SASS/SCSS精华干货教程
目录 介绍 基本说明 特点 sass语法格式sass的语法格式一共有两种,一种是以".scss"作为拓展名,一种是以".sass"作为拓展名,这里我们只讲拓展名: 编译环境安装 Vscode安装编译插件 简单使用 sass语法扩张…...
8.jib-maven-plugin构建springboot项目镜像,docker部署配置
目录 1.构建、推送镜像 1.1 执行脚本 2.2 pom.xml配置 2.部署镜像服务 2.1 执行脚本 2.2 compose文件 3.docker stack常用命令 介绍:使用goole jib插件构建镜像,docker stack启动部署服务; 通过执行两个脚本既可以实现构建镜像、部…...
海康威视综合安防管理平台任意文件上传
系统介绍 HIKVISION iSecure Center综合安防管理平台是一套“集成化”、“智能化”的平台,通过接入视频监控、一卡通、停车场、报警检测等系统的设备,获取边缘节点数据,实现安防信息化集成与联动,公众号:web安全工具库…...
Linux环境下C++ 接入OpenSSL
接上一篇:Windows环境下C 安装OpenSSL库 源码编译及使用(VS2019)_vs2019安装openssl_肥宝Fable的博客-CSDN博客 解决完本地windows环境,想赶紧在外网环境看看是否也正常。毕竟现在只是HelloWorld级别的,等东西多了&am…...
美国网站服务器SSL证书介绍
美国网站服务器的SSL证书也是一种数字证书,由权威数字证书机构CA验证网站的身份后所颁发,可实现浏览器与网站主机之间的数据传输加密。美国网站服务器搭建的网站在安装SSL证书后会在浏览器显示安全锁标志,数据传输协议则从HTTP传统协议升级为…...
JSP命令标签 静态包含/动态包含
好 下面我们聊聊JSP中的指令标签 这边 我们来说两个 分别是 静态包含 和 动态包含 我们可以将重用性代码包含起来 更好的使用 比如 我们界面上中下 分别有三个导航栏 那么 如果你写三份 就会出现很多重复代码 而且 改起来 也很不方便 要一次改三份 口说无凭 我们来做一个小案…...
Cesium点位弹窗
1.弹窗没法向加入点位一样加入到地图内部,entity没法实现 2.使用绝对定位,将地图组件通过定位加入到地图上,注意弹窗层级一定在地图上 3.通过判断点击位置是否是点位来获取entity信息,将信息显示在弹窗 4.将点击处点位的经纬度转为…...
基于单片机16路抢答器仿真系统
**单片机设计介绍, 基于单片机16路抢答器仿真系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的16路抢答器仿真系统是一种用于模拟和实现抢答竞赛的系统。该系统由硬件和软件两部分组成。 硬件方面&am…...
Linux常用命令亲测总结
在实际开发中,经常会进行下位机的搭建,在搭建过程中,对于常用的LInux命令进行总结,方便自己使用 1.rm -rf 删除对应文件(字节小的) 2、ln -s 文件关联(长的关联短的。三个则关联两次࿰…...
二百零六、Flume——Flume1.9.0单机版部署脚本(附截图)
一、目的 在实际项目部署时,要实现易部署易维护,需要把安装步骤变成安装脚本实现快速部署 二、部署脚本在Linux中文件位置 文件夹中只有脚本文件flume-install.sh和tar包apache-flume-1.9.0-bin.tar.gz 三、Flume安装脚本 #!/bin/bash #获取服务器名…...
不必购买Mac,这款国产设计工具能轻松替代Sketch!
介绍 即时设计是新一代可以直接在浏览器中使用的设计工具,具有Sketch和实时协作功能。与本地Sketch相比,增加了实时协作功能,即时设计可以看作是在线Sketch,两个工具可以简单粗暴地总结为一个公式: 即时设计Sketch云…...
通过多线程的方式每次发送10条MQ消息
背景:传入一个List<person>,不知道list中有多少条数据。 import org.apache.rocketmq.client.producer.DefaultMQProducer; import org.apache.rocketmq.client.producer.Message; import org.apache.rocketmq.client.producer.SendResult;import java.util.A…...
springboot上传文件后显示权限不足
前言: 最近一个老项目迁移,原本一直好好的,迁移后上传文件的功能使用不正常,显示文件没有可读取权限,这个项目并不是我们开发和配置的,由第三方开发的,我们只是接手一下。 前端通过api上传文件…...
spring-boot-maven-plugin插件 —— 打包时减小jar包的大小方法
Maven 在打包时会将所依赖的 jar 包全部打包进去,包含了所有的依赖和资源文件,就会导致打出来的包比较大。如果再上传服务器,那么耗时特别长。 由于依赖包变化小,占用空间大,而且大部分情况是添加一次后,就…...
java Bigdecimal
一、BigDecimal概述 BigDecimal是Java在java.math包中提供的线程安全的API类,用来对超过16位有效位的数进行精确的运算。双精度浮点型变量double可以处理16位有效数,但在实际应用中,可能需要对更大或者更小的数进行运算和处理。一般情况下&am…...
【C++11并发】thread 笔记
简介 进程和线程的区别 进程:一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间,一个进程可以有多个线程,比如在Windows系统中,一个运行的xx.exe就是一个进程。 线程:进程中的一个执行任务(…...
OBS Studio免费开源录屏工具
OBS是Open Broadcaster Software的缩写,是一款免费且开源的多平台录屏和直播软件。它可以用于录制屏幕、捕获游戏、创建教学视频、直播游戏等。OBS功能强大且灵活,提供了许多配置选项和自定义功能,使用户能够根据自己的需求进行设置和调整。它…...
【汇编】[bx+idata]的寻址方式、SI和DI寄存器
文章目录 前言一、[bxidata]寻址方式1.1 [bxidata]的含义1.2 示例代码 二、SI和DI寄存器2.1 SI和DI寄存器是什么?2.2 [bxsi]和[bxdi]方式寻址2.3 [bxsiidata]和[bxdiidata] 总结 前言 在汇编语言中,寻址方式是指指令如何定位内存中的数据。BX寄存器与偏…...
Java,集合框架,关于Map接口与Collections工具类
目录 Map接口 Map及其实现类的对比: HashMap中元素的特点: 相关方法: 添加、修改操作: 删除操作: 元素查询的操作: 元视图操作的方法: TreeMap的使用: Properties类: Collections工具…...
【实用技巧】更改ArduinoIDE默认库文件位置,解放系统盘,将Arduino15中的库文件移动到其他磁盘
本文主要介绍更改Arduino IDE (含2.0以上版本)默认库文件位置的方法。 原创文章,转载请注明出处: 【实用技巧】更改ArduinoIDE默认库文件位置,解放C盘,将Arduino15中的库文件移动到其他磁盘-CSDN博客文章浏…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
C# SqlSugar:依赖注入与仓储模式实践
C# SqlSugar:依赖注入与仓储模式实践 在 C# 的应用开发中,数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护,许多开发者会选择成熟的 ORM(对象关系映射)框架,SqlSugar 就是其中备受…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
