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

      

  • 相关阅读:
    c#面向对象基础技能——学习笔记(五)委托技术在开发中的应用
    c#面向对象基础技能——学习笔记(三)基于OOP思想研究对象的【方法】
    c#面向对象基础技能——学习笔记(二)基于OOP思想研究对象的【属性】
    使用移位寄存器产生重复序列信号“100_0001”,移位寄存器的级数至少为?
    设计一个异步双端口RAM,深度为16,数据位宽为8bit
    soda水1块钱,硬币有五毛和一块两种:
    画状态机,接收1,2,5分钱的卖报机,每份报纸5分钱
    三极管
    画出可以检测10010串的状态图
    NOT、NAND、NOR符号
  • 原文地址:https://www.cnblogs.com/jianghao233/p/9075446.html
Copyright © 2011-2022 走看看