zoukankan      html  css  js  c++  java
  • SASS

    • 父选择器 &:
    //aaaa
    a {
      font-weight: bold;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      body.firefox & { font-weight: normal; }
    }
    
    编译为
    a {
      font-weight: bold;
      text-decoration: none; }
      a:hover {
        text-decoration: underline; }
      body.firefox a {
        font-weight: normal; }
    
    //bbbbbb
    #main {
      color: black;
      &-sidebar { border: 1px solid; } //& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器
    }
    编译为
    #main {
      color: black; }
      #main-sidebar {
        border: 1px solid; }
    • 变量 $ :
    #main {
      $width: 5em !global; //局部变量->全局变量
      width: $width;
    }
    
    #sidebar {
      width: $width;
    }
    
    编译为
    #main {
      width: 5em;
    }
    
    #sidebar {
      width: 5em;
    }
    • @extend:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error; // .error 下的所有样式继承给 .seriousError
      border-width: 3px;
    }
    • 插值语句:#{}
    $name: foo;
    $attr: border;
    p.#{$name} {
      #{$attr}-color: blue;
    }
    
    编译为
    p.foo {
      border-color: blue; }
    • @if
    p {
      @if 1 + 1 == 2 { border: 1px solid; }
      @if 5 < 3 { border: 2px dotted; }
      @if null  { border: 3px double; }
    }
  • 相关阅读:
    raw socket
    selenium and win32api
    linux ip
    network config
    grub paramiter & menu.list
    实用命令dd
    resin or tomcat .war e.g. note
    JSP 运行
    linux command screen
    docker interact example
  • 原文地址:https://www.cnblogs.com/minyDong/p/13627142.html
Copyright © 2011-2022 走看看