Sass（三）快速入门1-使用变量；嵌套CSS 规则（后代选择器、父选择器&、群组选择器、组合选择器\＞ +和~、嵌套属性）；导入SASS文件（使用sass部分文件、默认变量值）；

最新推荐文章于 2024-07-14 22:50:12 发布

ChrisP3616

最新推荐文章于 2024-07-14 22:50:12 发布

阅读量1.3k

点赞数 2

分类专栏：前端工程师1——汇总前端工程师6——CSS预处理、CSS框架文章标签： css html5 html sass

本文链接：https://blog.csdn.net/qq_43456781/article/details/120162013

版权

本文详细介绍了Sass中的变量使用，包括声明、引用和命名规范。此外，还阐述了嵌套CSS规则，如后代选择器、父选择器、群组选择器和组合选择器的使用，以及如何导入SASS文件，如使用部分文件和默认变量值，提高代码组织和复用性。

摘要由CSDN通过智能技术生成

Sass（三）快速入门1-使用变量;嵌套CSS 规则（后代选择器、父选择器&、群组选择器、组合选择器> +和~、嵌套属性）;导入SASS文件（使用sass部分文件、默认变量值）;

文章目录

Sass（三）快速入门1-使用变量;嵌套CSS 规则（后代选择器、父选择器&、群组选择器、组合选择器\> +和~、嵌套属性）;导入SASS文件（使用sass部分文件、默认变量值）;

总结：
变量

变量命名

使用中划线的方式更为普遍，这也是compass和本文都用的方式。

中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。
嵌套CSS规则
后代选择器

把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）
父选择器&
article a {
          
  color: blue;
  :hover {
           color: red }
}
你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。
article a {
          
  color: blue;
  &:hover {
           color: red }
}
当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
article a {
           color: blue }
article a:hover {
           color: red }
群组选择器
css写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器：
.container h1, .container h2, .container h3 {
           margin-bottom: .8em }
当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来：
.container {
          
  h1, h2, h3 {
          margin-bottom: .8em}
}
对于内嵌在群组选择器内的嵌套规则，处理方式也一样：
nav, aside {
          
  a {
          color: blue}
}
首先sass将nav和a``aside和a分别组合，然后将二者重新组合成一个群组选择器：
nav a, aside a {
          color: blue}
组合选择器>、+和~
子组合选择器>

选择一个元素的直接子元素。
相邻组合选择器+
选择header元素后紧跟的p元素：
header + p {
             font-size: 1.1em }
全体组合选择器~，
选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：
article ~ article {
             border-top: 1px dashed #ccc }
嵌套属性
nav {
          
  border: {
          
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。
导入sass文件
简介

css``@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

使用sass的@import规则并不需要指明被导入文件的全名

使用sass部分文件

sass局部文件的文件名以下划线开头

sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。

当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。

举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。
默认变量值
!default标签
$fancybox-width: 400px !default;
.fancybox {
          
width: $fancybox-width;
}