编程式处理Css样式的示例代码
程序员文章站
2022-06-23 22:31:15
编程式方法的好处 1.全局控制,避免样式散乱2.代码简洁,开发快速 函数式编程大量使用函数,减少了代码的重复,因此程序比较短,开发速度较快3.接近自然语言,易于理解 函数式编程的*度很高,可以写出很...
编程式方法的好处
1.全局控制,避免样式散乱
2.代码简洁,开发快速 函数式编程大量使用函数,减少了代码的重复,因此程序比较短,开发速度较快
3.接近自然语言,易于理解 函数式编程的*度很高,可以写出很接近自然语言的代码
4.更方便的代码管理
5.书写样式成为一门艺术
less
bad
.card-title { font: "pingfang-sc-medium"; color: #333; font-size: 18px; } .card-title { font: "pingfang-sc-regular"; font-size: 14px; color: #333; }
good
// 申明less函数 .mixin-font-class(@fontcolor: yellow; @fontsize; @fontfamily) { font-family: @fontfamily; font-size: @fontsize; color: @fontcolor; }
应用
h6 { .mixin-font-class(@fontcolor:red;@fontsize:12px;@fontfamily:"pingfang-sc-medium"); } h2{ .mixin-font-class(@fontcolor:blue;@fontsize:15px;@fontfamily:"pingfang-sc-regular"); }
全局less
在vue-cli模式中
// 添加全局less pluginoptions: { 'style-resources-loader': { preprocessor: 'less', patterns: [ resolve('./src/less/theme.less') ] } },
// 在任何组件中或者less文件中使用 <style lang="less" scoped> .breadtop { height: 60px; display: flex; align-items: center; justify-content: space-between; padding-right: 15px; h6 { .mixin-font-class(@fontcolor:red;@fontsize:12px;@fontfamily:"pingfang-sc-medium"); } h2{ .mixin-font-class(@fontcolor:blue;@fontsize:15px;@fontfamily:"pingfang-sc-regular"); } } </style>
scss
$font-normal-color = #222; $font-light-color = #333; @mixin font-class($fontfamily, $fontsize, $fontcolor) { font-family: $fontfamily; font-size: $fontsize; color: $fontcolor; } @mixin font-large($size: 14px, $color: $font-normal-color) { @include font-class($font-family-medium, $size, $color); } @mixin font-normal($size: 14px, $color: $font-light-color) { @include font-class($font-family-regular, $size, $color); }
使用
.form-title { @include font-large(16px, red); } .form-text { @include font-large(12px, blue); }
注意less函数的参数使用的@,scss使用的$
到此这篇关于编程式处理css样式的文章就介绍到这了,更多相关编程式处理css样式内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!