"Sass(Syntactically Awesome Style Sheets) , 是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升 CSS. 它有很多很好的特性，但是它有类似 Ruby 的语法，没有花括号，没有分号，遵循严格的缩进它在书写规则，变量命名方 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 4 浏览 • 4 个月前

CSS, Sass, SCSS 关系

Sass(Syntactically Awesome Style Sheets) , 是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升 CSS. 它有很多很好的特性，但是它有类似 Ruby 的语法，没有花括号，没有分号，遵循严格的缩进

它在书写规则，变量命名方面和 CSS 代码有着很大的区别。于是，后来官方在 2010 年推出了一个全新的语法，叫做 SCSS, 意思是 Sassy CSS. 这个语法带来了对 CSS 友好的语法，试图弥合 Sass 和 CSS 之间的差别.

那么，它到底有哪些特性呢，我们来看一下:

1. 嵌套

我们可以看一个简单的例子

.footer {
     background-color: red;
     padding: 10px 20px;
     .navigation{
       border</span>:<span style="color: rgba(0, 0, 255, 1)"> solid 5px black</span>;<span style="color: rgba(255, 0, 0, 1)">
       a {
             text-decoration</span>:<span style="color: rgba(0, 0, 255, 1)"> underline</span>;<span style="color: rgba(255, 0, 0, 1)">
             padding</span>:<span style="color: rgba(0, 0, 255, 1)"> 10px</span>;

        }<span style="color: rgba(128, 0, 0, 1)">
   }

  .social-buttons </span>{<span style="color: rgba(255, 0, 0, 1)">

       background-color</span>:<span style="color: rgba(0, 0, 255, 1)"> white</span>;<span style="color: rgba(255, 0, 0, 1)">
       float</span>:<span style="color: rgba(0, 0, 255, 1)"> right</span>;<span style="color: rgba(255, 0, 0, 1)">
       a {
             color</span>:<span style="color: rgba(0, 0, 255, 1)"> white</span>;<span style="color: rgba(255, 0, 0, 1)">
             margin-right</span>:<span style="color: rgba(0, 0, 255, 1)"> 15px</span>;
           

         }<span style="color: rgba(128, 0, 0, 1)">


          }

}

上面的代码中，就出现了多层嵌套

2. 变量

在 CSS 文件中，我们经常会用到颜色 color，可能好几个元素的 CSS 样式都会用到同样的一种颜色，因为网站往往是一个统一的风格。这样，我们如果一旦要更改这个颜色，我们就要更改整个 css 文件中的所有地方。而变量解决了这个问题，我们可以把一个颜色值赋给一个变量，所有用到这个颜色的地方，都用这个变量替代。这样，需要更改颜色时，只需要修改这个变量的值就可以了. 当然，CSS 中的宽度，长度等也可以类似这样，使用统一的变量来进行.

我们来看下面的例子

$pageHeight: 100%;
$pageWidth: 100%;
$containerWidth: 950px;
$containerHeight: 700px;
$white: #FFFFFF;
$black: #000000;
$grey: #E3E3E3;
$blue: #1f605b;

上面的例子中，定义了 8 个变量，前面 4 个事宽度和高度，后面 4 个是颜色。以后在 CSS 文件中需要用到这些变量值时，只需要用这个变量名代替就可以。

3. 局部

Sass 可以通过使用局部系统来把样式表分成多份文件，根据不同的需求组织不同部分的样式表，形成不同的 css 文件

比如，把页眉样式写在页眉样式表中，类似的有页脚样式表，导航样式表, 按钮样式表.... 我们公司在开发多个项目时，都采用了这种方法，形成多个 scss 文件，比如有

colours.scss, typography.scss, layout.scss, footer.scss, header.scss, navigation.scss, blocks.scss, forms.scss, slider.scss, buttons.scss, margins.scss,icons.scss, tables.scss.....

最后有一个 style.scss 类容如下

@import "colours";
@import "typography";
// Import css components
@import "layout";
@import "footer";
@import "navigation";
@import "blocks";
@import "forms";
@import "slider";
@import "buttons";
@import "margins";
@import "icons";
@import "tables";
@import "custom-bmd-model";

然后再使用 gulp 命令来生成最后的 style.css 文件

讲到 @import 命令，就再来说一说它的使用.

1) @import 命令也可以用于在 html 文件中导入外部的 css 文件，但是这时，你需要注意，如果要使 @import 导入的 css 文件中的 css 规则起作用, import 导入命令必须先于除了 @charset 的其他任何 CSS 规则，我们来看下面的例子

