使用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; }
通过这样简单的语法就可以实现,自己的样式库啦。
使用的方法就是直接给标签添加一个类型即可实现,如: <div class='margin-left-2' ></div>
这就相当于左外边距为 2px,简单又直观!