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

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 文件关联(长的关联短的。三个则关联两次&#xff0…...

二百零六、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消息

背景&#xff1a;传入一个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上传文件后显示权限不足

前言&#xff1a; 最近一个老项目迁移&#xff0c;原本一直好好的&#xff0c;迁移后上传文件的功能使用不正常&#xff0c;显示文件没有可读取权限&#xff0c;这个项目并不是我们开发和配置的&#xff0c;由第三方开发的&#xff0c;我们只是接手一下。 前端通过api上传文件…...

spring-boot-maven-plugin插件 —— 打包时减小jar包的大小方法

Maven 在打包时会将所依赖的 jar 包全部打包进去&#xff0c;包含了所有的依赖和资源文件&#xff0c;就会导致打出来的包比较大。如果再上传服务器&#xff0c;那么耗时特别长。 由于依赖包变化小&#xff0c;占用空间大&#xff0c;而且大部分情况是添加一次后&#xff0c;就…...

java Bigdecimal

一、BigDecimal概述 BigDecimal是Java在java.math包中提供的线程安全的API类&#xff0c;用来对超过16位有效位的数进行精确的运算。双精度浮点型变量double可以处理16位有效数&#xff0c;但在实际应用中&#xff0c;可能需要对更大或者更小的数进行运算和处理。一般情况下&am…...

【C++11并发】thread 笔记

简介 进程和线程的区别 进程&#xff1a;一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间&#xff0c;一个进程可以有多个线程&#xff0c;比如在Windows系统中&#xff0c;一个运行的xx.exe就是一个进程。 线程&#xff1a;进程中的一个执行任务&#xff08…...

OBS Studio免费开源录屏工具

OBS是Open Broadcaster Software的缩写&#xff0c;是一款免费且开源的多平台录屏和直播软件。它可以用于录制屏幕、捕获游戏、创建教学视频、直播游戏等。OBS功能强大且灵活&#xff0c;提供了许多配置选项和自定义功能&#xff0c;使用户能够根据自己的需求进行设置和调整。它…...

【汇编】[bx+idata]的寻址方式、SI和DI寄存器

文章目录 前言一、[bxidata]寻址方式1.1 [bxidata]的含义1.2 示例代码 二、SI和DI寄存器2.1 SI和DI寄存器是什么&#xff1f;2.2 [bxsi]和[bxdi]方式寻址2.3 [bxsiidata]和[bxdiidata] 总结 前言 在汇编语言中&#xff0c;寻址方式是指指令如何定位内存中的数据。BX寄存器与偏…...

Java,集合框架,关于Map接口与Collections工具类

目录 Map接口 Map及其实现类的对比&#xff1a; HashMap中元素的特点&#xff1a; 相关方法&#xff1a; 添加、修改操作: 删除操作&#xff1a; 元素查询的操作: 元视图操作的方法&#xff1a; TreeMap的使用&#xff1a; Properties类&#xff1a; Collections工具…...

【实用技巧】更改ArduinoIDE默认库文件位置,解放系统盘,将Arduino15中的库文件移动到其他磁盘

本文主要介绍更改Arduino IDE &#xff08;含2.0以上版本&#xff09;默认库文件位置的方法。 原创文章&#xff0c;转载请注明出处&#xff1a; 【实用技巧】更改ArduinoIDE默认库文件位置&#xff0c;解放C盘&#xff0c;将Arduino15中的库文件移动到其他磁盘-CSDN博客文章浏…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...