zoukankan      html  css  js  c++  java
  • Sass基础教程、最基本部分

    Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)嵌套 (nested rules)混合 (mixins)导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

    • 变量申明    
    $nav-color: #F90;
    • 变量引用
    $nav-color: #F90;
    nav {
      $ 100px;
       $width;
      color: $nav-color;
    }
    
    //编译后
    
    nav {
       100px;
      color: #F90;
    }
    • 嵌套
    #content {
      article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
      }
      aside { background-color: #EEE }
    }
    
     /* 编译后 */
    #content article h1 { color: #333 }
    #content article p { margin-bottom: 1.4em }
    #content aside { background-color: #EEE }
    • 混合器
    @mixin rounded-corners {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    notice {
      background-color: green;
      border: 2px solid #00aa00;
      @include rounded-corners;
    }
    //最终生成 .notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
    • 继承
    .disabled {
      color: gray;
      @extend a;
    }
    

      

  • 相关阅读:
    kafka概念使用简介注意点
    spring boot整合log4j2
    postgresql和oracle数据库对比
    postgresql数据操作
    Django缓存序列化信号
    Django补充
    Git学习
    JavaScript语法和类型
    Django分页
    Vue:配置组件
  • 原文地址:https://www.cnblogs.com/soup227/p/9281126.html
Copyright © 2011-2022 走看看