什么是Sass?如何使用Sass？

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

对于一个网页设计的新手来说，可能听说过“Sass”这个词。但却不确定Sass的作用以及是否可以使用它，本篇文章就给大家介绍一下什么是Sass?如何使用Sass？让大家对Sass有一个简单的理解。

Sass

简而言之，Sass是一个CSS预处理器，它将特殊功能（如变量，嵌套规则和mixins（有时称为语法糖））添加到常规CSS中。目的是使编码过程更简单，更有效。让我们更详细地探讨一下。

什么是CSS预处理器？

CSS预处理器是一种脚本语言，它通过允许开发人员用一种语言编写代码然后将其编译成CSS来扩展CSS。Sass可能是最受欢迎的预处理器，但其他常见的例子包括Less和Stylus。

什么是SASS？

Sass（Syntactically Awesome Style Sheets）是CSS的扩展，使您可以使用变量，嵌套规则，内联导入等内容。它还有助于保持组织有序，并允许您更快地创建样式表。

Sass与所有版本的CSS兼容。使用它的唯一要求是必须安装Ruby。

如何使用Sass？

句法：

Sass包含两个语法选项：

1、SCSS (Sassy CSS)：使用.scss文件扩展名，完全符合CSS语法

2、Indented (简单地称为 'Sass')：使用.sass文件扩展名和缩进而不是括号; 它不完全符合CSS语法，但编写起来更快

请注意，可以使用sass-convert命令将文件从一种语法转换为另一种语法。

变量

与其他编程语言一样，Sass允许使用可存储可在整个样式表中使用的信息的变量。例如，您可以将颜色值存储在文件顶部的变量中，然后在设置元素的颜色时使用此变量。这使您可以快速更改颜色，而无需单独修改每一行。

例如：

$font-stack:    Helvetica, sans-serif;
$primary-color: red;

body {
  font: 100% $font-stack;
  color: $primary-color;}

body { font: 100% Helvetica, sans-serif; color: red; }

嵌套

嵌套是一把双刃剑。虽然它提供了一种减少需要编写的代码量的绝佳方法，但如果不仔细执行，它也会导致过度限定的CSS。我们的想法是以一种模仿HTML层次结构的方式嵌套CSS选择器。

以下显示了使用嵌套的基本导航样式：

nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}

CSS输出如下：

nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

Partials

Partials是较小的Sass文件，可以导入到其他Sass文件中。将partials视为代码片段。使用这些代码片段，我们的CSS现在可以模块化并且更易于维护。部分通过使用前导下划线命名为_partial.scss来指定。

导入（Import）

使用局部模板，在@import指令，可以导入你的部分文件到当前文件，建立一个单一的CSS文件。请注意将为每个导入生成的HTTP请求使用的导入数量。

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;}// basefile.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}相应的CSS输出：
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}注意：导入partials时，您不需要包含文件扩展名或下划线。
mixins
使用预处理器的一个优点是能够采用复杂，冗长的代码并简化它。这就是mixins派上用场的地方！ 
例如，如果您需要包含供应商前缀，则可以使用mixin。看一下border-radius的这个例子：
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.box { 
    @include border-radius(10px); 
}注意顶部的@mixin指令。它的名称为border-radius，并使用变量$ radius作为参数。此变量用于设置每个元素的半径值。 
稍后，调用@include指令以及mixin名称（border-radius）和参数（10px）。因此.box {@include border-radius（10px）; }。
生成以下CSS：
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}扩展/继承
该@extend指令被称为是Sass的最强大的功能之一。看到它在行动后，很明显为什么。
我们的想法是，使用此指令，您不必在HTML元素上包含多个类名，并且可以保持代码干燥。您的选择器可以继承其他选择器的样式，然后在需要时轻松扩展。现在这很强大。
Sass的优点：
能够在CSS中执行计算，允许我们执行更多的操作，例如将像素值转换为百分比。我们还可以访问标准数学函数，如加法，减法，乘法和除法。当然，可以组合这些功能来创建复杂的计算。
此外，Sass还包含一些内置函数来帮助操作数字。像percentage（），floor（）和round（）这样的函数就是一些例子。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
以上就是什么是Sass?如何使用Sass？的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  关键词：啥是Sass?如何运用Sass？