Category Archives: 前端技术

常用的 Sass mixins

Mixin 是 Sass 中用来方便地复用代码的方法,你可以简单点理解成函数,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值,返回的是一组 CSS 属性或代码。

Clearfix

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.container {
     @include clearfix;
}

圆角边框

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

跨浏览器的透明度设置

这个mixin可以可以制作出兼容 Internet Explorer 5 的跨浏览器透明度效果。

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

.faded-text {
    @include opacity(0.8);
}

文本溢出省略显示

@mixin text-ellipsis () {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

多行文本溢出省略显示

支持 WebKit浏览器或移动端的页面

@mixin text-ellipsis () {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

  1. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  2. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  3. text-overflow: ellipsis; 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

使用rem设置字体尺寸并使用像素进行回退

remem 类似,都是一种CSS测量单位,但是它不是相对于父元素的尺寸,而是相对于HTML文档的根元素设置元素的尺寸大小。

由于rem在设置元素尺寸的时候是相对于HTML根元素的尺寸,而不是他的父元素的设置,因此在使用上不会发生混乱的情况。但是由于在IE8及以下版本的IE浏览器中不支持rem属性,因此我们必须在这些浏览器中使用像素为单位来创建回退代码。

@function calculateRem($size) {
    $remSize: $size / 16px;
    @return $remSize * 1rem;
}

@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

p {
    @include font-size(14px)
}

输出结果

p {
    font-size: 14px; //如果浏览器不支持rem将使用这个规则进行覆盖
    font-size: 0.8rem;
}

Retina 背景图片

@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
     background: url($image + '.' + $extension) $repeat $position;

     @media 
     screen and (-webkit-min-device-pixel-ratio: 2),
     screen and (   min--moz-device-pixel-ratio: 2),
     screen and (   -moz-min-device-pixel-ratio: 2),
     screen and (     -o-min-device-pixel-ratio: 2/1),
     screen and (        min-device-pixel-ratio: 2),
     screen and (             min-resolution: 192dpi), 
     screen and (             min-resolution: 2dppx) {    
        background: url($image + '@2x' + '.' + $extension) $repeat $position;
        background-size: $width $height;
     }
}

.bg-image {
    @include imgRetina(images/waterlily, jpg, 200px, 200px, no-repeat, center);
    height: 200px;
    width: 200px;
}

输出结果

.bg-image {
    background: url(images/waterlily.jpg) center no-repeat;
    height: 200px;
    width: 200px;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
    .bg-image {
        background: url(images/waterlily@2x.jpg) center no-repeat;
        background-size: 200px 200px;
    }
}

如何使用 Mixin

在 Sass 中,@include 代表这调用定义好的 @mixin。在调用的时候如果mixin没有参数,可以省略mixin之后的括号,如下:

@mixin size () {
    width: 100px;
    height: 100px;
}

.foo {
    @include size();
}

.bar {
    @include size;
}

/******** 输出 ********/

.foo {
    width: 100px;
    height: 100px;
}

.bar {
    width: 100px;
    height: 100px;
}

使用 CSS 和 jQuery 制作文字马赛克效果

需求

一段文本中,给指定的文字打上马赛克,然后付费阅读

解决方法

方法一:使用 CSS 模糊文字

span.mosaic {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

上面的代码使class为mosaic的中的文字变得透明,只保留文字的text-shadow,从而模拟出一种文字模糊的效果。你可以通过text-shadow属性的第三个参数来调整文字模糊的效果。

效果:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

增加 IE 支持

span.mosaic {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
    zoom: 1;
}

这种办法是以模糊文字来达到马赛克效果,但是有时客户会要求用其它图片或者符号来替换被打了马赛克的文字,这种办法就无法满足了。

方法二:使用图片马赛克遮罩文字

效果一

因为直接接给标签samp加上图片遮罩层,在原本文字换行的情况下,会直接显示在下一行,破坏原本的结构。

效果二

在效果一基础上,为了不破坏原本的结构。需要将一段文字拆分成单个文字,然后使用标签span包裹,最后使用 span::before 给每个文字增加一个图片遮罩层。

效果:

See the Pen 文字马赛克 by spaling (@spaling) on CodePen.


移动端三级联动城市选择控件

一、简介

纯原生js的移动端城市选择插件,不依赖任何库

二、用法

在html页面中引入input标签,写法如下:

<input id="demo1" type="text" readonly="" placeholder="城市选择特效"  value="广东省,深圳市,南山区"/>

将样式文件引入到页面中:

<link rel="stylesheet" href="css/LArea.css">

同时引入js文件到页面中:

<script src="js/LArea.js"></script>

引入城市数据:

<script src="js/LAreaData1.js"></script>

初始化插件:

var area = new LArea();
area.init({
    'trigger': '#demo1',//触发选择控件的文本框,同时选择完毕后name属性输出到该位置
    'valueTo':'#value1',//选择完毕后id属性输出到该位置
    'keys':{id:'id',name:'name'},//绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
    'type':1,//数据源类型
    'data':LAreaData//数据源
});

效果图:

html-address-select

插件来源:

Github

DEMO:
移动端三级联动城市选择控件

最好使用移动端访问,扫描下方二维码

1479466560

SublimeText 中使用正则表达式替换herf链接

在经手其他团队开发的项目时,会发现有些herf链接错误的问题,数量过多的herf链接错误可以在SublimeText中使用正则表达式进行替换。

打开SublimeText中的搜索替换工具,勾选中正则表达式的选项,使用 href=”([^”]*)” 查找带有herf的元素,并使用#替换即可。如果替换的不完全,可以使用 href=”([^”]+\?[^”]+)” 查找跟完全的链接字符。