zoukankan      html  css  js  c++  java
  • CSS预处理语言

    CSS预处理语言

      Less,Sass,Stylus

    安装

    Less

      yarn add less

      运行命令 ./node_modules/.bin/lessc

    嵌套规则

    Less、Sass嵌套规则一样

    #header {
      h1 {
        font-size: 26px;
        font-weight: bold;
      }
      p { font-size: 12px;
        a { text-decoration: none;
          &:hover { border- 1px }
        }
      }
    }

    变量

    Less

    @color: #4D926F;
    
    #header {
      color: @color;
    }
    h2 {
      color: @color;
    }

    Sass

    $nav-color: #F90;
    nav {
      $width: 100px;
      width: $width;
      color: $nav-color;
    }

    Less变量采用的是@

    Sass变量采用的是$

    混合(mixin)

    Less

    .rounded-corners (@radius: 5px) {
      border-radius: @radius;
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
    }
    
    #header {
      .rounded-corners;
    }
    #footer {
      .rounded-corners(10px);
    }

    Sass

    @mixin rounded-corners ($radius: 5px) {
      border-radius: $radius;
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
    }
    
    #header {
      @include rounded-corners;
    }
    #footer {
      @include rounded-corners(10px);
    }

    Less的mixin尽可能的跟CSS一样

    Sass的mixin接近JS的书写风格  @mixin  @include

    extend

    Less

    .a{
        &:extend(.b);
        font-size: 12px;
    }
    .b{
        font-weight: bold;
    }

     Sass

    .a{
        @extend .b;
        font-size: 12px;
    }
    .b{
        font-weight: bold;
    }

    Less和Sass书写区别

  • 相关阅读:
    spring data jpa 不更新 null 值,
    Android 生命周期
    Java相对路径/绝对路径总结
    android 系统广播
    ADB 设置远程调试
    adb server is out of date ADB server didn't ACK * failed to start daemon *一种解决方式
    Windows 8.1 Enterprise Preview
    反编译CMD命令
    判断运营商
    ADT安装
  • 原文地址:https://www.cnblogs.com/sonwrain/p/10492912.html
Copyright © 2011-2022 走看看