scss常用变量声明

scss常用变量声明

$prefix-cls = ‘jeremy-’

1、scss属性值引用变量

$prefix-btn-cls: '#{$prefix-cls}btn'

2、属性名称使用变量

.#{$prefix-btn-cls}{
	background-color: red
}

3、跳出选择器嵌套

.parent-3 {  background:#f00;
  @at-root {
    .child1 {  width:300px;}    
    .child2 {  width:400px;}
  }
}


解析后
.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}

.child2 {
  width: 400px;
}

4、跳出媒体查询，父级有效
@at-root (without: media)

5、跳出媒体查询和父级
@at-root (without: all)

6、连续使用多个类选择器

.jeremy{
	background-color: red;
	&-ghost#{&}-primary{
		color: red
	}
}

解析后
.jeremy{
	background-color: red
}
.jeremy-ghost.jeremy-primary{
	color: red
}

7、scss提升/降低透明度

opacify(rgba(22,34,235,.6),.2) -->  rgba(22, 34, 235, 0.8)
fade-in(rgba(23,34,34,.5),.15) -->  rgba(23, 34, 34, 0.65)

8、颜色通过HSL提升或降低

lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色
darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色