Scss--入门指南

一时失言乱红尘 2023-09-28 13:03 152阅读 0赞

原文网址：[Scss--入门指南\_IT利刃出鞘的博客-CSDN博客][Scss--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍Scss，包括：Scss是什么、Scss与Sass的区别等。

**官网网址**1

官网：[https://sass.bootcss.com/][https_sass.bootcss.com]

官网文档（中文）：[https://sass.bootcss.com/documentation][https_sass.bootcss.com_documentation]

**官网网址2**

官网：[https://www.sass.hk/][https_www.sass.hk]

官网文档（中文）：[https://www.sass.hk/docs/][https_www.sass.hk_docs]

**Scss与CSS在线互转**

Scss转CSS：[https://www.sassmeister.com/][https_www.sassmeister.com]

CSS转Scss：[https://www.sass.hk/css2sass/][https_www.sass.hk_css2sass]

## Sass是什么 ##

**Sass介绍**

Sass是为了使CSS开发更方便而产生的，可以称为：动态样式语言。也可以称为：CSS预编译语言。

原先我们是用原生CSS来写样式，但它不方便，比如：不支持嵌套、运算、作用域 等。

使用Scss写样式很方便，它支持嵌套、运算、作用域 等，最终它会被处理为原生的CSS来处理样式。

**Sass的特色功能**

*  完全兼容 CSS3
 *  在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
 *  通过函数进行颜色值与属性值的运算
 *  提供控制指令等高级功能
 *  自定义输出格式

## Scss与Sass的区别 ##

Scss(sassy css)是Sass（(Syntactically Awesome Stylesheets)的改良版本。

Sass的语法是：使用缩进。这对于写惯css的开发者来说很不直观，也不能将css代码加入到Sass里面。因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)，与原来的语法兼容，只是用\{\}取代了原来的缩进。而且，**所有有效的 CSS 也同样都是有效的 SCSS**。

## **Sass语法** ##

Sass 支持两种不同的语法。两种语法可以互相加载，所以 选择哪一种语法取决于你和你的团队。

### 1. Scss语法 ###

SCSS 语法使用 .scss 文件扩展名。除了极少部分的例外， 它是 CSS 的超集，也就是说 **所有有效的 CSS 也同样都是有效的 SCSS** 。 由于其与 CSS 的相似性，它是最容易上手的语法， 也是最流行的语法。

Scss是这样的：

$border-color:#aaa; //声明变量
    .container {
    	$border-width:1px;
        border:$border-width solid $border-color; //使用变量
    }

### 2. 缩进的语法 ###

缩进语法是 Sass 的原始语法，因此它使用文件 扩展名 `.sass` 。由于这个扩展名的原因，这种语法有时直接被称为 “Sass"。 缩进语法支持与 SCSS 相同的所有特性，但是它使用 缩进而不是花括号和分号来描述文档的格式。

通常，在 CSS 或 SCSS 中书写花括号时， 对应着在缩进语法中再缩进一层即可。 任何一行结束， 都被当作分号。

缩进语法是这样的：

$border-color:#aaa; //声明变量
    .container
      $border-width:1px;
      border:$border-width solid $border-color; //使用变量

[Scss--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125567044
[https_sass.bootcss.com]: https://sass.bootcss.com/
[https_sass.bootcss.com_documentation]: https://sass.bootcss.com/documentation
[https_www.sass.hk]: https://www.sass.hk/
[https_www.sass.hk_docs]: https://www.sass.hk/docs/
[https_www.sassmeister.com]: https://www.sassmeister.com/
[https_www.sass.hk_css2sass]: https://www.sass.hk/css2sass/