Sass笔记

2019-03-21 本文已影响0人花霏花

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( $color,$ 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

Sass笔记

15分钟学Sass

1.入门

2. 变量

3. Mixins

4. 继承(Extend)

5. 嵌套

6. Operations

7. 函数

结论

猜你喜欢

热点阅读