<style type="text/css">
.myColor{
     color: orange;
}
@import "test.css";
</style>
<p class="myColor">看看我的颜色</p>
test.css 文件如下
.myColor{
 color: black;

}

执行之后，发现颜色是橘色 (orange), 而不是黑色 (black). 在上面例子中，html 文件中定义了.myColor 的 CSS 规则，然后接下来再导入 test.css 文件，该文件有一个完全同名的 css 规则。但是从最后的结果来看，它没有被运用。用的是它前面的 html 文件中的 css 规则

我们再换个位置看看

<style type="text/css">
@import "test.css";
.myColor{
     color: orange;
}
</style>
<p class="myColor">看看我的颜色</p>
test.css 文件如下
.myColor{
 color: black;

}

这里，我们把 @import 命令置于其他 css 规则之前，发现就起作用了，字体颜色变成了黑色

所以特别注意 import 规则一定要先于除了 @charset 的其他任何 CSS 规则

2) 使用 @import 命令进行媒体查询

媒体查询是 CSS3 中出现的新特征，在 css 中使用 media 关键字来指定, 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式范围的表达式组成，比如宽度，高度和颜色。它允许内容的呈现针对一个特定范围的输出设备进行裁剪，而不必改变内容本身.

我们通常可以在 style 标记包括的 CSS 中使用媒体查询，如下：

<!-- Style 标记的样式表中的 CSS 媒体查询 -->
<style>
@media (max-width: 800px)
{
  .media_test{
 
         display</span>:<span style="color: rgba(0, 0, 255, 1)"> none</span>;
  }<span style="color: rgba(128, 0, 0, 1)">

}
</style>

除了这种方式，我们也可以在 link 元素引用 css 文件时，采用媒体查询，如下所示:

<link rel="stylesheet" media="(max-width: 1000px)" href="test.css" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

同样的，@import 命令也可以用于媒体查询，而且使用 @import 进行媒体查询时，不需要使用 media 关键字

@import url("paint.css") print;
@import "common.css"  screen,projection;
@import url('landscape.css') screen and (orientation: landscape);
@import url('mobile.css') (max-width: 780px);

有一点需要知道了解的是, 无论是通过使用 link 或者 import 方式，都会下载所有的 css 文件，然后再根据媒体 media 去选择执行应用的 css 文件。而不是根据用户使用的媒体 media 去选择性的下载 css 文件

4. 混合宏

使用 Sass 的一个很大的特性是，混合宏. 混合宏是很小的代码片段 (类似局部), 使用 @mixin 标志来标识你可以在文件中的任何部分，使用 @include 标志来复用这个混合宏.

混合宏结合变量使用，是个很普遍的例子, 最常见的例子就是创建圆角按钮. 创建一段实现圆角代码的混合宏，用传入的变量来代替圆角值, 这样，可以根据传入变量值不同，实现不同的圆角按钮

例子如下

//Mixin
@mixin border-radius($radius)
{
-webkit-border-radius</span>:<span style="color: rgba(0, 0, 255, 1)"> $radius</span>;<span style="color: rgba(255, 0, 0, 1)">
-moz-border-radius</span>:<span style="color: rgba(0, 0, 255, 1)"> $radius</span>;<span style="color: rgba(255, 0, 0, 1)">
border-radius</span>:<span style="color: rgba(0, 0, 255, 1)"> $radius</span>;

}
.test-element1{
@include border-radius(5px);

}
.test-element2{
@include border-radius(10px);

}

我们在来看一个例子

//SCSS
@mixin box-size($width:50px,$height: 50px)
{
width: $width;
height: $height;
}
.demo{
  @include box-size;

}
.demo2{
 @include box-size(100px,200px);

}

编译之后就是如下

/*css*/
.demo{
  width</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;<span style="color: rgba(255, 0, 0, 1)">
  height</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;

}
.demo2{
   width</span>:<span style="color: rgba(0, 0, 255, 1)"> 100px</span>;<span style="color: rgba(255, 0, 0, 1)">
   height</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;

}

在公司项目中，前端 css 文件我们都是写 SCSS 文件, 然后通过 @import 导入到 style.scss 文件中，最后通过 gulp 来生成 style.css 文件。

现在几乎所有 Sass 的工具，插件，demo 等都是使用 SCSS 语法来开发。已经很难再找到一个 Sass 缩进语法的插件等，所以，强烈推荐使用 SCSS 来写 css 文件

另外，注意一点，就是 Sass 从来没有写成 SASS, 无论指语法还是这个语言，都是使用 Sass

而 SCSS 一直都是大写

CSS, Sass, SCSS 关系

相关帖子

随便看看

CSS, Sass, SCSS 关系