ps:写代码时天天用,面试时却没了思路(′⌒`),这就是懒的下场啊,一定要多总结、多整理、多进步,进步是和收入持平的本钱。
使用$定义变量和引用变量
不一定是父套子,也可以是子套父
可以用@extend 继承一个自定义的样式
一、定义变量与引用
1.引用另一个SCSS文件的变量
- 在helper.scss就可以用$定义变量给其赋值
image
- 使用@import 导入文件后,就可以用$变量名引用
image
- 此外,WebStorm需设置webpack路径
image
2.在本文件中定义变量与引用
$color:#f00;
.ouput{
color:$color;
}
二、嵌套CSS
<div class="createTag-wrapper">
<button class="createTag selected">
新建标签
</button>
<input type="text"/>
</div>
.createTag{
$bg:#ccc; //这个变量全局能用
&-wrapper{ //父元素在里面,前缀相同用&
$h:24px; //这个变量只有这个 &-wrapper{}里面能用
input{ //子元素可以省略>
background:$bg;
height:$h;
}
}
&.selected{ //被选中的button
}
}
三、继承
%clearFix{
&::after{
content: '';
clear: both;
display: block;
}
}
.buttons{
@extend %clearFix;
}
四、注释方式
有两种注释方式:
/* 这是注释 */
// 这是注释
1. /* 这个注释会出现在css中 */
image
image
2. //这个注释不会出现在css中
image
image