0%

SCSS简单入门

发表于

由于最近要写一个系列文章，为了保证尽可能的严谨。我将其中设计的到的知识点再重新复习一遍。过一遍官方文档，查缺补漏，也能带大家入门。

SCSS是一个CSS预处理器，它可以让我们使用一些CSS没有的功能，比如变量（现在CSS已经支持变量）嵌套，mixins，继承等。让样式变得好维护。

当我们安装了SCSS之后，可以在控制台直接运行

1
sass input.scss out.css

这样就把scss文件直接编译为css文件，就可以在浏览器中直接使用。
你还可以对scss文件的变化进行监听。加上--watch

1
sass --watch input.scss output.css

这样每当你保存的时候，它都会重新build。
你也可以监听整个目录，input和output路径通过冒号分割

1
sass --watch app/sass:public/stylesheets

Sass会监听app/sass目录下所有scss文件的变化。

变量

用$来声明变量，变量可以来保存你想要重用的。比如颜色、字体样式、宽高之类的。

1
2
3
4
5
6
7
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

嵌套

在写HTML的时候，我们有很好的层次结构。现在Scss也可以让我们坐到。但主要不要嵌套太多层，直接上例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Partials

这个很好理解，这个就是放一些公共样式，只要在你的scss文件名前面加上_，这个scss文件中的内容就不会被build到css文件中。这个写在写组件的时候会很有用。

模块化 Modules

你不可可能将所有的样式都写在一个文件内。只要用@use不包含扩展名就能将别的文件模块引入。

1
2
3
4
5
6
7
8
// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

1
2
3
4
5
6
7
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

生成的CSS文件。

1
2
3
4
5
6
7
8
9
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Mixins

在写css的时候经常会写一些重复性的代码。Mixins的出现就能很好的解决这个问题。我们用@mixin来定义一个mixin然后用@include来使用它。直接看例子

1
2
3
4
5
6
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

build的css

1
2
3
4
5
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

扩展和继承

这个非常有用，它可以让不同的算选择器公用一部分样式，还能保持自己的样式干净。这块看例子最清晰明了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

我们看它生成的样式

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

感觉非常的棒。

运算符

scss支持常见的运算符。如加、减、乘、除、取余之类的。常运用宽高的计算。