Sass总结笔记

整理了Sass常用的使用方法，如变量、嵌套、导入和混合器。

注释

注释在编译时会被去除，格式：

//注释

变量

变量声明使用$开头

$highlight-color: #F90;
$basic-border: 1px solid black;

变量的引用

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

// 可嵌套引用
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

变量的默认值

如果写了多个相同的变量，默认则后面覆盖前面的值。如果给后面的变量加上默认值，则默认值会失效，因为存在相同的变量了

$highlight-color: red;
$highlight-color: blue !default;

变量最终的结果为red

变量作用域

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

变量使用中划线和下滑线是等价的

$link-color: blue;
a {
  color: $link_color;
}

嵌套CSS规则

基本用法

#content {
	width: 1200px;
	article {
		h1 { color: #333 }
		p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

// 编译后
#content {width: 1200px }
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父级选择器标识符：&

// 案例一
article a {
  color: blue;
  &:hover { color: red }
}
// 编译后
article a { color: blue }
article a:hover { color: red }

// 案例二
#content aside {
  color: red;
  body.ie & { color: green }
}
// 编译后
#content aside {color: red}
body.ie #content aside { color: green }

群组选择器嵌套

// 案例一
nav, aside {
  a {color: blue}
}
// 编译后
nav a, aside a {color: blue}

// 案例二
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
// 编译后
.container h1{margin-bottom: .8em}
.container h2{margin-bottom: .8em}
.container h3{margin-bottom: .8em}

子元素、相邻、兄弟选择器

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

// 编译后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

导入

文件导入是保证Sass的代码可维护性和可读性的重要一环。 导入相当于把被导入文件的内容全部拿过来。

@import “theme.sass”
@import “theme.scss”

// 可以省略后缀（推荐），自动查找sass或scss
@import “theme”

局部文件以下划线开头，不会被单独编译，导入局部文件时不需要加下划线。 如果。

如果导入的文件名以.css结尾的话，那么就是原生的css导入，这会造成浏览器解析css时的额外下载，可以将后缀名修改为.scss，scss语法是完全兼容css的。

不仅可以在全局范围导入文件，还可以在css规则中导入。

混合器

混合器用于复用一组属性规则或者一组CSS规则，还可以传递参数、给参数设置默认值来提高灵活性。

属性和规则复用

定义：

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

使用：

ul.plain {
  color: #444;
  @include no-bullets;
}

编译后：

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器传参

定义带参数的混合器

@mixin link-colors($normal, $hover, $visited: blue) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

调用混合器

a {
  @include link-colors(blue, red);
}

//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: blue; }

🕑 最后更新时间: 2022-08-18 23:31