Sass语法---sass的安装和引用

什么是Sass

Sass(英文全称:Syntactically Awesome Stylesheets)

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码,易于组织和维护。

Sass 文件后缀为 .scss。

为什么使用 Sass?

CSS 本身语法不够强大,代码重复繁琐,无法实现复用,而且在代码也不方便维护,

Sass 引入合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass安装

NPM 安装 

npm install -g sass

9911c3058bf14dd0ad73bbf1244fafff.png

在控制台上输入sass,可以看到如上内容则表示sass安装成功

第一个sass文件

sass兼容所有原css的语法,并在此基础上新增了部分内容

.box{width: 100px;height: 100px;background-color: rgb(255, 227, 117);
}

263ddfd3bd594fbb9ef716244ae79f5b.png

在控制台输入sass style.scss可以将sass代码转换成css代码

da1cbffb5019409090b7a0f6723524bf.png

 在控制台输入sass style.scss style.css可以将sass代码转换成css代码并将css代码存放到style.css文件中,可以看到产生了两个文件.css和.css.map文件

也可以下载Live Sass Compiler插件

6f48f137ca5d47e3aa72f806b6c01acd.png

点击 右下角的watch并保存sass就可以立即生成对应的css文件

引入生成的css后可以看到结果

5720281ef0a244fbb0cf5fd76aaa3f7e.png

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

每日OJ题_贪心算法二④_力扣2418. 按身高排序

目录 力扣2418. 按身高排序 解析代码 力扣2418. 按身高排序 2418. 按身高排序 难度 简单 给你一个字符串数组 names ,和一个由 互不相同 的正整数组成的数组 heights 。两个数组的长度均为 n 。 对于每个下标 i,names[i] 和 heights[i] 表示第 i 个…

C#简单创建DLL文件并调用

DLL是Dynamic Link Library的缩写,意为动态链接库。动态链接库其实是由编译器将一系列相关的类型编译、链接并封装成一个独立的文件,与对其进行调用的程序分开。这样一个独立的文件相当于程序的一个模块,如果需要对程序进行更新,只…

如何完全卸载QT

第一步,用QT自带的软件卸载QT 第二步,卸载下面路径的所有QT配置 C:用户/(你的用户)/AppData/Local/目录下所有与Qt相关内容 C:用户/(你的用户)/AppData/Local/Temp/所有与Qt相关内容 C:用户/(你的用户)/AppData/Roaming/所有与Qt相关内容

华为机考入门python3--(19)牛客19- 简单错误记录

分类:字符串 知识点: 分割字符串 my_str.split(\\) 字符串只保留最后16位字符 my_str[-16:] 列表可以作为队列、栈 添加元素到第一个位置 my_list.insert(0, elem) 增加元素到最后一个位置 my_list.append(elem) 删除第一个 my_list.pop(0)…

ElasticSearch01(ES简介,安装ES,操作索引,操作文档,RestAPI)【全详解】

目录 一、ES简介 1. 数据库查询的问题 2. ES简介 1 ElasticSearch简介 2 ElasticSearch发展 3. 倒排索引【面试】 1 正向索引 2 倒排索引 4. ES和MySql 5. 小结 二、安装ES 1. 方式1:使用docker安装 1 准备工作 2 创建ElasticSearch容器 3 给ElasticSearch配置i…

从零开始学AI绘画,万字Stable Diffusion终极教程(一)

【第1期】SD入门 2022年8月,一款叫Stable Diffusion的AI绘画软件开源发布,从此开启了AIGC在图像上的爆火发展时期 率先学会SD的人,已经挖掘出了越来越多AI绘画有趣的玩法 从开始的AI美女、线稿上色、真人漫改、头像壁纸 到后来的AI创意字、AI…

ARP欺骗使局域网内设备断网

一、实验准备 kali系统:可使用虚拟机软件模拟 kali虚拟机镜像链接:https://www.kali.org/get-kali/#kali-virtual-machines 注意虚拟机网络适配器采用桥接模式 局域网内存在指定断网的设备 二、实验步骤 打开kali系统命令行:ctrlaltt可快…

Docker 加持的安卓手机:随身携带的知识库(一)

