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)符的使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/150820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

西南科技大学814考研一

C语言基础 字节大小 char:1 字节 unsigned char:1 字节 short:2 字节 unsigned short:2 字节 int:通常为 4 字节(32 位平台)或 8 字节(64 位平台) unsigned int&#x…

Sublime Text:代码编辑器的卓越典范

Sublime Text是一款高效、强大且灵活的代码编辑器,在开发社区中广受欢迎。它不仅提供了丰富的功能,还具备美观的界面和卓越的性能,成为了众多开发者的首选工具。 Sublime Text的优点 高性能:Sublime Text具有极高的启动速度和响…

数智赋能,众创众治|易知微为“浙江省数字监管应用建模技能竞赛”提供技术支撑!

11月6日至8日,2023年浙江省数字监管应用建模技能竞赛在省金华监狱举行。浙江省监狱管理局党委书记、局长王争,司法部监狱管理局规划科技处处长常家瑛,浙江省监狱管理局党委委员、副局长朱永忠出席本次活动。 本次建模大赛共有来自全省监狱系…

Genio 500_MT8385安卓核心板:功能强大且高效

Genio 500(MT8385)安卓核心板是一款功能强大且高效的AIoT平台,内置的AI处理器(APU)工作频率可达500MHz,支持深度学习、神经网络加速和计算机视觉应用。配合高达2500万像素的摄像头,可以为AI相机应用提供清晰、精确的图像,如人脸识…

有哪些相见恨晚的stm32学习的方法?

有哪些相见恨晚的stm32学习的方法? 单片机用处这么广,尤其是STM32生态这么火!如何快速上手学习呢? 你要考虑的是,要用STM32实现什么?为什么使用STM32而不是用8051?是因为51的频率太低&#xff…

element + vue3,级联选择器实现省市区

由于es6支持哈希&#xff0c;所以数据量只要不太大&#xff0c;就不需要对el-cascader进行点击后在调接口出现下一级&#xff0c;很简单的就是直接获取所有数据。 <template><div><el-cascader :modelValue"modelValue" :props"innerProps"…

NC Cloud uploadChunk文件上传漏洞复现

简介 NC Cloud是指用友公司推出的大型企业数字化平台。支持公有云、混合云、专属云的灵活部署模式。该产品uploadChunk文件存在任意文件上传漏洞。 漏洞复现 FOFA语法&#xff1a; app"用友-NC-Cloud" 访问页面如下所示&#xff1a; POC&#xff1a;/ncchr/pm/fb/…

2023年A特种设备相关管理(锅炉压力容器压力管道)证模拟考试题库及A特种设备相关管理(锅炉压力容器压力管道)理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;证模拟考试题库及A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;理论考试试题是由安全生产模拟考试一点通提供&#xff0c;A特…

STM32H743 RTC精密数字校准 深度剖析

一、问题 项目中数据报文收到的RTC时间总是会慢一些,经过实际几天的测试得出结论:24小时要慢5S左右。根据手册我了解到可以有误差但不会差这么多,所以进行了如下分析并解决问题。 二、分析 1.影响RTC准确性的因素罗列 硬件基础误差(也就是待校准部分) …

亚马逊,shopee,lazada自养号测评:提高店铺曝光,增加产品销量

如何在较短的时间内让自己的店铺排名升高&#xff0c;提高产品销量&#xff0c;除了依靠选品和广告之外&#xff0c;亚马逊测评 在店铺的运营中也是必不可少的环节。 自养号测评对亚马逊卖家来说&#xff0c;是运营店铺的重要手段之一。一个产品想要有更好的曝光、更高的转化率…

一个开源的汽修rbac后台管理系统项目,基于若依框架,实现了activiti工作流,附源码

文章目录 前言&源码项目参考图&#xff1a; e店邦O2O平台项目总结一、springboot1.1、springboot自动配置原理1.2、springboot优缺点1.3、springboot注解 二、rbac2.1、概括2.2、三个元素的理解 三、数据字典3.1、概括与作用3.2、怎么设计3.3、若依中使用字典 四、工作流—…

剪辑视频怎么把说话声音转成文字?

短视频已然成为了一种生活潮流&#xff0c;我们每天都在浏览各种短视频&#xff0c;或者用视频的形式记录生活&#xff0c;在制作视频的时候&#xff0c;字幕是一个很大的问题&#xff0c;给视频添加字幕可以更直观、更方便浏览。手动添加太费时间&#xff0c;下面就给大家分享…

spark算子简单案例 - Python

第1关&#xff1a;WordCount - 词频统计 # -*- coding: UTF-8 -*- from pyspark import SparkContextif __name__ "__main__":"""需求&#xff1a;对本地文件系统URI为&#xff1a;/root/wordcount.txt 的内容进行词频统计"""# ****…

uniapp的Vue2,Vue3配置跨域(proxy代理)

vue2 找到manifest.json文件&#xff0c;通过源码视图的方式打开文件&#xff1a;在文件中添加一下代码即可完成代理&#xff1a; "h5": {"devServer": {"disableHostCheck": true, //禁止访问本地host文件"port": 8000, //修改项目…

使用VSCode调试全志R128的C906 RISC-V核心

使用 VSCode 调试 调试 XuanTie C906 核心 准备工具 T-Head DebugServer&#xff08;CSkyDebugServer&#xff09; - 搭建调试服务器 下载地址&#xff1a;T-Head DebugServer手册&#xff1a;T-Head Debugger Server User Guide驱动&#xff1a;cklink_dirvers VSCode - 开…

邮箱设置第三方登录授权码获取

以QQ邮箱为例 QQ邮箱设置——账户 开启POP3/SMTP服务——完成验证后获得授权码&#xff0c;保存授权码

吴恩达《机器学习》9-1-9-3:反向传播算法、反向传播算法的直观理解

一、正向传播的基础 在正向传播中&#xff0c;从神经网络的输入层开始&#xff0c;通过一层一层的计算&#xff0c;最终得到输出层的预测结果。这是一种前向的计算过程&#xff0c;即从输入到输出的传播。 二、反向传播算法概述 反向传播算法是为了计算代价函数相对于模型参数…

惠普打印机秋季新品震撼登场,以卓越品质赢得用户信赖,打造无限创新打印体验

北京&#xff0c;2023年11月20日 —— 今日&#xff0c; 2023惠普打印机秋季新品发布暨合作伙伴大会于北京举办。本次发布会以“品质 信赖&#xff0c;创新无界”为主题&#xff0c;惠普公司面向中国市场推出了四大系列、四十三款全新的打印产品&#xff0c;进一步丰富了其在细…

Vue3+ElementPlus纯前端分页(手撕分页),无需修改后端

前提&#xff1a;先把pagination安装上先 1、在script中加上 // 实现分页 const currentPage ref(1); const pageSize ref(10); const totalItems computed(() > tableData.value.length); const paginatedData computed(() > {const start (currentPage.value - 1…

想做副业在哪里找?做好这些副业平台就够了

每个人在生活中都有一些额外的需求和理想&#xff0c;所以越来越多的人开始寻找副业来实现小目标。但是&#xff0c;但是寻找副业的过程并不容易&#xff0c;需要考虑到自己的时间和能力&#xff0c;还有选择一个靠谱的平台。其实&#xff0c;副业平台并不太难&#xff0c;只要…