对LESS的自我理解 和一些简单的LESS封装
2014-06-03 17:15
309 查看
LESS的基本使用
1.首先我们要把LESS环境搭建好。
2.然后创建LESS文件
3.现在我们可以开始写LESS文件了
例如：
我们一般写HTML文件的时候格式都是这样的
<body>
<div id="wrap">
<div class="head"></div>
<div class="main"></div>
<div class="foot"></div>
</div>
</body>
这样形成一个包含的关系，易于查找和区别。
那CSS文件是怎么写的呢
#wrap{}
#wrap head{}
#wrap main{}
#wrap foot{}
那我们LESS文件是怎么写的呢
#wrap{
.head{}
.main{}
.foot{}
}
这样咋一看 也很清楚，没什么问题，2者之间区别也不大，但是假如里面包含更多呢。例如我们要在头部写个导航呢.
<div class="head">
<ul>
<li>
<span>
<a></a>
<b></b>
</span>
<li>
</ul>
</div>
如果是这样的结构呢，那标签A和B的属性该怎么写呢。。。
css的写法是这样的
#wrap .head ul li span a{}
#wrap .head ul li span b{}
而我们的LESS又是怎么写的呢
#wrap{
.head{
ul{
li{
span{
a{}
b{}
}
}
}
}
}
大家是不是觉得这样写有点眼熟 是不是和HTML结构一样呢。这样就方便大家一目了然的理清结构，而且也不需要总是重复。
好了，大家现在对LESS的结构写法有一定的认识的吧 那我们下面进一步讲解，为什么他能提高我们的编写效率的
1.可自定义变量
既然是变量，那我们怎么定义呢。比如：
我们定义一个变量 a ,肯定有的人会说VAR A； 那在LESS怎么定义呢。那我们看个例子：
正常情况下我们要是给字体定义一个颜色都是这样写的
#wrap{
color:#fff;
}
但是我们定义变量后就是这样实现的
@a:#fff;
#wrap{
color:@a;
}
大家觉得这没什么的，都不是一个样吗。
好如果是多个地方都是用这个颜色呢
#wrap{
.head{
color:Red;
}
.main{
color:Red;
}
.foot{
color:Red;
}
}
我们需要这3个部位第一开始是红色的，突然需求说该风格 要求把这些颜色都改成蓝色，那我们是不是就要把这3个地方都要该一遍呢。
而我们的LESS只需要该下这个变量就可以了；
@a:red;
#wrap{
.head{
color:@a;
}
.main{
color:@a;
}
.foot{
color:@a;
}
}
我们该成蓝色风格的时候，只需要这样，就全部变成蓝色了。
@a:blue;
#wrap{
.head{
color:@a;
}
.main{
color:@a;
}
.foot{
color:@a;
}
}
2.自定义函数
好，有的人又说了，我想写个border 他不是有3个属性吗。
@border:1px solid red;
这样我们就定义了一个变量，但是有的人问了，可不可以修改其中1个或者2个呢。这就要蒋LESS的另外一个自定义函数了
.border(@a,@b,@c){
border:@a @b @c;
}
#wrap{
.border(1px,solid,red);
}
这样我们就可以随便修改了，大家就说了，这样写也没看出有什么不方便啊。那我们在举个更能让大家易懂的列子把。
随着CSS3的发展，各大浏览器都有自己的内核，写法都会有所差别，这就要求我们兼容的时候 都要考虑到，这就让我们一个属性要重复的写上3-4遍，修改的时候也是这样。这样就体现出LESS的优势了。
现在举个列子比如：
现在圆角属性大家都知道把，既方便，又好用。但是问题也来了。
#wrap{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
这样我们就定义了一个圆角出来了。
但是我想把圆角该成10px呢？这样我们就要该4个位置。。是不是觉得很麻烦。而LESS可以这样
.border-radius（@radius）{
border-radius:@radius;
-moz-border-radius: 5px;
-webkit-border-radius: @radius;
-o-border-radius: @radius;
}
#wrap{
.border-radius{10px};
}
这样不是变得简单了呢。是不是对LESS很期待。
在这里我分享下在网上找到的大部分定义的函数，都是平常大家经常用到的属性。
1.透明度
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
#wrap{
.opacity(0.5) ;
}
兼容IE8和现代浏览器
2.清楚浮动
.clearfix() {
zoom: 1;//为了兼容IE6,7。假如不需要可以不写。
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
#wrap{
.clearfix() ;
}
3.（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
.tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#wrap{
.tab-focus()；
}
4. 定义块状结构的宽高
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
#wrap{
.size(100px; 200px)
}
#wrap{
.square(100px;)
}
5.文本溢出包含元素时时候隐藏
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#wrap{
.text-overflow()
}
6.绘制上下，左右4个半圆。和圆
6.1上
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
6.2右
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
6.3下
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
6.4作
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
6.5 圆
.border-radius（@radius）{
border-radius:@radius;
-moz-border-radius: 5px;
-webkit-border-radius: @radius;
-o-border-radius: @radius;
}
7.实现输入字体无效，只会显示背景
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
.hide-text();
}
#wrap{
.hide-text()
}
8.盒子阴影
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
box-shadow: @shadow;
}
#wrap{
.box-shadow(5px 5px 5px gray);
}
9.动画效果
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
10.animate动画
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
11.盒子大小
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
附带属性：
content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。
12.用户不能选择元素中的任何内容
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
user-select: @select;
}
附带属性：
auto——默认值，用户可以选中元素中的内容
none——用户不能选择元素中的任何内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
13.拖动调整尺寸大小
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
附带属性：
none-不能拖放
both-任意拖放
horizontal-水平拖放
vertical-垂直拖放
14.分栏效果
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
}
附带属性：
-webkit-column-count:num;/*分栏数量。*/
-webkit-column-width:length;/*每一栏的宽度，不设置的时候按默认宽度*/
-webkit-column-gap:length;/*相邻两栏之间的间距，包括中间rule的宽度*/
-webkit-column-rule:1px red solid;/*这里的设置和border一样，表示栏与栏之间的分割线的样式*/
根据这四个属性，我们就可以做出大部分的分栏效果。
15.滤镜被禁止
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
当你需要删除一个梯度背景,不要忘记使用这个重置/ /下面的IE过滤IE9。
16.响应式图片
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
#wrap{
.img-retina('../title_bg.jpg';'../title_bg.jpg'; 15px; 16px);
}
17.保持图像缩放不超过父容器大小
.img-responsive(@display: block) {
display: @display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
希望对大家有所帮助
1.首先我们要把LESS环境搭建好。
2.然后创建LESS文件
3.现在我们可以开始写LESS文件了
例如：
我们一般写HTML文件的时候格式都是这样的
<body>
<div id="wrap">
<div class="head"></div>
<div class="main"></div>
<div class="foot"></div>
</div>
</body>
这样形成一个包含的关系，易于查找和区别。
那CSS文件是怎么写的呢
#wrap{}
#wrap head{}
#wrap main{}
#wrap foot{}
那我们LESS文件是怎么写的呢
#wrap{
.head{}
.main{}
.foot{}
}
这样咋一看 也很清楚，没什么问题，2者之间区别也不大，但是假如里面包含更多呢。例如我们要在头部写个导航呢.
<div class="head">
<ul>
<li>
<span>
<a></a>
<b></b>
</span>
<li>
</ul>
</div>
如果是这样的结构呢，那标签A和B的属性该怎么写呢。。。
css的写法是这样的
#wrap .head ul li span a{}
#wrap .head ul li span b{}
而我们的LESS又是怎么写的呢
#wrap{
.head{
ul{
li{
span{
a{}
b{}
}
}
}
}
}
大家是不是觉得这样写有点眼熟 是不是和HTML结构一样呢。这样就方便大家一目了然的理清结构，而且也不需要总是重复。
好了，大家现在对LESS的结构写法有一定的认识的吧 那我们下面进一步讲解，为什么他能提高我们的编写效率的
1.可自定义变量
既然是变量，那我们怎么定义呢。比如：
我们定义一个变量 a ,肯定有的人会说VAR A； 那在LESS怎么定义呢。那我们看个例子：
正常情况下我们要是给字体定义一个颜色都是这样写的
#wrap{
color:#fff;
}
但是我们定义变量后就是这样实现的
@a:#fff;
#wrap{
color:@a;
}
大家觉得这没什么的，都不是一个样吗。
好如果是多个地方都是用这个颜色呢
#wrap{
.head{
color:Red;
}
.main{
color:Red;
}
.foot{
color:Red;
}
}
我们需要这3个部位第一开始是红色的，突然需求说该风格 要求把这些颜色都改成蓝色，那我们是不是就要把这3个地方都要该一遍呢。
而我们的LESS只需要该下这个变量就可以了；
@a:red;
#wrap{
.head{
color:@a;
}
.main{
color:@a;
}
.foot{
color:@a;
}
}
我们该成蓝色风格的时候，只需要这样，就全部变成蓝色了。
@a:blue;
#wrap{
.head{
color:@a;
}
.main{
color:@a;
}
.foot{
color:@a;
}
}
2.自定义函数
好，有的人又说了，我想写个border 他不是有3个属性吗。
@border:1px solid red;
这样我们就定义了一个变量，但是有的人问了，可不可以修改其中1个或者2个呢。这就要蒋LESS的另外一个自定义函数了
.border(@a,@b,@c){
border:@a @b @c;
}
#wrap{
.border(1px,solid,red);
}
这样我们就可以随便修改了，大家就说了，这样写也没看出有什么不方便啊。那我们在举个更能让大家易懂的列子把。
随着CSS3的发展，各大浏览器都有自己的内核，写法都会有所差别，这就要求我们兼容的时候 都要考虑到，这就让我们一个属性要重复的写上3-4遍，修改的时候也是这样。这样就体现出LESS的优势了。
现在举个列子比如：
现在圆角属性大家都知道把，既方便，又好用。但是问题也来了。
#wrap{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
这样我们就定义了一个圆角出来了。
但是我想把圆角该成10px呢？这样我们就要该4个位置。。是不是觉得很麻烦。而LESS可以这样
.border-radius（@radius）{
border-radius:@radius;
-moz-border-radius: 5px;
-webkit-border-radius: @radius;
-o-border-radius: @radius;
}
#wrap{
.border-radius{10px};
}
这样不是变得简单了呢。是不是对LESS很期待。
在这里我分享下在网上找到的大部分定义的函数，都是平常大家经常用到的属性。
1.透明度
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
#wrap{
.opacity(0.5) ;
}
兼容IE8和现代浏览器
2.清楚浮动
.clearfix() {
zoom: 1;//为了兼容IE6,7。假如不需要可以不写。
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
#wrap{
.clearfix() ;
}
3.（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
.tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#wrap{
.tab-focus()；
}
4. 定义块状结构的宽高
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
#wrap{
.size(100px; 200px)
}
#wrap{
.square(100px;)
}
5.文本溢出包含元素时时候隐藏
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#wrap{
.text-overflow()
}
6.绘制上下，左右4个半圆。和圆
6.1上
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
6.2右
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
6.3下
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
6.4作
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
6.5 圆
.border-radius（@radius）{
border-radius:@radius;
-moz-border-radius: 5px;
-webkit-border-radius: @radius;
-o-border-radius: @radius;
}
7.实现输入字体无效，只会显示背景
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
.hide-text();
}
#wrap{
.hide-text()
}
8.盒子阴影
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
box-shadow: @shadow;
}
#wrap{
.box-shadow(5px 5px 5px gray);
}
9.动画效果
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
10.animate动画
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
11.盒子大小
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
附带属性：
content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。
12.用户不能选择元素中的任何内容
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
user-select: @select;
}
附带属性：
auto——默认值，用户可以选中元素中的内容
none——用户不能选择元素中的任何内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
13.拖动调整尺寸大小
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
附带属性：
none-不能拖放
both-任意拖放
horizontal-水平拖放
vertical-垂直拖放
14.分栏效果
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
}
附带属性：
-webkit-column-count:num;/*分栏数量。*/
-webkit-column-width:length;/*每一栏的宽度，不设置的时候按默认宽度*/
-webkit-column-gap:length;/*相邻两栏之间的间距，包括中间rule的宽度*/
-webkit-column-rule:1px red solid;/*这里的设置和border一样，表示栏与栏之间的分割线的样式*/
根据这四个属性，我们就可以做出大部分的分栏效果。
15.滤镜被禁止
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
当你需要删除一个梯度背景,不要忘记使用这个重置/ /下面的IE过滤IE9。
16.响应式图片
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
#wrap{
.img-retina('../title_bg.jpg';'../title_bg.jpg'; 15px; 16px);
}
17.保持图像缩放不超过父容器大小
.img-responsive(@display: block) {
display: @display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
希望对大家有所帮助
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Recyclerview的一些个人理解与使用（一）adapter的简单封装
- 一致性哈希算法简介：简单的自我理解 与 一些摘抄的资料
- php简单封装了一些常用JS操作
- 一个mongodb的helper，封装了一些简单常用的功能
- 一个简单的数据库操作类、封装了一些简单的操作
- 关于范式的一些简单理解
- 迭代器就是重复地做一些事情，可以简单的理解为循环，在python中实现了__iter__方法的对象是可迭代的，实现了next()方法的对象是迭代器，这样说起来有
- js中用数组对一些验证进行简单的封装
- UML图的一些自我理解
- 存储过程的一些简单理解
- 如何简单的下载一些小文件并保存在一个路径中（有些方法进行了封装）
- php类的封装、继承和多态的简单理解
- 从零开始把一些简单的不易理解的记录下来。
- linux 中的execl的一些简单的理解
- 《php---ajax简单示例---jquery内部运行原理》---jquery只是就ajax的一些功能进行了封装
- 对于TCP协议中IOCP模型的一些简单的理解
- 关于封装，继承，多态三个概念的简单理解
- 【php】对PHPExcel一些简单的理解
- java中八种基本数据类型以及它们的封装类，String类型的一些理解
- 对数据类型封装和数据抽象的简单理解