编程式处理Css样式的示例代码

编程式方法的好处

1.全局控制，避免样式散乱

2.代码简洁，开发快速 函数式编程大量使用函数，减少了代码的重复，因此程序比较短，开发速度较快

3.接近自然语言，易于理解 函数式编程的自由度很高，可以写出很接近自然语言的代码

4.更方便的代码管理

5.书写样式成为一门艺术

less

bad

.card-title {    font: "pingfang-sc-medium";    color: #333;    font-size: 18px;}.card-title {    font: "pingfa事故通报ng-sc-regular";    font-size: 14px;    color: #33对你爱不完 金池3;}

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模式中

// 添加全局lesspluginoptions: {        '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-norma黄冈小状元达标卷l-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($f卧室装修效果图欣赏ont-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样式内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！