SASS学习笔记

2018-10-10 本文已影响0人无知者云

本文github地址：

git clone https://github.com/davenkin/sass-learning.git

安装SASS

cnpm install -g sass

SASS有2中格式，一种是早期具有缩进风格的sass文件，一种是当前推荐的scss文件，scss文件完全兼容css文件，因此css文件可以直接修改后缀名而变为scss文件，本文采用scss文件格式。

在名为styles的目录下创建scss文件test.scss：

$primary : #434433;

html {
  text-color: $primary;
}

这里我们使用了SASS中的变量功能，然后用sass命令进行编译：

sass test.scss test.css

也可以对整个目录进行编译：

sass --watch styles:out

表示监视styles目录下的所有scss文件，并将它们编译到out目录下。此时SASS会以scss文件为单位进行编译，partial文件除外（下文有讲解）。

变量为标有$前缀的符号，其定义方式跟css的键值对形式一样：

$variable ： value

可以本scss文件中进行定义，也可以引用@import文件中的变量。

标准css的@import会发起一次额外的HTTP请求，而SASS在编译的过程中便已经对@import的内容进行了合并。但是在以下情况下，SASS不会处理@import，而是照原样输出到css文件中：

如果多个scss文件import了同一份文件，那么这份文件的内容将重复出现在多个文件中，这可能会导致最终所有css合并到一起之后出现重复。

在styles目录下创建global.scss文件已被多个文件import：

body {
color:blue;
}

修改test.scss文件，import上面的global.scss文件：

@import './global';
$primary : #434433;

html {
  color: $primary;
}

另外创建test2.scss文件，同样import global.scss文件：

@import './global';
$secendary : red;

div {
  color: $secendary;
}

运行scss --watch styles:out，在out目录下输出test.css：

body {
  color: blue;
}

html {
  color: #434433;
}

test2.css内容：

body {
  color: blue;
}

div {
  color: red;
}

可以看到，body内容在两份文件中重复了，对此，建议的方式是，一是保证一个文件只被import一次，二是只在被import的文件中定义变量、mixin等信息。

前文提到，SASS会以文件为单位进行编译，如果不想某个scss文件单独编译，可以将其处理为partial文件，也即在文件名前加上一个下划线，比如_base.css

可以通过@extend可以对css进行继承：

.button-base {
   radius: 2px;
   margin: 5px;
}

.menu-button {
   @extend .button-base;
   background-color: blue;
   color: white;
}

此时button-base和menu-button会同时输出，但是有时我们只想button-base作为继承的模板使用，就像java中的抽象类一下，此时可以使用placeholder selector，即在button-base前面去掉点.，另加上百分号%：

%button-base {
   radius: 2px;
   margin: 5px;
}

#main {
  p {
    color:black;
  } 
}

会被编译成：

#main p {
  color: black;
}

有时我们希望在child选择符中加上parent选择符的前缀，此时可以通过特殊的&符号引用parent选择符，SASS通过类似于文本替换的方式将&替换为parent选择符。

a {
   color: red;
   &:hover{
     color: green;
   }
}

将被编译为：

a {
  color: red;
}
a:hover {
  color: green;
}

另一个例子：

#main {
   color: blue;
   &-header {
   color: yellow;
   }
}

将被编译成：

#main {
  color: blue;
}
#main-header {
  color: yellow;
}