node版本:v14.18.3 node-sass版本:4.7.2 sass-loader版本:7.3.1

node版本:16.13.1 node-sass版本:6.0.1 sass-loader版本:10.0.1

npm install -g cnpm@7.1.0 --registry=https://registry.npm.taobao.org
清理缓存命令: npm cache clean --force
在这里插入图片描述

用法:

1.变量:
(1)使用$命名
(2)可以{}内部中使用,作用域在{}内;可以在{}外部使用,作用域在整个style中

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

2.规则嵌套
嵌套前:

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

嵌套后:

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

3.父选择器的标识符& 适用于伪类

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

4.群组选择器的嵌套

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

5.>

article > section { border: 1px solid #ccc }
article下紧跟着的级别子元素中命中section选择器的元素
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