zoukankan      html  css  js  c++  java
  • sass最佳实践

    sass

    变量

    可以实现统一的布局,比如统一的内边距,统一的外边距,统一的颜色,统一的字号。  

    嵌套

    可以根据组件的嵌套方式来嵌套css代码,方便收缩,查找。代码结构非常清晰,有利于以组件的方式开发

    混合

    代码重用的时候需要用到,运用混合又会遇到另外一个问题,当相同的代码在不同的地方重新编写,会使代码冗余,比如:

    @mixin clearfix{
    
      &:before,&:after{
    
        display:block;
        content:'';
        height:0;
        clear:both;
      }
    
    }
    
    .container{
        @include clearfix;    
    }
    
    .tab{
        @include clearfix;
    }
    

    这个时候,在编译之后的css文件里面,clearfix这段代码其实是重复写了很多次,以下面的编写方式才是对的

    @mixin clearfix{
    
      &:before,&:after{
    
        display:block;
        content:'';
        height:0;
        clear:both;
      }
    }
    
    .container,.tab{
        @include clearfix;    
    }
    

    组件   

    sass编写组件时都是以[class='tab'],[name='tab'],[type='text'],[type='password']的方式来编写,也就是说,不能用ID或者name来编写。

    ID或者name一般是用来实例化插件或者供后台程序使用

  • 相关阅读:
    HTML DOM 事件
    js实现键盘数字输入
    js实现键盘数字输入
    onbeforeunload事件兼容性操作
    onbeforeunload事件兼容性操作
    window.event对象详尽解析
    git简单使用教程
    PHP中奖概率写法
    PHP替代session的方法
    nginx实现负载均衡
  • 原文地址:https://www.cnblogs.com/MonaSong/p/5421012.html
Copyright © 2011-2022 走看看