标签:lin 简洁 根据 scss .com translate 前缀 color 尺寸
以$开头的变量,类似于php中变量的概念
$dark = #000; a {color: $dark;} // a {color: #000}
嵌套是对css花括号语法的扩展,使得写css就像写dom一样层级分明。
ul {max-width: 1200px;margin: 0 auto; li {float: left; padding: 5px 15px;} } //等同于 ul {max-width: 1200px;margin: 0 auto;} ul li {float: left; padding: 5px 15px;}
就是一个代码作用域 主要是用来封装那些常用的代码块,compass就包含了很多我们常用的@mixin
//语法 @mixin $name { //代码片段 } .class {@include $name;} //实例 @mixin clearfix { &:before,&:after { content:"";display:table; line-height: 0;*zoom: 1;} &:after {clear: both;} } //引用 .clearfix {@include clearfix;} //这样就能引用清除浮动的代码块了
@extend 继承
这个更加好理解,就是将当前选择器添加到继承的选择器那里
ul.nav {@extend .clearfix;} //生成的代码 ul.nav,.cliearfix { //代码片段 }
为什么要用compass呢?
大量的@mixin 这个真的很好用,特别是那些需要些浏览器前缀去hack的样式,真的是大大节约了不少时间呢!!!!
//下面是三个@mixin 是我项目中经常用到的,下面有对应编译生成的css @include transition(color,0.3s,ease-in); -moz-transition: color, 0.3s, ease-in; -o-transition: color, 0.3s, ease-in; -webkit-transition: color, 0.3s, ease-in; transition: color, 0.3s, ease-in; @include translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); @include opacity(0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; //兼容了IE
这个真的很好用,很好用,很好用,很好用!!!!!
不要看只有三步,这里面的每一步都是相当耗时间的呐!!!
使用图片精灵有下面多种方法,下面以icons这个图片精灵文件夹为例,下面示例代码中使用到的icons 均是指图片精灵文件夹名字
@import "icons/*.png"; @include all-icons-sprites; //生成 //生成的图片精灵的class name 都是以“图片文件夹-图片名”的方式命名,并且有一个主要的class name "图片文件夹-sprite" .icons-sprite, .icons-msg, .icons-qq, .icons-qq2, .icons-tell, .icons-weibo, .icons-weibo2, .icons-weixin, .icons-weixin2 { background-image: url(‘img/icons-s980cae6d97.png‘); background-repeat: no-repeat; } .icons-msg { background-position: 0 0; } .icons-qq { background-position: 0 -21px; } .icons-qq2 { background-position: 0 -68px; } .icons-tell { background-position: 0 -115px; } .icons-weibo { background-position: 0 -138px; } .icons-weibo2 { background-position: 0 -185px; } .icons-weixin { background-position: 0 -232px; } .icons-weixin2 { background-position: 0 -279px; }
$icons-sprite-dimensions:true;
@import "icons/*.png"; .img { .qq{@include icons-sprite(qq);} .weibo{@include icons-sprite(weibo);} } //生成
//如果仅仅调用@import "icons/*.png" ,是不会生成任何代码的,调用了icons-sprite 才会生成代码,相对第一种方法,比较简洁
.icons-sprite, .img .qq, .img .weibo { background-image: url(‘img/icons-s980cae6d97.png‘); background-repeat: no-repeat; }
.img .qq { background-position: 0 -21px; height: 47px; width: 47px; }
.img .weibo { background-position: 0 -138px; height: 47px; width: 47px; }
$sprite-icon: sprite-map("icons/*.png", $spacing: 5px, $layout: smart,$sort-by: ‘!width‘,$position:10px,$repeat:no-repeat); @mixin radio2-sprite($sprite-btn,$name) { //获取当前图标的图片名字 $imgurl: sprite-file($sprite-btn, $name); //获取当前图标的位置 $pos: sprite-position($sprite-btn, $name); //根据名字获取获取长度和宽度,并设置 width: image-width($imgurl) / 2; height: image-height($imgurl) / 2; //设置图标的位置 background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; //使用compass的Css3模块 兼容处理背景图片大小 @include background-size(ceil(image-width(sprite-path($sprite-btn)) / 2) auto); } //引用 .icon {background-image: sprite-url($sprite-icon);} .qq {@include radio2-sprite($sprite-icon,qq)}
//生成
// 可以与上面生成的css对比,尺寸的确是缩小了一般,哈哈^^
.icon { background-image: url(‘img/icons-s13e30d3d8d.png‘); }
.qq { width: 23.5px; height: 23.5px; background-position: 0 -69px; -moz-background-size: 24px auto; -o-background-size: 24px auto; -webkit-background-size: 24px auto; background-size: 24px auto; }
//配置间距 $icons-spacing: 5px; //配置重复性 $icons-repeat: no-repeat; //配置尺寸 $icons-sprite-dimensions:true;
结语: 好啦以上总结是我使用compass的一点小小经验,欢迎沟通交流
标签:lin 简洁 根据 scss .com translate 前缀 color 尺寸
原文地址:http://www.cnblogs.com/djh-create/p/6808839.html