node\node-sass\sass-loader对应版本

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选择器的元素
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值