如何在您的VPS上运行Ubuntu上设置Sass

Sass是一个CSS预处理器,它允许您以比使用简单CSS更高效,更智能的方式创建样式表。这里是如何设置它在你的Ubuntu VPS。

介绍

萨斯是一个CSS预处理器,让您以更高效和智能的方式比使用简单的平面CSS样式表的创建。 它提供了许多动态组件,这将使您的代码更小,更可重用和更具可扩展性。 它的语法相当容易理解,而是添加在常规CSS之上,而不是替换它。

在本教程中,我们将看到如何安装Sass并开始使用它。 为此,它假设您已经运行自己的VPS与Ubuntu和安装在其上的Web服务器,如果你想看到的东西在浏览器(但在这一级没有必要)。

请注意,虽然您可以安装Sass也在其他操作系统,如Windows和操作系统。

你可以看看这个文章为让你和你的VPS运行。

安装Sass

为了安装Sass,我们需要首先在系统上安装Ruby,所以我们必须首先安装。 此外,我们还要安装rubygems(Ruby的包管理系统)。 让我们使用以下命令执行这两个任务:

sudo apt-get update
sudo apt-get install ruby-full rubygems

接下来,我们可以使用gem命令安装Sass:

sudo gem install sass

现在Sass已经安装,我们可以开始了。

使用Sass

让我们创建一个样式表来玩。 浏览到您的Web服务器的根文件夹(Apache的应该是/ var / www),并创建一个名为style.scss:

cd /var/www
nano style.scss

在此文件中,粘贴以下css规则:

.box {
  padding:20px;
  background-color:red;
}

正如你所看到的,这是一些基本的CSS。 保存文件并退出。 现在,我们需要告诉Sass将此文件转换为常规的css格式文件(以.css扩展名结尾):

sass --watch style.scss:style.css

使用此命令,Sass将生成.css文件并监视.scss文件的任何更改。 如果它们发生,.css文件将自动更新。

当第一次运行此命令时,您会收到此错误:

[Listen warning]:
  Missing dependency 'rb-inotify' (version '~> 0.9')!
  Please run the following to satisfy the dependency:
    gem install --version '~> 0.9' rb-inotify

您可以运行以下命令以满足依赖性:

gem install --version '~> 0.9' rb-inotify

这将做伎俩。 现在,如果你正在处理多个萨斯文件,您可以运行--watch命令,使其编译.scss文件的整个文件夹:

sass --watch stylesheets/sass:stylesheets/css

这将使它跟踪在样式表/ SASS文件夹中所有.scss文件,自动编译它们并把它们纳入其等值的样式表/ css文件夹。 一旦你运行这些命令之一,Sass将处于这种“监视模式”,直到你告诉它停止。

您可以按Ctrl + C使其停止观看文件。 在此之后,改变您对.scss文件(S)不会在.css文件(S)自动反映,直到你再次运行--watch命令。

那么什么交易? 我们所做的是将一些CSS写入一个文件,然后将其复制到另一个。 但是有更多的Sass,这就是为什么你应该使用它。 所以,让我们看看你能做什么。

嵌套

嵌套是一个很好的方法,以避免重复写入相同的选择器。 例如说,你有3个选择,在相同的事情开始:“.box的UL”,“.box 的礼 ”和“.box的李一 ”。 通常,您必须为这些规则创建三个不同的规则:

.box ul {
  ...
}
.box li {
  ...
}
.box li a {
  ...
}

但是使用Sass,你可以嵌套它们:

.box {
  padding:20px;
  background-color:red;
  ul {
    margin:10px;
  }
  li {
    float:left;
    a {
      color:#eee;
    }
  }
}

正如你所看到的,你避免了有这样重复写入选择的.box的一部分,所有的3倍。 此外,它看起来很简单和逻辑。 现在,如果你使用--watch命令生成的CSS相同,那么将自动为您创建的CSS块的所有3:

.box {
  padding: 20px;
  background-color: red;
}
.box ul {
  margin: 10px;
}
.box li {
  float: left;
}
.box li a {
  color: #eee;
}

此外,您可以使用相同的逻辑嵌套属性。 例如,你可以这样写:

.box {
  padding: {
    top:20px;
    right:10px;
    bottom:15px;
    left:10px;
  }
}

这节省了你必须写4次单词“padding”的时间。

变量

另一个时间节省和简单的真棒功能的Sass是使用变量。 与编程语言(如PHP或JavaScript)类似,这允许您声明一个变量一次,并在您的代码中使用它多次。 例如你可以这样做:

$color: #eee;

a {
  color: $color;
}

那么萨斯将取代你声明一次实际的颜色代码整个文件中的$ color变量的所有实例:#eee。

混合

这些可能是最强大的Sass功能,它们的行为基本上类似函数。 您可以重复使用整个样式声明,甚至传递它们的参数。 与函数类似,首先声明它们。 所以让我们声明2个略微不同的混合。

@mixin box-size {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

@mixin border($width) {
  border: $width solid #eee;
}

你可以看到,第一个没有任何参数。 我们可以这样使用它:

.box {
  @include box-size;
}

这将输出以下css:

.box {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

第二个mixin我们可以通过传递一个参数来使用:

.box2 {
  @include border(1px);
}

这将使用在mixin中定义的规则,并将其传递给size参数,以获得更大的灵活性。 这将输出以下css:

.box2 {
  border: 1px solid #eee;
}

这些是一些但不是所有的功能,使Sass真棒。 你可以对许多可能的值和其他令人敬畏的事情进行各种计算。 要了解更多信息和如何使用它的例子,你可以检查出萨斯网站

输出样式

运行我们上面看到的--watch命令将使萨斯输出在其默认的方式.css文件生成的CSS:嵌套。 有4种不同类型的输出样式可供您选择:

  • Nested:反映CSS样式的结构以及它们设置样式的HTML文档。
  • 展开式:每个属性和规则占一行
  • 紧凑:每个CSS规则只占用一行,每行定义一个属性。
  • 压缩:除了在文件末尾分隔选择器和换行符之外,没有空格。

你可以阅读更多有关这些不同的风格在这里 但是,一个简单的方法来在它们之间切换是在--watch命令本身通过在末尾添加一个标志。 举例来说,如果我们要使用扩展的风格,我们像这样运行命令:

sass --watch style.scss:style.css --style=expanded

结论

Sass非常强大,一旦你习惯了它,你将有一个更容易的前端体验。 它增加了CSS的思维方式的智能,并提供工具,使其工作更有效率。

文章提交者: 丹尼