scss 备忘笔记

1、"&"的使用

"&"代表父级选择器

.el-dialog {
	border-radius: 5px !important;
	&__header {
		border-bottom: 1px solid #ccc !important;
		margin: 0 16px !important;
	}
	&__body {
		padding-bottom: 10px;
	}
	&__footer {
		padding-top: 0;
	}
        &::hover{
            background:ping;
        }
}

2、样式属性嵌套

.heme {
	color: pink;
	font-size: 16px;
	font-weight: 550;
	font-family: 'Courier New', Courier, monospace;
}
// 简写为
.heme {
	color: pink;
	font: {
		size: 16px;
		weight: 550;
		family: 'Courier New', Courier, monospace;
	}
}

3、变量声明及使用

• scss声明变量以$开头；
• 变量名字不以数字开头，可以包含数字、字母、下划线、杠；
• 变量必须先声明后使用；

// css4
--border-color: red;
.home{
    color:var(--border-color);
}
// scss
$border-color:pink;
$border-color:#ccc !default;  // 默认值如果定义了就使用定义的，没有使用默认值
$color-map:(color1:#fff,color2:#000,color3:#f00);  // 定义枚举
$bg-falg:true;  // boolean
.container{
    border:1px solid $border-color;
    @if $bg-falg{  // 条件判断
        color:map-get($color-map,color2)
    }
    @else{
        color:map-get($color-map,color3)
    }  
}

4、导入外部样式

• 变量名字不以数字开头，可以包含数字、字母、下划线、杠；
• 变量必须先声明后使用；

.home{
    @import url(./css/index.css)   // css 文件引入，不能这样引入scss文件
    @import './scss/index.scss'    // scss 文件引入，可以引入css文件
    @import './scss/index'     // scss 文件引入可以后缀
}

5、混入 mixin

• @mixin set-padding(形参){}；
• @include set-padding(入参)；
• 可以设置默认值；
• 入参可指定参数名称；

// 定义混入方法
@mixin set-padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}
// 使用
    @include set-padding($top: 10px, $left: 20px, $right: 10px, $bottom: 50px); // 指定参数
    @include set-padding(10px, 20px, 30px, 40px);
// 可变参数
@mixin set-linear-gradient($direction, $gradients...) {
    background-image: linear-gradient($direction, $gradients);
}
@include set-linear-gradient(to left, red, pink, blue);

5、加减乘除运算

width: $full-width - $sidebar-width; // 300px
width: 300px + 500px; // 800px
height: 100px * 2; // 200px
width: (1000px / 10); // 100px