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.mzph.cn/web/6168.shtml

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

相关文章

centos7安装真的Redmine-5.1.2+ruby-3.0.0

下载redmine-5.1.2.tar.gz,上传到/usr/local/目录下 cd /usr/local/ tar -zxf redmine-5.1.2.tar.gz cd redmine-5.1.2 cp config/database.yml.example config/database.yml 配置数据连接 #编辑配置文件 vi config/database.yml #修改后的内容如下 product…

【介绍下Apache的安装与目录结构】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

使用python遍历各个文件夹下以docx为后缀的文件并移动到指定的文件夹

使用python遍历各个文件夹下以docx为后缀的文件并移动到指定的文件夹 import os import shutilsource_directory "./" # 源文件夹路径 destination_directory "../word" # 目标文件夹路径 file_extension ".docx" # 文件后缀名# 遍历源文…

Vitis HLS 学习笔记--MAXI手动控制突发传输

目录 1. 简介 2. MAXI 突发传输详解 2.1 突发传输的前置条件 2.2 hls::burst_maxi 详解 2.2.1 基本知识 2.2.2 hls::burst_maxi 构造函数 2.2.3 hls::burst_maxi 读取方法 2.2.4 hls::burst_maxi 写入方法 2.3 示例一 2.4 示例二 3. 总结 1. 简介 这篇文章探讨了在…

深入剖析序列的特殊方法

协议和鸭子类型 开始之前,我先介绍协议和鸭子类型。在Python中创建功能完善的序列类型无需继承,实现符合序列协议的方法即可。那么说的协议是什么呢? 在面向对象编程中,协议是非正式的接口,只在文档中定义,不在代码中定义。例如:Python的序列协议只要实现__len__和__g…

Python版本管理工具-pyenv

Pyenv是一个Python版本管理工具。 Pyenv允许用户在同一台机器上安装多个版本的Python,并能够轻松切换使用这些版本。 一、安装 Mac下直接使用Homebrew安装 # 更新 Homebrew 的软件列表 brew update # 安装pyenv brew install pyenv# 验证是否安装成功 pyenv -v# …

React框架是什么

react是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来 声明式 你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI 基于组件 组件时React最重要的内容,组件表示…

解锁工业场景下的时序因果发现,清华阿里巴巴伯克利联合提出RealTCD框架:通过大语言模型提升发现质量!

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享,与你一起了解前沿深度学习信息! LLM-Enhanced Causal Discovery in Temporal Domain from Interventional Data 引言:AI在信息技术运营中的革命性应用 在现代信息技术运营&#…

远程链接linux

远程连接 ssh 远程登录操作,ssh会对用用户进行身份信息的验证,会对两台主机之间发通信数据进行加密 安装 ssh 远程登录的服务端 yum install -y openssh-server启动 ssh 服务 systemctl start ssh.service 关闭 ssh 服务 systemctl stop ssh.service …

Tableau面试题及参考答案

什么是Tableau? Tableau 是一款强大的数据可视化和商业智能工具,它允许用户通过直观的拖放界面连接到各种数据源,创建交互式和可共享的仪表板与报告。Tableau 的设计理念是使数据的分析和理解变得简单,即便是没有深厚技术背景的用户也能够轻松地探索和展示数据背后的故事。…

通讯录(基于单链表)

通讯录(基于单链表) 我们知道 链表是由一个个节点组成的,我们让节点的数据域去存储一个结构体 这个结构体是存储联络人数据的一个结构体,里面放着许多信息: // 要在链表的每一个节点中存储联系人数据 // 那我们就要…

java发送请求2次开发-get请求json

因为你请求参数不为空,接口都会把这个参数带上 所以借鉴HttpPost类 继承这个类, 这个类是可以带消息的 httpgetwithentity,httpget请求带上消息 复写 构造方法复制过来进行使用 二次开发类让其get请求时可以发送json

基于大爆炸优化算法的PID控制器参数寻优matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于大爆炸优化算法的PID控制器参数寻优matlab仿真。对比优化前后的PID控制输出。 2.系统仿真结果 3.核心程序与模型 版本:MATLAB2022a .....................…

测试腾讯云的高防CC抵御了攻击

网站需要安装防止CC攻击,因为CC攻击是一种常见的网络攻击,它会对网站造成严重的影响。 CC攻击(Cybercrime Control)是指向网站发起大量虚假请求的攻击,目的是使网站的资源耗尽,无法正常运行。CC攻击与DDoS…

Linux 查看所有进程 ps -ef 命令详解, 查看网络链接信息 netstat -tuplan 命令详解

ps -ef 指令 在Linux系统中,ps 是一个非常基础且强大的命令行工具,用于报告当前系统中运行的进程的状态。它是 “Process Status” 的缩写。通过使用不同的选项和参数,ps 命令能够以多种格式展示进程信息,帮助用户了解系统中进程…

python-pytorch官方示例Generating Names with a Character-Level RNN的部分理解0.5.03

pytorch官方示例Generating Names with a Character-Level RNN的部分理解 模型结构功能关键技术模型输入模型输出预测实现 模型结构 功能 输入一个类别名和一个英文字符,就可以自动生成这个类别,且以英文字符开始的姓名 关键技术 将字符进行one-hot编…

通过符号程序搜索提升prompt工程

原文地址:supercharging-prompt-engineering-via-symbolic-program-search 通过自动探索​​大量提示变体来找到更好的提示 2024 年 4 月 22 日 众所周知,LLMs的成功在很大程度上仍然取决于我们用正确的指导和例子来提示他们的能力。随着新一代LLMs变得越…

JAVA面试题---WEB部分

网络通讯 TCP与UDP TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的、 可靠的、 基于 IP 的传输层协议。 UDP 是 User Datagram Protocol 的简称,中文名是用户数据报协议,是 OSI 参考模 型中的传输层协议,它是…

在图像处理领域,机器学习方法和深度学习方法的优势

在图像处理领域,机器学习方法和深度学习方法都被广泛应用,但两者有一些不同点和各自的优势。 机器学习 机器学习方法是利用数据和统计学方法来构建模型和算法,从而对图像进行分类、分割、特征提取等任务。常见的机器学习方法包括支持向量机…

【杂谈】记录代码中遇到的问题(持续更新中)

写代码时经常遇到各种各样的bug,有时候很难发现,下面是我自己的一些见解 1.数组开在全局区和栈区所能开到的最大范围是不一样的 main函数里的数组,范围最大可以开到1e5 全局区的函数最大可以开到1e8的范围 2.#define int long long 写#dein…