search
HomeWeb Front-endFront-end Q&AWhat is the difference between sass and scss

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.

What is the difference between sass and scss

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:

What is the difference between sass and scss

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
sass软件是什么意思sass软件是什么意思Aug 15, 2022 am 11:39 AM

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

vue创建项目时sass是什么意思vue创建项目时sass是什么意思Jun 21, 2022 am 10:33 AM

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

vue工程编译sass错误怎么办vue工程编译sass错误怎么办Jan 05, 2023 pm 04:20 PM

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的区别Sass和less的区别Oct 12, 2023 am 10:16 AM

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

Vue中如何使用SCSS进行样式风格定制Vue中如何使用SCSS进行样式风格定制Oct 15, 2023 pm 05:21 PM

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

如何利用React和Sass实现可定制的前端样式如何利用React和Sass实现可定制的前端样式Sep 26, 2023 pm 10:30 PM

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

Angular项目中怎么使用 SASS 样式Angular项目中怎么使用 SASS 样式May 09, 2022 am 10:51 AM

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

Bootstrap with Sass: Advanced Styling & Theming TechniquesBootstrap with Sass: Advanced Styling & Theming TechniquesMar 31, 2025 pm 04:09 PM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

DVWA

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

Atom editor mac version download

The most popular open source editor