1、setting

  如果不需要支持ie6,7,请在引入setting文件之前,设置$lte7:false;

  $lte7: true !default  表示的是是否兼容it6/7

2、css3 是一些兼容性质的问题

  @include border-image(url(img.png) 3 round);

  @include box-shadow(0 0 5px rgba(11,22,33));

  @include display-flex; flex-direction ; 等设置在父容器上面

  @include flex(2);设置在子元素上面的

3、media是一些响应式布局的判断,对手机等兼容较好

4、mixin

  @extend是联合声明的  @include是直接在选择器内生声明的

  

  1. // px转em
    @function pxToEm($px, $base: 16) {
    @return ($px / $base) * 1em;
    }
    // px转rem
    @function pxToRem($px, $base: 40) {
    @return ($px / $base) * 1rem;
    }
  2.  
  3. // font-size自适应
    @mixin font-dpr($font-size){
    font-size: $font-size /2;
    [data-dpr="2"] & {
    font-size: $font-size;
    }
    [data-dpr="3"] & {
    font-size: $font-size /2 * 3;
    }
    }
  4.  
  5. @mixin px2px($name,$font-size){
    #{$name}: $font-size;
    [data-dpr="2"] & {
    #{$name}: $font-size * 2;
    }
    [data-dpr="3"] & {
    #{$name}: $font-size * 3;
    }
    }
  • @mixin通过@include来调用;
  • %通过@extend来调用;
  • @function则是返回一个值。

  

sasscore22的更多相关文章

随机推荐

  1. mybatis实战教程(mybatis in action)之六:与Spring MVC 的集成

    前面几篇文章已经讲到了mybatis与spring 的集成.但这个时候,所有的工程还不是web工程,虽然我一直是创建的web 工程.今天将直接用mybatis与Spring mvc 的方式集成起来,源 ...

  2. Bootstrap,Font Awesome等组件中 .woff字体报404错的解决办法

    参考资料:http://www.zhidao91.com/glyphicons-halflings-regular-woff-404-not-found/ http://shiyousan.com/p ...

  3. U-boot的目录结构及spl功能

    转 http://tieba.baidu.com/p/2836672721 对uboot-2010.06及其以后的版本,将体系结构相关的内容合并,增加include文件夹,分离出通用库文件lib,其各 ...

  4. 利用SQL 建立和删除 LINKED SERVER

    USE IS21_xxx; if object_id('tempdb..#tmp') is not null drop table #tmp create table #tmp ( cntr ), i ...

  5. Gradle脚本基础全攻略

    http://blog.csdn.net/yanbober/article/details/49314255

  6. PHP取整函数:ceil,floor,round,intval的区别详细解析

    floor -- 舍去法取整说明float floor ( float value ) 返回不大于 value 的下一个整数,将 value 的小数部分舍去取整.floor() 返回的类型仍然是 fl ...

  7. 更改yum源地址

    1.进入yum配置文件目录:cd /etc/yum.repos.d/ 2.备份配置文件:mv CentOS-Base.repo CentOS-Base.repo.bak 3.下载网易的配置,改成网易的 ...

  8. Django RedirectView

    RedirectView作用是重定向一个指定,给定的Url.这个给定的Url可能包含有字典风格的字符串,因为关键字(词)会被改变,所以从这个Url中捕获的参数可能也会被修改,例如,Url中的“%”应该 ...

  9. C++设计模式-Flyweight享元模式

    Flyweight享元模式 作用:运用共享技术有效地支持大量细粒度的对象. 内部状态intrinsic和外部状态extrinsic: 1)Flyweight模式中,最重要的是将对象分解成intrins ...

  10. 剑指Offer:面试题29——数组中出现次数超过一半的数字(java实现)

    PS:在前几天的面试中,被问到了这个题.然而当时只能用最低效的方法来解. 问题描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2, ...