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博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

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版本管理工具-pyenv

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

解锁工业场景下的时序因果发现,清华阿里巴巴伯克利联合提出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 …

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…

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…

【Linux】常用命令大揭秘,轻松驾驭终端世界

常见命令大全 概念1.1:开源、闭源的区别1.2:应用场景 发行版XShell3.1:使用XShell登入主机3.2:普通用户的增加、删除3.3:查看账户的信息whoami指令who指令 文件和目录基本命令4.1:指令的周边知识文件路径Li…

css响应式布局左、右上、右中布局

一、布局效果 二、布局代码 <div class"parent"><div class"left">菜单</div><div class"right"><div class"right-top">顶部导航</div><div class"right-content"></div>…

一个C++小程序调试过程记录

Top 20 C Projects With Source Code [2024 Update]https://www.interviewbit.com/blog/cpp-projects/ 这个网页有一些简单的C程序的源码&#xff0c;闲来无事&#xff0c;把第一个程序&#xff08;Bookshop Management System Using C&#xff09;的源码下载了下来。 源文件…

Mybatis进阶(映射关系多对一 )

文章目录 1.需求分析2.应用实例&#xff08;xml配置&#xff09;1.数据表设计2.entity设计&#xff08;不要使用toString会栈溢出&#xff09;1.Pet.java2.User.java 3.编写Mapper1.PetMapper.java2.UserMapper.java 4.编写Mapper.xml1.UserMapper.xml2.PetMapper.xml 5.测试Us…

基于缓存注解的时间戳令牌防重复提交设计

文章目录 一&#xff0c;概述二&#xff0c;实现过程1、引入pom依赖2、定义缓存管理3、时间戳服务类4、模拟测试接口 三&#xff0c;测试过程1&#xff0c; 模拟批量获取2&#xff0c; 消费令牌 四&#xff0c;源码放送五&#xff0c;优化方向 一&#xff0c;概述 API接口由于…

uniapp 异步加载级联选择器(Cascader,data-picke)

目录 Props 事件方法 inputChange事件回调参数说明&#xff1a; completeChange事件回调参数说明&#xff1a; temList 属性Object参数说明 defaultItemList 属性Object参数说明 在template中使用 由于uniapp uni-ui的data-picke 不支持异步作者自己写了一个 插件市场下…

vue3 ——笔记 (表单输入,监听器)

表单输入 在Vue 3中&#xff0c;v-model指令的用法稍有不同于Vue 2。在Vue 3中&#xff0c;v-model指令实际上是一个语法糖&#xff0c;它会自动将value属性和input事件绑定到组件或元素上&#xff0c;以实现双向数据绑定。 在自定义组件中使用v-model时&#xff0c;需要在组…