闲下来想了解,索性记录一下
变量@
1.样式变量
@color: #000 // 定义
color:@color // 使用
2. 样式名变量
@my-name:color;
.ad{
background-@{my-name}:#000;
}
3.选择器变量
@banner: portal-banner;
.@{banner}{
width:100%;
}
4.变量拼接
@base-url:”/images/”
.ad{
background-image:url(“@{base-url}ad.jpg”);
}
父选择器&
a{
color:333;
&:hover{}; // 输出:a:hover{}
&-button{}; // 输出: .a-button{}
&:hover, &-button{}; // 输出:a:hover,a-button{}
&+ &-button{}; // 输出:a + a-button{}; 与a同级相邻的a-button
span &{}; // 输出:span a{}
}
嵌套
.content{
margin-top: .24rem;
ul.new-list{
box-shadow: 0 0 10px rgba(0,0,0,.1)
li{
font-size:.14rem;
}
}
}
继承extend
.master-color{
color:#000;
}
.title{
&:extend(.master-color);
}
合并属性+ +_
1.
+合并后用逗号分隔
.box-merge(){
box-shadow+: inset 0 0 10px #555;
}
.box{
box-shadow+: inset 1px 1px 20px #333;
}
// 输出
.box{
.box-merge();
box-show+: inset 0 0 10px #555, inset 1px 1px 20px #333;
}
2.
+_合并后用空格隔开
.box-merge(){
transform+_:scale(2)
}
.box{
.box-merge();
trasnform+_:rotate(15deg);
}
// 输出
.box{
transform: scale(2) rotate(15deg);
}
混合
1.带小括号
// 定义
// 括号中,冒号左侧为参数名,冒号右侧为参数默认值
.f(@f1:left,@w:200px;@h:300px){
float:@f1;
width:@w;
height:@h;
}
// 使用
.left{
.f();
}
.right{
.f(right;300px;400px);
}
// 优先使用这个混淆
.left{
.f() !important;
}
2.
>只使用混合中的部分选择器
.master-mix(){
.sub{
font-size: .12rem;
}
}
.sub-title{
// 以下三种写法
.master .sub();
.master-mix.sub();
.master-mix > .sub();
}
3.
@arguments输出所有参数
.bs(@x:0,@y:0;@blur:1px;@color:#000){
box-shadow:@arguments;
}
.box{
.bx(10px);
}
// 输出
.box{
box-shadow:10px 0 1px #000;
}
@sizes:{
content:8rem;
Sub:2rem;
}
.subnav{
@media (min-width:@sizes[sub]){
display:block;
}
}