zoukankan      html  css  js  c++  java
  • scss 初学笔记 一 变量声明 默认的样式 嵌套

    $ 300px !default;

    $:          变量声明符号;

       变量名称;

    300px:   赋予变量的值;

    !default  代表默认样式

    !default:

    $primary-size : 26px;
    $primary-size : 45px;
    $primary-size : 12px !default;

    以上css样式代表  12px为默认的样式  上面可以从写默认样式的值 (即被覆盖) 上面两个样式 一次由上到下被覆盖 跟css的样式规则相同

    $color: #000;
    header{
     $color: red;
     h1{
      color: $color;  //red;
     }
    } 
    footer{
     color: $color; //#000;
    }

    css定义可以分为 全局变量和局部变量  定义的规则: 是否在选择器 函数 混合宏...的外面定义

    scss嵌套分为三种  

    选择器嵌套

    属性嵌套

    伪类嵌套

    //选择器嵌套
    <nav> <span>haha</span> </nav> nav
    { span{ color:$color; } }
    // 属性嵌套
    <div class="box"><div>
    
    .box{
      .border{
        top:1px solid #ccc;
        bottom: 1px solid #000;
      }
    }
    border-top
    magin-top
    font-size
    //伪类嵌套
    
    .clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
    }
  • 相关阅读:
    升级Xcode之后VVDocumenter-Xcode不能用的解决办法
    iOS国际化
    display:table 表格布局
    display: run-in
    连续字符换行 溢出点点点 多行省略
    Number 类型
    Boolean 相关
    Browsing contexts 浏览器上下文
    return flase 作用
    JS外链
  • 原文地址:https://www.cnblogs.com/liuxiankun/p/6589632.html
Copyright © 2011-2022 走看看