首页 > 其他分享 >关于CSS、SCSS、SASS、HTML单页面引入SCSS

关于CSS、SCSS、SASS、HTML单页面引入SCSS

时间:2023-02-01 16:44:18浏览次数:43  
标签:SCSS scss SASS HTML css CSS 页面

1.CSS、SCSS、SASS

  CSS是开发人员熟知的一种用于页面样式开发的语言,可以通过内容的分离控制减少代码的重复性,降低代码的复杂程度。

  SASS 与 SCSS 都是 CSS 预处理器,可包含在基于 CSS 的 UI(用户界面)或前端框架中以简化开发。 这些 SASS 与 SCSS 框架在高级别的 CSS 功能方面提供了强大的功能。 预处理器的选择取决于通过以有效的方式做出权衡选择来使应用程序高效工作所需的功能和特性。

  SCSS 作为 SASS 的主要语法引入,它建立在现有的 CSS 语法之上,不仅包含 CSS 的所有功能,还添加了一些额外的特殊功能。可以说 SCSS 是 CSS 的一种超集,其中 CSS 的所有功能都将在 SCSS 中,填补了CSS与SASS之间的空白和不兼容。

  而SASS是CSS的扩展,提供嵌套规则、继承、Mixins等特性。与SCSS相比,SASS更易于使用并且需要更少的语法或配置,无需使用分号、曲线、大括号等,推荐用于需要更快开发范围和更容易开发复杂组件的较大应用程序的情况,而SCSS可以用于优化Mixin特性的情况,以及许多其他有效技术。

2.HTML单页面引入SCSS

  理论上html页面只能引入 .css 文件,如果要引入 .scss 文件,需要安装 sass 工具动态监听 scss 更改,更改后将 scss 文件即被编译为 css 文件,将编译后的 css 文件静态引入到 html 页面中。

 (1)sass工具安装:在有 npm 或 yarn 前提下安装(全局安装 带 -g,局部不用)

npm install sass -g 

 (2)监听 scss 文件更改

(1)监听文件夹 :sass --watch scss:css

(2)监听单个文件:sass --watch a.scss:a.css

 (3)将 css 文件引入 html 页面

 

 待补充......

标签:SCSS,scss,SASS,HTML,css,CSS,页面
From: https://www.cnblogs.com/Steal-cha-of-Melon/p/walon_second_title.html

相关文章

  • less与sass的区别
    1.关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$2.处理机制不同,less是在客户端处理,sass是在服务端处理,相比较之下前者解析会比后者慢一点3.运行环境不同,sass是要......
  • python爬虫(三)- HTML解析之BeautifulSoup4
    BeautifulSoup可以从HTML、XML中提取数据。官网https://www.crummy.com/software/BeautifulSoup/官方中文文档https://www.crummy.com/software/BeautifulSoup/bs4/doc.......
  • Gin框架实战——HTML渲染
      最近使用Go的Gin框架做了个简单的前端网页,记录一下细节~1.加载静态文件    由于网页需要使用css、图片等渲染,而静态文件必须先声明:否则模板中调用加载不出......
  • HTML5本地存储IndexedDB基础介绍(-)-数据库的简单增删改查
    //https://www.jianshu.com/p/4c74cbe60d83?_=1509695140<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="viewport"content="width=devi......
  • pytest html报告
    pytest-html是pytest用于生成测试结果的html插件。可以登录github下载,可以使用pip进行安装。pip安装命令:pipinstallpytest-html以下是pytest-html通过pip安装的截图......
  • HTML标签
    HTML标签(上)1.1语法规范:标签是由尖括号包围的关键词,eg:<html>通常是成对出现的,eg:<html></html>称为双标签有特殊的标签是单个标签,<br/>单标签1.2标签关系双......
  • HTML5新标签
      最近在学习Vue的基础知识,发现有关H5的新内容不是很熟悉,再次整理一下1.头部标签<header><header></header> 2.导航标签<nav><nav>导航</nav> 3.......
  • HTML5实现动态视频背景
    HTML5实现动态视频背景html代码<videoid="v1"autoplayloopmuted><sourcesrc="https://wallpaperm-mp4.duba.com/scene/preview_video/97ba6b60662ab4f31ef0......
  • Html 页面 如何等比例缩小 放大
    Html页面如何等比例缩小放大<!--缩小0.8倍-->style="transform:scale(0.8,0.8);"......
  • 解决html2canvas.js和pdf.js导出页面问题
    最近在做项目时有这么一个需求,需要将当前html页面导出pdf到本地。由于之前是做过类似的功能的借助了两个插件分别是html2canvas.js和pdf.js,本以为是非常顺利就能完成的,实......