当前位置: 首页 > 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博客文章浏…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...

LTR-381RGB-01RGB+环境光检测应用场景及客户类型主要有哪些?

RGB环境光检测 功能&#xff0c;在应用场景及客户类型&#xff1a; 1. 可应用的儿童玩具类型 (1) 智能互动玩具 功能&#xff1a;通过检测环境光或物体颜色触发互动&#xff08;如颜色识别积木、光感音乐盒&#xff09;。 客户参考&#xff1a; LEGO&#xff08;乐高&#x…...

Modbus转Ethernet IP深度解析:磨粉设备效率跃升的底层技术密码

在建材矿粉磨系统中&#xff0c;开疆智能Modbus转Ethernet IP网关KJ-EIP-101的应用案例是一个重要的技术革新。这个转换过程涉及到两种主要的通信协议&#xff1a;Modbus和Ethernet IP。Modbus是一种串行通信协议&#xff0c;广泛应用于工业控制系统中。它简单、易于部署和维护…...

第6章:Neo4j数据导入与导出

在实际应用中&#xff0c;数据的导入与导出是使用Neo4j的重要环节。无论是初始数据加载、系统迁移还是数据备份&#xff0c;都需要高效可靠的数据传输机制。本章将详细介绍Neo4j中的各种数据导入与导出方法&#xff0c;帮助读者掌握不同场景下的最佳实践。 6.1 数据导入策略 …...