这篇文章聊聊,如何借助 Docker ,尝试将一台五年前的手机,构建成一个随身携带的、本地化的知识库。 写在前面 本篇文章,我使用了一台去年从二手平台购入的五年前的手机,K20 Pro。 为了让它能够稳定持续的运行&#xf…

MySQL技能树学习——数据库组成

数据库组成: 数据库是一个组织和存储数据的系统,它由多个组件组成,这些组件共同工作以确保数据的安全、可靠和高效的存储和访问。数据库的主要组成部分包括: 数据库管理系统(DBMS): 数据库管理系…

【LeetCode刷题】410. 分割数组的最大值

1. 题目链接2. 题目描述3. 解题方法4. 代码 1. 题目链接 410. 分割数组的最大值 2. 题目描述 3. 解题方法 题目中提到的是某个和的最大值是最小的,这种题目是可以用二分来解决的。 确定区间,根据题目的数据范围,可以确定区间就是[0, 1e9]…

C语言/数据结构——每日一题(分割链表)

一.前言 今天在LeetCode觉得很不错,想和大家们一起分享这道链表题——分割链表:https://leetcode.cn/problems/partition-list-lcci废话不多说,让我们直接进入正题吧。 二.正文 1.1题目描述 1.2题目分析 大致思路:我们可以通过…

如何使用 GPT API 从 PDF 出版物导出研究图表?

原文地址:how-to-use-gpt-api-to-export-a-research-graph-from-pdf-publications 揭示内部结构——提取研究实体和关系 2024 年 2 月 6 日 介绍 研究图是研究对象的结构化表示,它捕获有关实体的信息以及研究人员、组织、出版物、资助和研究数据之间的关…

从零开始搭建Springboot项目脚手架1:新建项目

1、技术栈 SpringBoot 3.2.5: 2、 新建项目 使用SpringInitializr 选择Lombok、Configuration Processor、Spring Web,同时IDEA也要安装Lombok插件 删除多余的Maven目录、Maven文件,把HELP.md改成README.md。 当然前提是已经安装好Maven和配…

Linux——socket编程之tcp通信

前言 前面我们学习socket的udp通信,了解到了socket的概念与udp的实现方法,今天我们来学习一下面向连接的tcp通信。 一、tcp套接字创建 UDP和TCP都是通过套接字(socket)来实现通信的,因此TCP也得使用socket()接口创建…

机器学习批量服务模式优化指南

原文地址:optimizing-machine-learning-a-practitioners-guide-to-effective-batch-serving-patterns 2024 年 4 月 15 日 简介 在机器学习和数据分析中,模型服务模式的战略实施对于在生产环境中部署和操作人工智能模型起着至关重要的作用。其中&…

Elasticsearch:对 Java 对象的 ES|QL 查询

作者:Laura Trotta ES|QL 是 Elasticsearch 引入的一种新的查询语言,它将简化的语法与管道操作符结合起来,使用户能够直观地推断和操作数据。官方 Java 客户端的新版本 8.13.0 引入了对 ES|QL 查询的支持,提供了一个新的 API&…

【前端学习——css】css实现给背景的图片加模糊

我在制作自己的博客的时候,打算做个封面,封面用半透明颜色盖住了预览图,上面印上了文字,但背景图太乱了,所以打算给背景加模糊效果。 效果 方法 主要就是利用这个属性 backdrop-filter: blur(5px);属性很简单&#x…

Flutter笔记:Widgets Easier组件库(9)使用弹窗

Flutter笔记 Widgets Easier组件库(9):使用弹窗 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress o…

排序算法之希尔排序(缩小增量排序)

希尔排序是插入排序的优化,如果不了解插入排序可以看排序算法之插入排序-CSDN博客这篇博客,希尔排序算法通过对原始数据集使用 gap 分组的方法,先将数据分组进行插入排序,随着排序的进行,逐渐减小 gap 的值&#xff0c…

一个肉夹馍思考的零耦合设计

刷抖音听说知识付费是普通人的一个收入增长点,写了三十几篇文章一毛钱没赚,感觉有点沮丧。天上下着小雨雨,稀稀嗦嗦的,由于了很久还是买了一个🤨。 忽然觉得生活有点悲催,现在已经变得斤斤计较,…