15分钟学Sass
注:本文转自Dev Awesome,在原文基础上进行了翻译和功能讲解补充
原文地址 网站为英文，对英语不好的同学可能不太友好 ( 就像我 ) , 好了，下面是文章的中文版本。
如果你要写大量的CSS，预处理器可以大大降低你的压力水平，为你节省大量的宝贵时间。使用Sass，Less，Stylus或PostCSS等工具可以使大型复杂的样式表更清晰易懂，更易于维护。由于变量，函数和混合等功能，代码变得更加有条理，允许开发人员更快地工作并减少错误。
1.入门
浏览器无法解释Sass文件，因此在准备上网之前需要编译标准CSS。这就是为什么你需要某种工具来帮助你将.scss文件翻译成.css。在这里你有几个选择：
- 最简单的解决方案是用于在现场编写和编译Sass的浏览器工具 - SassMeister。
- 使用第三方桌面应用。免费和付费版本均可提供。你可以去这里了解更多信息。
- 如果您是我们的CLI人员，您可以在计算机上安装Sass并手动编译文件。
如果你决定使用命令行，你可以用它的原始形式（用ruby编写）安装Sass，或者你可以尝试Node.js端口（我们的选择）。还有许多其他包装器，但是因为我们喜欢Node.js，所以我们将继续使用它。
以下是 使用节点CLI 编译.scss文件的方法：
node-sass input.scss output.css
此外，现在是时候提到Sass提供两种不同的语法 - Sass和SCSS。他们都做同样的事情，只是用不同的方式写。SCSS是较新的，通常被认为更好，所以我们将继续延续下去。如果您想了解更多有关两者之间差异的信息，请查看这篇精彩的文章。
2. 变量
Sass中的变量以与任何编程语言类似的方式工作，包括数据类型和范围等主体。在定义变量时，我们在其中存储一个特定的值，这通常会在CSS中重新出现，如调色板颜色，字体堆栈或酷盒阴影的整个规格。
下面你可以看到一个简单的例子。在选项卡之间切换以查看SCSS代码及其CSS转换。
Sass
---sass代码
$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
h1.title {
font: $title-font;
color: $cool-red;
}
div.container {
color: $cool-red;
background: #fff;
width: 100%;
box-shadow: $box-shadow-bottom-only;
}
css
---css代码
h1.title {
font: normal 24px/1.5 "Open Sans", sans-serif;
color: #F44336;
}
div.container {
color: #F44336;
background: #fff;
width: 100%;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}
这一切背后的思想是提高代码的可复用性，以及后期的代码维护。以后我们想复用相同的组件，如果需要更改属性值，我们只需要更改一个地方的值(变量的定义)，而不需要在使用了该属性的所有地方一一更改。
3. Mixins
你可以将mixins视为编程语言中构造函数类的简化版本 -- 你可以获取一组CSS声明并在任何您想要的地方把它并为一组特定的样式元素重用。
Mixins甚至可以接受带有设置默认值选项的参数。在下面的例子中，我们定义了一个方形 mixin，然后用它来创建不同大小和颜色的方块。
Sass
---sass代码
@mixin square($size, $color) {
width: $size;
height: $size;
background-color: $color;
}
.small-blue-square {
@include square(20px, rgb(0,0,255));
}
.big-red-square {
@include square(300px, rgb(255,0,0));
}
css
---css代码
.small-blue-square {
width: 20px;
height: 20px;
background-color: blue;
}
.big-red-square {
width: 300px;
height: 300px;
background-color: red;
}
另一种使用mixins的有效方法是，属性需要前缀才能在所有浏览器中使用。(就是浏览器兼容嘛)
Sass
---sass代码
@mixin transform-tilt() {
$tilt: rotate(15deg);
-webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: $tilt; /* IE 9 */
transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}
.frame:hover {
@include transform-tilt;
}
css
---css代码
.frame:hover {
-webkit-transform: rotate(15deg); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: rotate(15deg); /* IE 9 */
transform: rotate(15deg); /* IE 10, Fx 16+, Op 12.1+ */
}
4. 继承(Extend)
我们将看到的下一个特性是code > @extend，它允许您将一个选择器的CSS属性继承到另一个。这与mixins系统类似，但是当我们想要在页面上的元素之间创建逻辑连接时，它是首选。
当我们需要类似样式的元素时，应该使用继承，这些元素在某些细节上仍然不同。例如，让我们创建两个对话框按钮 - 一个用于同意，另一个用于取消对话框。
Sass
---sass代码
.dialog-button {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}
.confirm {
@extend .dialog-button;
background-color: #87bae1;
float: left;
}
.cancel {
@extend .dialog-button;
background-color: #e4749e;
float: right;
}
css
---css代码
.dialog-button, .confirm, .cancel {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}
.confirm {
background-color: #87bae1;
float: left;
}
.cancel {
background-color: #e4749e;
float: right;
}
如果你查看代码的CSS版本，你会发现Sass结合了选择器，而不是一遍又一遍地重复相同的声明，这就为我们节省了宝贵的内存。
5. 嵌套
HTML遵循严格的嵌套结构，而在CSS中它通常是完全混乱。使用Sass嵌套，您可以以更接近HTML的方式组织样式表，从而减少CSS冲突的可能性。
示例
Sass
---sass代码
ul {
list-style: none;
li {
padding: 15px;
display: inline-block;
a {
text-decoration: none;
font-size: 16px;
color: #444;
}
}
}
css
---css代码
ul {
list-style: none;
}
ul li {
padding: 15px;
display: inline-block;
}
ul li a {
text-decoration: none;
font-size: 16px;
color: #444;
}
非常整洁并容易纠错。
6. Operations
使用Sass，您可以在样式表中进行基本的数学运算，它就像应用适当的算术符号一样简单。
Sass
---sass代码
$width: 800px;
.container {
width: $width;
}
.column-half {
width: $width / 2;
}
.column-fifth {
width: $width / 5;
}
css
---css代码
.container {
width: 800px;
}
.column-half {
width: 400px;
}
.column-fifth {
width: 160px;
}
虽然原生CSS现在也以 calc（）的形式提供了这个功能，但是Sass替代方案更快，并且进行模运算%，并且可以应用于更广泛的数据类型（例如颜色和字符串）。
7. 函数
Sass提供了很多内置函数。它们用于各种目的，包括字符串操作，颜色相关操作，以及一些方便的数学方法，如random（）和round（）。
为了展示一个更简单的Sass函数，我们将创建一个使用 darken(amount) 来实现悬停效果的快速片段。
Sass
---sass代码
$awesome-blue: #2196F3;
a {
padding: 10px 15px;
background-color: $awesome-blue;
}
a:hover {
background-color: darken($awesome-blue,10%);
}
css
---css代码
a {
padding: 10px 15px;
background-color: #2196F3;
}
a:hover {
background-color: #0c7cd5;
}
除了庞大的可用功能列表外，还有定义您自己的功能的选项。Sass也支持流控制，所以如果你愿意，你可以创建非常复杂的行为。
结论
以上的一些功能将来会出现在标准CSS中，但它们还没有完全实现。与此同时，预处理器是改善CSS编写体验的好方法，Sass在选择时也是一个不错的选择。
我们这里仅涉及表面，但Sass还有很多比这更多的内容。如果您想更熟悉它提供的所有内容，请点击以下链接：
附 : Sass cheatsheet
小白一枚，翻译不当还请见谅。码字不易，希望对大家有所帮助。
vue init mpvue/mpvue-quickstart firstapp
网友评论