您现在的位置是:网站首页> 编程资料编程资料

编程式处理Css样式的示例代码HTML外部样式表如何引入CSS样式详解CSS3中常用的样式【基本文本和字体样式】CSS 选择所有子元素添加样式的方法CSS常用样式之绘制双箭头的示例代码详解中文字体在CSS样式中font-family对应的英文名称CSS实现鼠标悬停改变其他标签样式的示例代码解决ElementUI自定义CSS样式不生效的问题

2021-09-03 1077人已围观

简介 这篇文章主要介绍了编程式处理Css样式的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

编程式方法的好处

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文件中使用 

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样式内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

相关内容

-六神源码网