首页 > 代码库 > Sass框架的应用
Sass框架的应用
//声明变量 $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; }; }
Sass框架的应用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。