编程式处理Css样式的案例

这篇“编程式处理Css样式的案例”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“编程式处理Css样式的案例”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

编程式方法的好处

全局控制，避免样式散乱

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

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

更方便的代码管理

书写样式成为一门艺术

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;}

应用

h7 {        .mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium");}h3{      .mixin-font-class(@fontColor:blue;@fontSize:15px;@fontFamily:"PingFang-SC-regular");}

全局Less

在Vue-cli模式中

// 添加全局lesspluginOptions: {        'style-resources-loader': {            preProcessor: 'less',            patterns: [                resolve('./class="lazy" data-src/less/theme.less')            ]        }},

// 在任何组件中或者less文件中使用<style lang="less" scoped>.breadTop {    height: 60px;    display: flex;    align-items: center;    justify-content: space-between;    padding-right: 15px;    h7 {        .mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium");       }       h3{            .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样式的案例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！