在html中使用sass

已于 2023-08-20 16:03:42 修改
阅读量4.8k 收藏 12
点赞数 10
分类专栏： 前端踩坑合集 文章标签： 前端 vue javascript visual studio code
于 2021-01-15 15:44:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45895806/article/details/112532054
版权

.html文件当中是不能直接使用sass的, 它需要转译一下使用

1. 在vscode编辑器里安装如下插件

在这里插入图片描述

在vscode编辑器里装好这个插件后 , 在项目目录建一个XXXX.scss文件

比如:
在这里插入图片描述
然后在编写的过程中 ,打开编辑器终端 点击
在这里插入图片描述

它就会实时的监听你编写的scss文件,生成css文件 ,并且实时更新,

如下

在这里插入图片描述
而你的html当中只需要引入生成的css文件就行了
项目结束后根据需要是否删除 .scss 文件和 .map文件

李泽举
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
html如何调用sass,HTML5学习之对SASS工具的应用
weixin_35319943的博客
06-04 693
原标题：HTML5学习之对SASS工具的应用对于大部分前端程序员来说，最痛苦的是莫过于写样式(css)了,试想一下，当做了 一个炫酷插件，或者实现了多牛逼的功能，可是没有完美样式，是不被人宠幸的，巨了解，我身边绝大部分的人都及其不喜欢写样式，一方面：嵌套多层元素时，那选择器的写法可不建议简写，毕竟涉及到样式覆盖与权重的问题;第二方面：对于某些程序员来说这与体力活不差一二。可是在我看来，一个优秀的，...
SASS在HTML5移动应用开发中的应用
01-30
Ionic移动开发框架使用sass生成css，极大地提高了写css地效率和模块化程度，使得css开发不再是一件苦差事。ionic框架默认css是通过SASS生成的，同样你可以方便的写自己的sass，扩展或覆盖默认的css，最终只生成一个...
html-css-sass-basics
03-18
html-css-sass-basics
pug-sass-starter：使用Pug和Sass构建HTML模板的简单入门
02-05
哈巴狗起步器 使用Pug和Sass构建HTML模板的简单入门。 要求 确保您的计算机上已安装 ， 和 。 安装 使用Terminal导航到pug-sass-starter文件夹所在的目录。 执行npm install 。 跑 执行npm start或gulp 。 在网络浏览器上打开http://localhost:8080/ 。 建立 执行gulp build 。 文件夹结构 + assets + css : This folder contains prebuild files, styles.css and styles.min.css. + fonts : Put your
在普通html文件中使用scss
最新发布
m0_56597301的博客
04-11 209
使用的代码编辑器是。
在html文件中使用sass
qczzc的博客
05-11 1808
随着前端样式的丰富多变，基本的css编写已经不能满足开发需求，因此需要一个能够简化css开发的工具；sass，一个css预处理工具，他可以帮助开发人员简化样式编写，让开发效率得到很大的提高，同时对css的维护也变得更加方便。提示：以下是本篇文章正文内容，下面案例可供参考。
入门sass （基本使用）
qczzc的博客
05-11 256
点击查看使用。sass
html中scss文件是什么,sass学习--在htm文件中使用
weixin_39692045的博客
06-15 384
一、导语最近的战狼2好火爆啊，每天看战狼2的票房一路高飙，我估计比吴京还开心。看了这部戏的拍摄过程，除了敬佩就是踏实，是的，吴京是电影圈隔了这么久后能踏踏实实做电影的了,纯属个人见解，不喜请忽略。。。。。。。。。。。。。。。。。。。。。说道踏实，好吧，我要把基础给踩踩了，说说最简单的sass是怎么在html中运行的二、正文(文中编辑器使用webstorm)1、创建项目untitlecl(如此随意，...
如何在.html中使用scss
io_123io_123的博客
11-11 5573
如何在.html中使用scss
原生html项目使用sass
weixin_48763229的博客
06-16 512
左边(./css/sass)是需要编译的caass文件或者scss文件 编译到 右边（./css）目录。1.使用npm init 构建 package.json文件。2.使用pnpm安装sass。
html怎么引入sass样式,[样式设置] 使用sass格式的方式
weixin_39998462的博客
07-03 1057
用Angular CLI设置样式格式默认样式格式是 css， 使用 scss | sass 作为样式ng new my-project --style=scss# 可选flags--style=scss--style=sass--style=less将已经存在的css样式格式项目转换为scss告诉angular开始处理 scss | sass 文件ng set defaults.styleExt ...
HTML文件中怎么引用SCSS
xxJokemanxx的博客
05-22 4416
一、先将scss编译成为css文件 1.安装sass： https://www.sass.hk/install/ 在安装sass之前要安装 Ruby ,通过上面链接上的步骤即可 2.编译scss文件 3.生成css文件 二、在html中通过link正常引入css文件即可
sass-cn:Sass中文文档、Sass教程
05-30
SASS & SCSS最新中文文档当前版本，，更多地址由于翻译仓促，如果您发现了错误或者翻译不当之处，欢迎您建指正，感谢您的支持。
vue cli webpack中使用sass的方法
11-30
2：html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid...
Sass-in-hand:在我的项目中使用 Sass
05-31
手把手教你 在我的项目中使用 Sass。
Penguin:学习使用HTML，SASS和JavaScript制作企鹅
05-10
学习使用HTML，SASS和JavaScript制作企鹅 细节 该项目是有关JavaScript函数和关键帧动画的基本示例。 实时申请网址 :sparkles: 该应用程序部署在 单击链接以查看应用程序 克隆 :crystal_ball: 将项目克隆到本地...
HTML文件如何静态引入scss文件
热门推荐
weixin_45386734的博客
04-16 1万+
理论上html是不能引入scss文件的，只能引入css文件，所以在使用scss 时，可以动态监听scss，更改后翻译为css文件，将css文件静态引入html中。 具体方法如下：（比较原始，不依赖于ide工具） 安装sass工具，可以局部安装，也可以全局安装；方法是打开cmd命令行工具，在有npm（或者其他工具，如yarn）的前提下，npm install sass -g (全局安装 带 ...
如何在html中编写scss,编写Sass的八个技巧
weixin_34193979的博客
06-18 675
Sass可以编译出非常优秀的CSS样式表，或者说，这就是Sass要做的事情。有效的使用Sass可以帮助你构建出干净的有效的CSS，但如果运用不好，Sass其实会让你的CSS文件变得更大，并且添加一些不必要的和重复的CSS代码。下面一些编写Sass小技巧，可以有效帮助你编写出更好的Sass。１、你的Sass结构在你的项目中使用Sass，管理好网站的结构是对每一个项目最重要的一点。使用Partials...
在Vue中 使用sass配合 vw vh 做移动端自适应布局
06-07
可以使用`node-sass`和`sass-loader`来解析`.scss`文件，同时使用`postcss-loader`和`autoprefixer`来自动添加浏览器厂商前缀，最后使用`css-loader`和`style-loader`将CSS样式注入到HTML页面中。 在Vue项目中，可以在`vue.config.js`文件中进行配置： ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "@/assets/scss/_variables.scss"; @import "@/assets/scss/_mixins.scss"; ` }, postcss: { plugins: [ require('autoprefixer')({ overrideBrowserslist: ['last 2 versions', '>1%'] }) ] } } } } ``` 然后，可以在`.vue`文件中使用`<style lang="scss">`标签来编写Sass样式，例如： ```scss // _variables.scss $base-font-size: 16px; $base-width: 750px; // _mixins.scss @function px2rem($px) { @return ($px / $base-font-size) * 1rem; } @mixin center() { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // index.vue <style lang="scss"> .container { width: $base-width; margin: 0 auto; } .title { font-size: px2rem(32px); margin-top: px2rem(20px); } .box { width: 50vw; height: 50vh; background-color: #f00; @include center(); } </style> <template> <div class="container"> <h1 class="title">Hello World!</h1> <div class="box"></div> </div> </template> ``` 以上示例中，`$base-font-size`和`$base-width`变量定义在`_variables.scss`中，`px2rem()`和`center()`混合宏定义在`_mixins.scss`中，然后在`index.vue`中引入并使用它们来实现移动端自适应布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李泽举

如对你有帮助,那我就没白写

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值