一、安装Sass
有两种方法可以使用Sass:
1、应用
有很多应用程序将在几分钟内为Mac,Windows和Linux带来Sass功能。您可以免费下载大部分应用程序,但其中一些是付费应用程序(完全值得)
2、命令行
我们采用第二种。
如果您不知道要安装的版本,您开始使用Ruby,我们推荐您使用Ruby 2.2.X的安装程序。这些提供了一个稳定的语言和广泛的包兼容和更新的包(gems)。
下面列出了在 Windows 机器上安装 Ruby 的步骤:
注意:在安装时,您可能有不同的可用版本。
- Window 系统下,我们可以使用 RubyInstaller 来安装 Ruby 环境,下载地址为:请点击这里下载。
- 下载 rubyinstaller 之后,解压到新创建的目录下:
- 双击 rubyinstaller-2.2.3.exe 文件,启动 Ruby 安装向导。
- 点击 Next,继续向导,记得勾选 Add Ruby executables to your PATH,直到 Ruby 安装程序完成 Ruby 安装为止。
如果您的安装没有适当地配置环境变量,接下来您可能需要进行环境变量的配置。
- 如果您使用的是 Windows 9x,那么请在您的 c:\autoexec.bat 中添加:set PATH="D:\(ruby 安装目录)\bin;%PATH%"
- Windows NT/2000 用户需要修改注册表。
- 点击控制面板|系统性能|环境变量。
- 在系统变量下,选择 Path,并点击 EDIT。
- 在变量值列表的末尾添加 Ruby 目录,并点击 OK。
- 在系统变量下,选择 PATHEXT,并点击 EDIT。
- 添加 .RB 和 .RBW 到变量值列表中,并点击 OK。
- 安装后,通过在命令行中输入以下命令来确保一切工作正常:
$ ruby -v
ruby 2.2.3
- 如果一切工作正常,将会输出所安装的 Ruby 解释器的版本,如上所示。如果您安装了其他版本,则会显示其他不同的版本。
通过使用命令行开始使用Sass的最快方法:
-
打开你的终端或命令提示符。在Mac上,Terminal.app默认安装。它位于“Utilities”文件夹中。在Windows上,运行`cmd`。
-
安装Sass。Ruby使用Gems管理其各种代码包,如Sass。在您打开的终端窗口中键入:
gem install sass
这将为您安装Sass和任何依赖项。这很神奇 如果您收到错误消息,那么可能需要使用该
sudo
命令来安装Sass宝石。它看起来像:sudo gem install sass
-
再检查一遍。你现在应该安装Sass,但是从来不会再次仔细检查。在您的终端应用程序中,您可以键入:
sass -v
它应该返回
Sass 3.4.22 (Selective Steve)
。恭喜!您已成功安装Sass。
CSS可以很有趣,但样式表越来越大,更复杂,更难维护。这是预处理器可以帮助的地方。Sass可以让您使用CSS中不存在的功能,例如变量,嵌套,混合,继承和其他令人兴奋的好东西,使CSS再次有趣。
一旦您开始修补Sass,它将采取您的预处理的Sass文件,并将其保存为您可以在您的网站中使用的普通CSS文件。
实现这一目标的最直接的方法是在您的终端。安装Sass后,您可以sass input.scss output.css
从终端运行。您可以查看单个文件或整个目录。此外,您可以使用--watch
标志来观看文件夹或目录。在观看整个目录时运行Sass的示例如下所示:
sass --watch app/sass:public/stylesheets
2、变量
将变量视为存储要在整个样式表中重用的信息的一种方法。您可以存储像您想要重复使用的颜色,字体堆栈或任何CSS值。Sass使用$
符号来做某事变量。以下是一个例子:
当Sass被处理,它需要我们定义的变量$font-stack
和$primary-color
输出正常的CSS我们的变量值放置在CSS。当使用品牌颜色并在整个网站保持一致时,这可能非常强大。
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
2、嵌套
在编写HTML时,您可能已经注意到它具有明确的嵌套和可视化层次结构。另一方面,CSS不是。
Sass将让您以一种遵循HTML的相同视觉层次结构的方式嵌套您的CSS选择器。请注意,过度嵌套的规则将导致过高的CSS,可能难以维护,并被普遍认为是不好的做法。
考虑到这一点,以下是一些网站导航的典型样式:
你会发现ul
,li
和a
选择嵌套在里面nav
选择。这是组织CSS并使其更易于阅读的好方法。当您生成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;
}
3、部分
您可以创建包含少量CSS的部分Sass文件,您可以将其包含在其他Sass文件中。这是模块化CSS的好方法,有助于保持更容易维护。部分只是一个以领先的下划线命名的Sass文件。你可以命名一下_partial.scss。下划线让Sass知道该文件只是一个部分文件,它不应该被生成到一个CSS文件中。该@import指令使用Sass部分。
4、进口
CSS有一个导入选项,可以让您将CSS拆分成更小,更易维护的部分。唯一的缺点是每次@import
在CSS中使用时,都会创建另一个HTTP请求。Sass构建在当前CSS之上,@import
而不需要HTTP请求,Sass将采用您要导入的文件,并将其与要导入的文件相结合,从而可以将单个CSS文件提供给Web浏览器。
比方说,你有一对夫妇的萨斯文件,_reset.scss
和base.scss
。我们要导入_reset.scss
到base.scss
。
注意我们@import 'reset';
在base.scss
文件中使用。导入文件时,不需要包含文件扩展名.scss
。Sass是聪明的,会为你量出来。当你生成CSS你会得到:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
5、混合
CSS中的某些东西对于编写是有点乏味,特别是使用CSS3和许多供应商前缀存在。一个mixin可以使您想要在整个站点中重用CSS组声明。你甚至可以传递价值观,使你的mixin更灵活。一个很好的使用mixin是供应商的前缀。这是一个例子border-radius
。
要创建一个mixin,您可以使用该@mixin
指令并给它一个名称。我们命名为mixin border-radius
。我们也在$radius
括号内使用变量,所以我们可以传递任何我们想要的半径。创建mixin之后,您可以使用它作为一个CSS声明,@include
然后是mixin的名称。当您的CSS生成时,它将如下所示:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
6、延伸/继承
这是Sass最有用的功能之一。使用@extend
可以让您从一个选择器到另一个选择器共享一组CSS属性。它有助于保持你的Sass非常干。在我们的例子中,我们将为错误,警告和成功创建一系列简单的消息传递。
什么上面的代码的作用是让你拿在CSS属性.message
,并将其应用到.success
,.error
,和.warning
。生成的CSS会产生魔法,这有助于避免在HTML元素上写入多个类名。这是它的样子:
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
7、数学运算
在你的CSS做数学是非常有帮助的。萨斯拥有标准的数学运算符,例如屈指可数+,-,*,/,和%。在我们的例子中,我们要做一些简单的数学计算一个aside&的宽度article。
SCSS语法
我们创建了一个非常简单的流体网格,基于960px。在Sass中的操作让我们做一些像像素值一样的操作,并将它们转换成百分比,而不用麻烦。生成的CSS将如下所示:
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
可参考博客:http://sass.logdown.com/
可参考网址:http://sass-lang.com/documentation/file.SASS_REFERENCE.html
总结
以上就是 Sass/SCSS 最简单最基础也是最常用的入门教程,在这篇文章中我们大致上介绍了 Sass 使用语法。除了 Sass 外,目前还有许多 CSS 扩展,包括语法较易学的LESS、组件化化思考的 CSS in JS、主要解决全域问题和模块引用的CSS Modules,取经于JavaScript Task Runner的PostCSS、网格样式表单GSS等等,这些最终目的都是为了解决传统CSS维护不易、重用性低等问题。事实上,有些人觉得使用 CSS 预处理器比较容易维护,有些人认为每次都要编译很麻烦,至于要选择哪一种 CSS 预处理器 或是根本不使用,取决于团队的内部规范和讨论。俗话说后端一天,前端一年,说不定现在选边站的技术,下个月就不流行了呢。