个人的SASS学习及速查资料

最新推荐文章于 2021-07-27 15:42:48 发布

原创最新推荐文章于 2021-07-27 15:42:48 发布 · 234 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

61 篇文章

订阅专栏

本文详细解析Sass中的变量声明、引用及作用域规则，同时深入探讨嵌套选择器的使用技巧，包括父选择器标识符、子代与同层组合选择器的应用，帮助读者掌握Sass高级特性。

文章目录

[1. 变量]
[2.] 嵌套规则

[1. 变量]

[1.1] 变量声明

用$来声明一个变量。如果声明但未被使用，则不会被编译。

$highlight-color: #F90;

要注意作用域，在{大括号}中声明的变量只在{大括号}中生效，否则全局有效。

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

[1.2] 变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。不一定不许是颜色数字等。

[1.3] 变量名用中划线还是下划线分隔

都可以，甚至可以混用。

$link-color: blue;
a {
  color: $link_color;
}
//编译后
a {
  color: blue;
}

[2.] 嵌套规则

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

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

[2.1] 父选择器标识符&

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

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

&不一定只能在开头使用，&也可以被嵌套，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

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

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

[2.3] 子代组合选择器和同层组合选择器：>、+和~

[2.3.1] 子代选择器

首先要区分

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

其实说白了就是选择深度的区别，前者是无限深度，只要在article之下都会被选择，而后者的选择深度只有一层。

[2.3.2] 同层选择器

在下例中，你可以用同层相邻组合选择器+选择紧跟在header后的p元素：

header + p { font-size: 1.1em }

你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：

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

在sass中，你可以这样写，轻松地实现上面的功能。

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