变量

$ 符号来标识变量;把反复使用的css属性值定义成变量;

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 变量中可存在变量

a {
  color: $link_color; // 中划线和下划线等价,包括对混合器和Sass函数的命名
}

继承

继承是基于类class的(有时是基于其他类型的选择器)
允许一个选择器,继承另一个选择器。比如,现有class1:
.class1
{ border: 1px solid #ddd;} // class2要继承class1,就要使用@extend命令: .class2 { @extend .class1; font-size:120%; }

混合器Mixin

避免不停地重复一段样式

// 使用@mixin命令,定义一个代码块。   @mixin left
{     float: left;     margin-left: 10px;   } //使用@include命令,调用这个mixin。   div {     @include left;   }    // mixin的强大之处,在于可以指定参数和缺省值。   @mixin left($value: 10px) {    float: left;    margin-right: $value;   } // 使用的时候,根据需要加入参数:   div {     @include left(20px);   }

插入文件

Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import "foo.scss"; //都会导入文件 foo.scss
@import "foo"; //都会导入文件 foo.scss
@import "http://foo.com/bar";  // 插入外部文件
@import "foo.css"; // 等同于css的import命令。

scss总结

 这里只是简单介绍 scss 最基本部分,使用 scss 可以编写清晰、无冗余、语义化的 css。

变量是 scss 提供的最基本的工具。通过变量可以让独立的 css 值变得可重用,无论是在一条单独的规则范围内还是在整个样式表中。

变量、混合器的命名甚至 scss 的文件名,可以互换通用_和-。

同样基础的是 scss 的嵌套机制。嵌套允许css规则内嵌套css规则,减少重复编写常用的选择器,同时让样式表的结构一眼望去更加清晰。scss同时提供了特殊的父选择器标识符 & ,通过它可以构造出更高效的嵌套。

混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。使用混合器减少重复,使用混合器让你的css变得更加可维护和语义化。

与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系,通过这些关系可以保持你的css的整洁和可维护性。

样式导入,scss 的另一个重要特性。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件,避免了项目中有大量的css文件通过原生的css @import带来的性能问题。通过嵌套导入和默认变量值,导入可以构建更强有力的、可定制的样式。

01-06 19:57