zoukankan      html  css  js  c++  java
  • CSS 预处理器框架

    CSS 预处理器框架

    可以按照需求来使用别人的代码

    1.sass (compass)

    2.less (lesshat/EST)

    3.提供现成的 mixin

    4.类似 JS 类库 ,封装常用功能  

    css 预处理器常见问题(详细讲解见上篇博客

    1.常见的 css 预处理器

    1.Less(Node.js)  2.Sass (Ruby 但有 Node 版本)

    2.预处理器作用

    1.帮助更好地组织 CSS 代码

    2.提高代码复用率

    3.提升可维护性

    3.预处理器能力

    1.嵌套  反映层级和约束

    2.变量和计算  减少重复代码

    3.Extend 和 Mixin 代码片段

    4.循环  适用于复杂有规律的样式

    5.import CSS 文件模块化

    4.预处理器的优缺点

    优点:提高代码复用率和可维护性

    缺点:需要引入编译过程 有学习成本

    演示:

    less

    .box{
        .inline-block();
        .opacity(60);
        height: 100px;
        background: green;
        margin:10px;
    }
    .left{
        float:left;
        .clearfix();
    }
    
    
    .row{
        .make-row();
        .col{
            .make-column(1/4);
            background:red;
            height: 100px;
        }
    }
    .my-triangle{
        margin:100px;
        // 100px;
        // height:200px;
        // border: 1px solid red;
    }
    .my-triangle::after{
        content: ' ';
        .triangle(top left, 100px, red, side);
    }
    

      html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="7-est.css">
        <title>Document</title>
    </head>
    <body>
        <div class="box">.box box1</div>
        <div class="box">.box box2</div>
        <div class="left">.left</div>
        <div class="row">
            <div class="col">col1</div>
            <div class="col">col2</div>
            <div class="col">col3</div>
            <div class="col">col4</div>
        </div>
        <div class="my-triangle"></div>
    </body>
    </html>
    

      css

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
      padding: 0;
      margin: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-family: inherit;
      font-size: 100%;
      vertical-align: baseline;
    }
    body {
      line-height: 1;
    }
    ol,
    ul {
      list-style: none;
    }
    table {
      border-collapse: separate;
      border-spacing: 0;
      vertical-align: middle;
    }
    caption,
    th,
    td {
      text-align: left;
      font-weight: normal;
      vertical-align: middle;
    }
    a img {
      border: none;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    main {
      display: block;
      padding: 0;
      margin: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-family: inherit;
      font-size: 100%;
      vertical-align: baseline;
    }
    audio,
    canvas,
    video {
      display: inline-block;
      *display: inline;
      *zoom: 1;
    }
    audio:not([controls]),
    [hidden] {
      display: none;
    }
    .box {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      opacity: 0.6;
      filter: alpha(opacity=60);
      height: 100px;
      background: green;
      margin: 10px;
    }
    .left {
      float: left;
      *zoom: 1;
    }
    .left:before,
    .left:after {
      display: table;
      content: "";
    }
    .left:after {
      clear: both;
    }
    .row {
      *zoom: 1;
    }
    .row:before,
    .row:after {
      display: table;
      content: "";
    }
    .row:after {
      clear: both;
    }
    .row .col {
      display: block;
      float: left;
       22.75%;
      margin-left: 3%;
      background: red;
      height: 100px;
    }
    .row .col:first-child {
      margin-left: 0%;
    }
    .my-triangle {
      margin: 100px;
    }
    .my-triangle::after {
      content: ' ';
      position: absolute;
       0;
      height: 0;
      border: 50px solid red;
      border-bottom-color: transparent;
      border-right-color: transparent;
      margin-top: -50px;
      margin-left: -50px;
    }
    

      

  • 相关阅读:
    uni-app中的数值监控方式及函数的封装和引用方式
    uni-app引入阿里矢量图在移动端不显示的问题
    前端登录页点击获取验证码的实现
    app每次更新版本时调用js代码提示用户下载更新
    @Dependson注解与@ConditionalOnBean注解的区别
    navicat for mysql 12中文破解版(安装+破解)--亲测可用
    Kubernetes 常用命令
    MySQL MERGE存储引擎
    MySQL中MyISAM与InnoDB区别
    什么是事务?什么是事务日志以及用途?
  • 原文地址:https://www.cnblogs.com/jianghao233/p/9075446.html
Copyright © 2011-2022 走看看