跳转至

Sass

约 269 个字 109 行代码 预计阅读时间 2 分钟

世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言。

变量

声明与引用

1
2
3
4
5
6
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

编译后：

1
2
3
4
nav {
  width: 100px;
  color: #F90;
}

凡 CSS 属性标准值可存在的地方都能用

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

编译后：

1
2
3
.selected {
  border: 1px solid #F90;
}

变量可引用其他变量

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

编译后：

1
2
3
.selected {
  border: 1px solid #F90;
}

变量命名分隔符

用下划线（_）或中划线（-，更为普遍）均可。

1
2
3
4
$link-color: blue;
a {
  color: $link_color;
}

编译后：

1
2
3
a {
  color: blue;
}

大多数情况下两种写法可互相兼容、互相引用。

纯 CSS 部分不互通，如类名、ID、属性名。

嵌套

示例

1
2
3
4
5
6
7
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后：

1
2
3
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

同时为容器元素及其子元素写特定样式

1
2
3
4
#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

编译后：

1
2
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

父选择器

1
2
3
4
article a {
  color: blue;
  &:hover { color: red }
}

编译后：

1
2
article a { color: blue }
article a:hover { color: red }

可以用于伪类、特殊的嵌套选择器。

1
2
3
4
#content aside {
  color: red;
  body.ie & { color: green }
}

编译后：

1
2
#content aside {color: red};
body.ie #content aside { color: green }

群组选择器的嵌套

1
2
3
4
5
6
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
nav, aside {
  a {color: blue}
}

编译后：

1
2
.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav a, aside a {color: blue}

嵌套属性 - 1

1
2
3
4
5
6
7
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

编译后：

1
2
3
4
5
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

嵌套属性 - 2

1
2
3
4
5
6
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

编译后：

1
2
3
4
5
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

选择器

直接子元素：>

1
article > section { border: 1px solid #ccc }

同层相邻选择器：+

1
header + p { font-size: 1.1em }

同层全体组合选择器：~

1
article ~ article { border-top: 1px dashed #ccc }

选择器的应用

1
2
3
4
5
6
7
8
9
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译后：

1
2
3
4
5
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 }

导入

1
@import "sidebar";

当扩展名为 .sass 或 .scss 时，可省略扩展名。

来源

Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网