我们来看一下SCSS和Sass，浏览一下所有CSS和SCSS代码，您需要从这种样式语言开始。

在这篇文章中，我想介绍并讨论SCSS的功能。如果您是SCSS的新手并且您真的没有阅读过很多内容，那么您一定要阅读此博客以获取所有信息。

Sass(Syntactically awesome style sheets)是一种样式表语言，最初由Hampton Catlin设计，由Natalie Weizenbaum开发。Sass是一种预处理器脚本语言，可以解释或编译成层叠样式表(CSS)。SassScript本身就是脚本语言。拥抱Sass一次，你可能永远不想再回到vanilla CSS了。直到最近，当我不得不在一个项目中切换回vanilla CSS时，我才意识到我多么喜欢和Sass一起工作。在那段时间里，我学到了很多，所以我决定赞美萨斯，让这个世界变得更美好，让你变得更快乐。

如何使用Sass

像Sass这样的预处理器在我们的RoR世界中被广泛使用，使得编写CSS变得更加容易和无杂乱。大多数Rails开发人员都知道诸如嵌套，引用选择器，变量，mixin或扩展指令等优点。但萨斯远不止于此！

Sass包括两种类型的扩展名：.scss和.sass。“.scss”文件扩展名完全符合CSS语法，而.sass不完全符合CSS语法，但写入速度更快。

让我们从一些安装和使用Sass的基本技巧开始。

有两种方法可以使用应用程序或命令行启动SCSS。

使用命令行查看Sass文档以进行安装。

变量

我们可以在变量中定义一个元素，并在我们的Sass代码中插入它。将模块保存在单独的文件中时，这非常有用。变量的最常见用途是调色板，存储可以在单独的样式表中使用的字体声明，大小和媒体查询等信息。

例如

$body: #226666;

$primary-color: #403075;

$footer: #AA8439;

$font-stack: Helvetica, sans-serif;

以代码开头的代码 $ 是Sass变量。您可以稍后在样式表中使用这些变量，它们将映射到您定义的值，例如：

body {

background: $body;

font: $font-stack;

}

.header {

color: $primary-color;

}

a {

color: $primary-color;

}

使用SCSS嵌套

嵌套是SCSS最受欢迎的功能之一。使用嵌套，您可以在声明的大括号之间添加类。SCSS将非常直观地编译和处理选择器。您甚至可以使用“ &”字符来获取对父选择器的引用。

以下示例显示了基本网页的结构：

嵌套风格

以下样式用于创建上面的示例：

header{

padding:10px

background-color: $grey

text-align:center;

.logo{

display:inline-block;

width:140px;

}

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

li {

display: inline-block;

a {

display: block;

padding: 6px 12px;

text-decoration: none;

&:hover{

text-decoration:underline;

}

}

}

}

}

section{

background-color: $grey;

display:inline-block;

width:70%;

border:1px solid $grey;

color: $text-color;

}

aside{

background-color: $grey;

display:inline-block;

width:30%;

border:1px solid $grey;

color: $text-color;

}

footer{

padding:10px;

.copyright{

text-decoration:none;

padding:5px;

&:hover{

text-decoration:underline;

}

}

}

大！现在我们现在如何嵌套样式工作。我们来看看相应的CSS：

header{

padding:10px

background-color: #ded3d4;

text-align:center;

}

header .logo {

display:inline-block;

width:140px;

}

header nav ul{

margin: 0;

padding: 0;

list-style: none;

}

header nav ul li{

display: inline-block;

}

header nav ul li a{

display: block;

padding: 6px 12px;

text-decoration: none;

}

header nav ul li a:hover{

text-decoration:underline;

}

section{

background-color: #ded3d4;

display:inline-block;

width:70%;

border:1px solid #ded004;

color: #555;

}

aside{

background-color: #ded3d4;

display:inline-block;

width:30%;

border:1px solid #ded004;

color: #555;

}

footer{

padding:10px;

}

footer .copyright{

text-decoration:none;

padding:5px;

}

footer .copyright:hover{

text-decoration:underline;

}

Mixins和Extends

Mixins和extends是强大的功能，有助于避免大量重复。使用mixins，您可以制作参数化CSS声明，并在整个样式表中重复使用它们。

假设你有一个盒子，你想给盒子圆角：

@mixin border-radius($ round){

-webkit- border-radius：$ round ;

-moz- border-radius：$ round ;

-ms- border-radius：$ round ;

border-radius：$ round ;

}

/ *只需使用'@include'指令来应用mixin * /

.box { @include border-radius(15px); }

请注意@mixin 顶部的 指令。它已被赋予名称 border-radius 并使用变量 $round 作为其参数。此变量用于设置每个元素的半径值。之后，@include 使用参数值调用该 指令，即15px。

这是相应的CSS：

.box {

-webkit- border-radius：15px ;

-moz- border-radius：15px ;

-ms- border-radius：15px ;

border-radius：15px ;

}

如果要在使用@including 指令时为每个角添加不同的大小 ，也可以这样做; 你只需要指定如下：

.box { @include border-radius(15px 10px 5px 0px); }

您可以创建自己的mixin库，或者更好的是，您可以使用其中一个社区库。

该 @extend 指令被称为Sass最强大的功能之一。此指令允许您将属性从一个选择器共享到另一个选择器。

假设你声明一个包含属性的公共类：

.box {

margin: 10px;

padding: 10px;

border: 2px solid blue;

}

现在你想要两个具有相同属性但具有不同边框颜色的类似盒子。

.box-red {

@extend .box;

border-color: red;

}

.box-yellow {

@extend .box;

border-color: yellow;

}

在上面的例子中，我们使用@extend 指令扩展了公共类 。让我们看看我们需要的完整SCSS来获得所需的输出。

.box, .box-red, .box-yellow {

margin: 1em;

padding: 1em;

border: 2px solid red;

}

.box-red {

border-color: red;

}

.box-yellow {

border-color: yellow;

}

import

@import 将由Sass处理，我们所有的CSS和SCSS文件将被编译为一个文件，最终将在我们的实际网站上。您可以创建包含很少CSS的部分Sass文件，您可以将其包含在其他Sass文件中，即variable.scss，fonts.scss，buttons.scss等，然后我们可以在main / style中包含所有SCSS文件.scss文件夹。如果不导入部分文件，则可以使用mixin和variable等可重用组件。

假设您已经创建了多个文件，并且需要将它们导入main.scss文件：

@import “variables”;

@import “fonts”;

@import “base”;

@import “buttons”;

@import “layout”;

唯一的缺点是为要导入的每个CSS文件触发单独的HTTP请求。