使⽤sass语法⽣成⾃⼰的css的样式库前⾔
先说⼀下 sass 和 scss的区别
sass 是⼀种缩进语法(即没有花括号和分号,只使⽤换⾏缩进的⽅式去区别⼦元素,PS:这是我个⼈的理解)scss 是css-like语法(它的语法更css很像,使⽤花括号和分号,去区分⼦元素)
详细的⾃⾏google或者百度噢
现在我们可以使⽤scss⾥的变量和循环语法⽣成⾃⼰的css样式库,⽅便⾃⼰的开发
⾸先,先定义盒⼦模型的属性和⽅向
$box-prop: ( 'padding' , 'margin', 'border' )
$box-direaction: ( 'top', 'right', 'bottom', 'left' )
接下来,使⽤循环的语法
/* 盒⼦模型: Margin Border Padding
-------------------------- */
$box-max: 20;
$box-step: 2;
$box-prop: ('padding' , 'margin', 'border');
$box-direaction: ('top', 'right', 'bottom', 'left');
/* ⽣成间隔为2的 .margin-left-2 .margin-left-4 ...
-------------------------- */
$i: $box-step;
@while $i <= $box-max {
@each $way in $box-direaction {
@each $prop in $box-prop {
// padding-left-2
.
#{$prop}-#{$way}-#{$i} {
#{$prop}-#{$way}: #{$i}px;
}
// padding-2: 2px;
.#{$prop}-#{$i} {
#{$prop}: #{$i}px;
}
}
}
$i: $i + $box-step;
}
borderbox通过这样简单的语法就可以实现,⾃⼰的样式库啦。
使⽤的⽅法就是直接给标签添加⼀个类型即可实现,如: <div class='margin-left-2' ></div>
这就相当于左外边距为 2px,简单⼜直观!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论