Sass相关总结

目录

一.静默注释

二.Sass命令

@import指令

 @mixin 与 @include指令

 @extend指令

---

一.静默注释

说明:  静默注释即注释中的内容不会出现在生成的css文件中 

注释格式:     /* ... */

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

二.Sass命令

@import指令

简介: 导入 scss , 被导入的文件将合并编译在同一个 css 文件，同时也可以使用被导入的文件中所包含的变量和指令。

语法: 

@import "filename";

 被导入的file.scss文件:

input{
    background-color: #fff;
    width: 100%;
    height:800px;
}

 原new.scss文件:

@import "file";

button{
    background-color: #53b5df;
    color: #fff;
    padding: 10px 20px;
}

转换成的new.css文件:

input{
    background-color: #fff;
    width: 100%;
    height:800px;
}
button{
    background-color: #53b5df;
    color: #fff;
    padding: 10px 20px;
}

 @mixin 与 @include指令

简介:

@mixin 指令定义一个可以在整个样式表中重复使用的样式。

@include 指令将混入（mixin）引入到文档中。

@mixin一般和@include 搭配使用，@mixin定义样式,@include引用样式。

实例:

scss代码:

@mixin button {
  font-size: 1em;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #fff;
}

.button-green {
  background-color: green;
  @include button;
}

css代码: 

.button-green {
  background-color: green;
  font-size: 1em;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #fff;
}

 @extend指令

简介:可以让一个CSS类继承另一个CSS类,当多个元素之间共享一组属性值，同时又有各自额外属性值时，这种方法很有用

举例:

以警告框为例，警告框有4种类型：

info,success,error,warning

所有类型的警告框样式相同，但颜色不同。每个类型的警告框使用@extend指令继承一组公共属性，然后各自设置颜色值。

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.info {
  @extend .alert;
  background-color: dodgerblue;
}

.success {
  @extend .alert;
  background-color: green;
}

.error {
  @extend .alert;
  background-color: red;
}

.warning {
  @extend .alert;
  background-color: orange;
}