//声明变量 $onewidth:100px; //声明混合宏 @mixin tow{ width: 100px; height: 100px; background-color:aqua; border: 1px solid orange; } //调用混合宏 .box2{ @include tow; } .box2{ @include tow; } //声明一个带参数的混合宏 @mixin ouba($kk){ margin-bottom: $kk; } //调用一个带参数的混合宏 .box1{ @include ouba(20px); } .box2{ @include ouba(50px); } //扩展、继承 关键词@extend .haha{ outline: none; border: 1px solid royalblue; padding-bottom: 12px; } //调用继承样式 input[type="text"]{ @extend .haha; color: aqua; } input[type="password"]{ @extend .haha; color: pink; } //占位符 %xixi{ width: 500px; height: 200px; background-color: salmon; } //使用占位符 .box3{ @extend %xixi; } //调用声明 .box1{ width: $onewidth; height: $onewidth; background-color: olive; } //属性嵌套 .box1{ border:{ top: 2px solid black; left: 2px solid red ; bottom: 2px solid pink; right: 2px solid lawngreen; }; margin: { top: 8px; bottom: 5px; right: 10px; left: 10px; }; }
时间: 2024-10-08 14:28:40