scss、sass 和 css 的区别
项目中，会经常使用诸如scss、sass的style样式，它们和css有什么区别呢？
less大家应该都不陌生，同样的scss、sass一样，它们都可以称为：CSS预处理器语言。
简单来说，
scss和sass的区别，就在于 文件扩展名不同：“.sass”和“.scss”
sass是以严格缩进式语法规则来书写的，不带大括号{}和分号;- 而
SCSS的语法和```CSS``书写语法类似
下面介绍一下它们的编译规则：
sass的编译
1. sass编译的方法：
- 命令编译
- 自动化编译
- GUI工具编译
注意： “单文件编译” 和 ”多文件编译” 。
2. sass输出方式：
| 输出方式 | 编译时，携带参数 | 参考图 |
|---|---|---|
sass嵌套输出方式 nested
|
sass --watch test.scss:test.css --style nested
|
图1 |
sass展开输出方式 expanded
|
sass --watch test.scss:test.css --style expanded
|
图2 |
sass展开输出方式 compact
|
sass --watch test.scss:test.css --style compact
|
图3 |
sass展开输出方式 compressed
|
sass --watch test.scss:test.css --style compressed
|
图4 |
截图 对比：
除了以上的介绍之外，
sass还可以进行加法/减法、乘法、除法、变量计算、数字运算、字符运算、颜色运算，等等。
具体内容本文不介绍。
以上就是关于“scss、sass 和 css 的区别”的简单介绍。
scss、sass 和 css 的区别相关推荐
- .scss 转为 .css,Windows 下将 scss/sass 转换为 css
有时需要将 scss 或 sass 文件转换为 css,搜索到了方法,这里记录下具体操作步骤. 一.下载安装 RubyInstaller 工欲善其事必先利其器,这里需要用到的工具为 RubyInsta ...
- SCSS/SASS（上）
目录 介绍 SCSS编译 命令编译 常见的编译错误解决方案 不同样式风格的输出方法 嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compre ...
- .scss和.css的区别,css - SCSS和Sass有什么区别？
css - SCSS和Sass有什么区别? 从我一直在阅读的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言. 与SCSS有什么区别? 它应该是同一种语言吗? 类似? 不同? bruno ...
- sass、scss、和css的关系
说到css,相信大家都知道,css样式是用来修饰网页页面结构的.那么sass.scss又是做什么的呢?接下来我们来一起了解一下. 要了解css.sacc和scss的关系就要从css预处理器开始说起. ...
- sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
- 如何在 vue-cli v3.0 中使用 SCSS/SASS
在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间.关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案.前提是在使用 vue-cli 生成项目时 ...
- sass编译css(转自阮一峰)
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...
- CSS HACK 区别 IE6、IE7、IE8、Firefox兼容性
转载链接:http://developer.51cto.com/art/201009/226787_1.htm 本文向大家描述一下如何使用CSS HACK区别IE6.IE7.IE8.Firefox兼容 ...
- readonly与disabled属性在css中区别
论readonly与disabled在css中区别 之前在项目中遇到的一个问题,现在想把它记录下来. 当项目需求上需要在文本框中禁用输入某个值的时候,我第一个反应是用了disabled,因为之前一直接 ...
最新文章
- Django源码分析1:创建项目和应用分析
- 适合初学者对Yaf框架的学习（一）
- iphone屏幕镜像如何全屏_苹果系统截屏录屏+标记剪辑功能详解( iPhone/iPad/Mac)
- Effective Java 英文 第二版 读书笔记 Item 14:In public classes,use accessor methods,not public fields...
- Mysql修改字段名和长度_mysql中修改表字段名/字段长度/字段类型详解
- 103. 二叉树的锯齿形层次遍历/102. 二叉树的层序遍历
- Target Unreachable, identifier 'userInfoUpdateBean' resolved to null 错误问题描述以及解决
- 《spring-boot学习》-08-spring boot 优雅的使用mybatis
- hadoop1.0集群搭建
- html设置360浏览器兼容,360浏览器不兼容CSS的解决方法
- proteus中的标签及总线的使用方法
- oracle18c静默安装教程,Oracle 18c 通过 RPM 包安装数据库示例
- 小srf的游戏（单调队列+dp）
- YiLu代理中住宅IP代理和数据中心/机房IP代理分析及对比
- JDBC与数据库连接
- js中text方法是啥意识_JS中Text节点总结
- Android自定义控件之圆形头像
- vb读取文本文件某行的内容
- 【2021-12-11】在 Windows 系统下，迁移 Android Studio 的 Android 虚拟设备（AVD）到非系统分区，释放系统盘空间
- 微信支付回调到底回调了什么？