Difference: 1. Sass uses the ".sass" suffix as the extension, while SCSS uses the ".scss" suffix as the extension; 2. Sass is written with strict indentation grammar rules. Without braces "{}" and semicolon ";", the syntax of SCSS is very similar to that of CSS, with braces and semicolons.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
What is Sass
Sass is a meta-language that is higher than CSS. It can be used to describe file styles clearly and structurally, and is more powerful than ordinary CSS. More powerful functions. Sass provides a cleaner, more elegant syntax while providing a variety of features to create maintainable and manageable stylesheets.
Sass is a CSS preprocessing language written in Ruby language. It was born in 2007 and is the largest mature CSS preprocessing language. It was originally designed to work with HAML (an indented HTML precompiler), so it has the same indentation style as HTML. SASS is an extension of CSS3 that adds rule nesting, variables, mixins, selector inheritance, and more. Convert it into standard, well-formed CSS code by using command line tools or WEB framework plug-ins.
Sass official website: http://sass-lang.com
What is Scss
Scss is Sass 3, which introduces new syntax. The abbreviation of Sassy CSS is a superset of CSS3 syntax, which means that all valid CSS3 styles are also suitable for Sass. To put it bluntly, Scss is an upgraded version of Sass. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. That is, any standard CSS3 stylesheet is a valid SCSS file with the same semantics. In addition, SCSS can also recognize most CSS hacks (some CSS tricks) and browser-specific syntax, such as the ancient IE filter syntax.
Since Scss is an extension of CSS, all code that works properly in CSS will also work properly in Scss. In other words, for a Sass user, you only need to understand how the Sass extension works to fully understand Scss. Most extensions such as variables, parent references, and directives are the same; the only difference is that SCSS requires semicolons and braces instead of newlines and indentation.
The difference between sass and scss
Sass and SCSS are actually the same thing. We usually call it Sass. The differences between the two are as follows: Point:
The file extensions are different. Sass uses the ".sass" suffix as the extension, while SCSS uses the ".scss" suffix as the extension
The grammar writing methods are different. Sass is written with strict indentation grammar rules, without braces ({}) and semicolons (;), while the SCSS grammar writing method is the same as our CSS grammar writing method. Very similar.
The following is an introduction to their compilation rules:
<span style="font-size: 18px;">sass</span>
Compilation
1. Sass compilation method:
- Command compilation
- Automatic compilation
- GUI tool compilation
Note: "Single file compilation" and "Multiple file compilation".
2. Sass output method:
Output method | When compiling, carry parameters | Reference picture |
---|---|---|
sass nested output methodnested
|
sass --watch test.scss :test.css --style nested
|
Figure 1 |
sass expanded output methodexpanded
|
sass --watch test.scss:test.css --style expanded
|
Figure 2 |
sass expanded output methodcompact
|
sass --watch test.scss:test.css --style compact
|
Figure 3 |
Sass expansion output methodcompressed
|
sass --watch test.scss:test.css --style compressed
|
Figure 4 |
Screenshot comparison:
In addition to the above introduction, sass can also perform addition/subtraction, multiplication, and division. , variable calculation, number operation, character operation, color operation, etc.
(Learning video sharing: css video tutorial)
The above is the detailed content of What is the difference between sass and scss. For more information, please follow other related articles on the PHP Chinese website!

sass全称“Software as a service”,意思为“软件即服务”;它是一种软件部署模式,第三方供应商在云基础设施上构建应用程序,并以订阅的形式,通过互联网向客户提供这些应用程序,不要求客户预先建设底层基础设施。这意味着软件可以在任何有互联网连接和网络浏览器的设备上访问,而不像传统软件那样只能在本地机器上安装。

vue创建项目时使用的sass是强化css辅助工具的意思,是对css的扩展;sass是由buby语言编写的一款css预处理语言,和html有一样严格的缩进风格,和css编写规范相比是不使用花括号和分号的。

vue工程编译sass错误的解决办法:1、使用镜像源“cnpm install node-sass sass-loader --save-dev”安装sass;2、在“package.json”中更改“sass-loader”版本为“"sass-loader": "^7.3.1",”;3、在页面中直接使用或者用@代替src即可。

Sass和less的区别有语法差异、变量和混合器的定义方式、导入方式、运算符的支持、扩展性等。详细介绍:1、语法差异,Sass使用缩进的方式来表示嵌套规则,类似于Python的语法,Less使用类似于CSS的语法,使用大括号来表示嵌套规则;2、变量和混合器的定义方式,在Sass中,变量使用`$`符号进行定义,而混合器使用`@mixin`关键字进行定义,在Less中等等。

Vue中如何使用SCSS进行样式风格定制在Vue项目中,为了更好地定制样式风格,使用SCSS(SassyCSS)是一个不错的选择。SCSS是CSS的一种扩展语言,它提供了许多有用的特性,如嵌套规则、变量、混合等,使我们能够更高效地书写样式代码。下面将介绍在Vue项目中如何使用SCSS进行样式风格定制,并提供一些具体的代码示例。首先,我们需要准备好Vue项目

如何利用React和Sass实现可定制的前端样式引言:React是一种流行的JavaScript库,用于构建用户界面。它提供了组件化的方式来开发复杂的前端应用程序。而Sass是一种CSS预处理器,通过将CSS代码分解为模块,可以更方便地管理和组织样式。React结合Sass可以实现可定制的前端样式,本文将介绍如何结合使用React和Sass,在项目中实现可定

Angular项目中怎么使用 SASS 样式?下面本篇文章给大家介绍一下Angular 中 SASS 样式的使用方法,希望对大家有所帮助!

结合Bootstrap和Sass可以实现更高级的样式和主题定制:1.修改Bootstrap的变量来改变主题色;2.使用Sass的嵌套规则简化CSS编写;3.利用Sass的混合和函数创建复杂样式,如不同颜色的按钮;4.注意Sass文件的编译和导入顺序,避免常见错误;5.通过合理使用Sass功能和工具,优化性能和维护代码。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor
