标签：
Materliu 在慕课的视频: http://www.imooc.com/learn/364 、 http://www.imooc.com/wiki/371
sass入门:http://www.w3cplus.com/sassguide/
个人先看了 《Sass与Compass实战》（Materliu 是中文翻译之一）后看的视频，看书的时候不是很了解看了视频之后又看了一遍书终于少许了解sass了
下面是我个人对《Sass与Compass实战》这本书学习笔记总结，有些是个人极端自我理解少许和API解释不同
安装的步骤就不总结了
目前个人觉得也就用到这几个 当然也是书里写
compass create 项目名 创建 compass项目
compass h compass的帮助命令
compass init 为项目添加 compass
compass watch 实时编译
compass compile 生成样式表
{
gem install css_parser 安装
compass stats 查看生成的文件大小
}
可以用图形界面的编译工具 koala 不用命令行了
config.rb 配置文件：
http_path = "/" 路径
css_dir = "stylesheets" 样式
sass_dir = "sass" 存放scss文件夹
images_dir = "images" 存放图片文件夹
javascripts_dir = "javascripts" 存放JS文件夹
output_style = :compact 生成CSS格式 有压缩、{}不同方式
relative_assets = false 是否是相对路径
line_comments = false 生成CSS里清楚对应scss行数
注释：
// 仅scss 文件内看;
/**/ 除未压缩外能看;
/*! !*/ 都能看 压缩也能看;
注释中有会有中文编译问题 在文件第一行 @charset "utf-8";
@debug $style; 打印日志
@error 错误提示信息
@import "compass/reset" 引入默认样式 个人认为这个默认样式没啥用
@at-root 在嵌套里标记用的 生成出来css是独立的
@extend 是继承 不能 .a .b的继承
% 提取公共的样式，同时不编译 简称 提取公因式且不编译
$ 开头定义变量名 是个全局变量 在{ $name } 局部变量
&代表父级 a{ &:hover{} } a{} a:hover{}
.a{ .b,.c,.d{} } .a .b,.a .c,.a ,d{} 群组
.a,.b{ a{}} .a a,.b a{} 群组
.a{ border : { style:solid;width:1px;color:#ccc } } 属性嵌套 ‘:’ 必写
_aa.scss 一般为 局部文件 其实 @import 引入的时候 _可以不写
$aa:10 !default !default设置默认值
@mixin 混合器 @include 调用
布尔值 and(与)\or(或)\not(非)
comparable($numver-1,$numver-2) 判断是否能相加 返回 布尔值 true/false
unit($numver) 判断 $numver 的单位
unitless($numver) 判断数值是否有单位 返回布尔值 没有单位是 true 反之 false
type-of($value) 返回类型 类似于js typeof
@function @return 必须要有返回值
#{...} 插值
@for $i from 1 to 5 \ @for $i from 1 through 5 前者是到4不到5 后者循环到5
@for $i from $strat through $end 开始结束如果是 strat 大就从小到大 反之亦然
@if 判断条件{}@else{} 判断
@include a($a:10,$b:20) 可以传类似于json的值
@include link-colors( #333,#666,#999,#f00 ); 设置 a:visited a:focus a:hover a:active 颜色
@include link-colors(#333,#00f); 设置默认没有线 hover 有线 还有文字颜色
@include ellipsis 文字超出....
@include nowrap 防止折行
@include clearfix;清浮动
compass css3 个人感觉就这最实用
@import “compass/css3”;
@include border-radius(5px);
关闭某一项浏览器的 厂商前缀
$experimental-support-for-opera:false
$experimental-support-for-microsoft:false
$experimental-support-for-khtml:false
图片精灵 仅支持PNG格式
@import “compass/utilities/sprites”;
@import "icons/*.png" 图片的目录名
@include all-icons-sprites; 生成所有的精灵class ‘icons‘为目录名 生成的class名为 .目录名+图片名 .icos-ico1
<map>就是ico的目录名字
background-image:inline-image(‘../images/a.png‘); 生成base-64位的 data:images/gif;base64xxxxxxx=
$<map>-layout:vertical(垂直)、horizontal(水平)、diagonal(对角线)、smart(智能)
$icons-layout:smart $icons目录名 生成的图片是四种中的哪一种 生成到原本小图标icons目录的上一级目录 命名为 小图标目录 icons-乱码.png
$<map>-spacing:0px $icons-spacing:5px; 设置精灵图片间距 （ smart模式 不能设置图片间距 ）
$<map>-<sprite>-spacing:0px; $icons-arrow-spacing:12px; sprite其实就是你想单独间距ico的名
$<map>-sprite-width($name)、$<map>-sprite-height($name) 获取制定ico的宽高
$<map>-sprite-dimensions:true/false; 将每张ico图片设置宽高
$<map>-sprite-base-class:‘.aa‘ 更改默认文件夹icons 前缀的classname
$disable-magic-sprie-selectors：true/false; 默认开启 是通过图片名 a_hover.png 图片生成伪选择器 a{ background-position:0 0 } a:hover{background-position:10px 10px}
个人觉得有用的 图片精灵自定义：
sprite-map($glob,...) 生成图片的url复制给变量，同时可以设置一些配置参数
$icons:sprite-map("icons/*.png",$layout:vertical,$arrow-spacing:5px) 定义图片的变量名
sprite($map,$sprite,[$offset-x],[$offset-y]); 生成自定义的图片
sprite-position($map,$sprite,[$offset-x],[$offset-y]) 设置backgournd-positon：x y 位置
backgurnd:sprite-position($icons,arrow); 设置backgournd-positon：x y 位置
sprite-background-position($map,$sprite,[$offset-x],[$offset-y]); 设置backgournd-positon：x y 位置
@include sprite-background-position($icons,arrow); 返回的精灵的x y 位置
@include sprite-dimensions($icons,arrow) 返回的精灵的宽高
例子：
$icons:sprite-map("icons/*.png");
.sprite-base{background:$icons no-repeat;}
.next{
@extend .sprite-base;
@include sprite-backgournd-position($icons,arrow);
@include sprite-dimensions($icons,arrow);
}
写完发现 越来越来越像书的压缩版和 API 了还不如人家做的.....
做了一个小小DEMO
上图：
整个文件目录截图：
images 截图:
生成ico的 icons里的截图:
sass截图
stylesheets截图
html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>厘米IT学院 </title> <link rel="stylesheet" type="text/css" href="stylesheets/itlimi.css" /> </head> <body> <!-- 头部 导航 start --> <div class="content"> <div class="nav-top"> <div class="log"><a href="#"></a></div> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">培训课程</a></li> <li><a href="#">优秀学员</a></li> <li><a href="#">课程疑问</a></li> <li><a href="#">职业生涯</a></li> <li><a href="#">学员社区</a></li> <li><a href="#">官方博客</a></li> <li><a href="#">学院地址</a></li> </ul> </div> <!-- 头部 导航 end --> <!-- 广告 start --> <div class="adve"> <img src="images/bannerImg.jpg" alt=""> </div> <!-- 广告 end --> <!-- 主体 start --> <div class="box-main"> <!-- right start --> <div class="box-right"> <dl class="dl-list"> <dt> 职业生涯 </dt> <dd> <span> </span> <a href="#"> Web前端开发工程师需要掌握哪些核心技能？ </a> </dd> <dd> <span> </span> <a href="#"> 我是程序员，有必要进行web前端开发的学习吗? </a> </dd> <dd> <span> </span> <a href="#"> 我是网站美工，目前发展遇到瓶颈，该如何解决？ </a> </dd> <dd> <span> </span> <a href="#"> 我适合从事web前端开发行业吗？ </a> </dd> <dd> <span> </span> <a href="#"> Web前端工程师如何给自己定位？ </a> </dd> <dd> <span> </span> <a href="#"> Web前端开发工程师好找工作吗？ </a> </dd> </dl> <dl class="dl-list"> <dt> 好职推荐 </dt> <dd> <span> </span> <a href="#"> 盛大网络--前端开发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 阿里巴巴--前端开发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 金山软件--KIS-WEB前端页面工程师 </a> </dd> <dd> <span> </span> <a href="#"> 360京东商城 -- Web前端开发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 阿里巴巴 - 技术部 - Web前端开发工程师（高 </a> </dd> <dd> <span> </span> <a href="#"> 人人网 - 技术部 - 3G前端工程师 </a> </dd> <dd> <span> </span> <a href="#"> 人人网 - 技术部 - Web前端开发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 搜狐 - 媒体技术产品中心 - JavaScript前端 </a> </dd> <dd> <span> </span> <a href="#"> 新浪 - 运营部 - Web前端开发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 新浪 - 无线部 - Web前端开发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 新浪 - 技术部 - Web前端开发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 新浪 - 产品部 - JavaScript前端工程师 </a> </dd> <dd> <span> </span> <a href="#"> 百度 - Web前端研发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 百度 - 商务搜索 - Web前端研发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 百度 - 社会化网络事业部 - JavaScript前端 </a> </dd> <dd> <span> </span> <a href="#"> 百度 - 搜索研发部 - web前端研发工程师 </a> </dd> <dd> <span> </span> <a href="#"> 百度 - 系统部 - WEB前端开发工程师 </a> </dd> </dl> </div> <!-- right end --> <!-- left start --> <div class="box-left"> <div class="min-adve"> <img src="images/articleBanner.jpg" alt=""> </div> <h2 class="tit">Web前端开发工程师好找工作吗？</h2> <div class="txt-info"> 据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。 随着Web2.0的大潮席卷而来，2010年互联网发展速度空前，互联网向标准化、专业化、精细化方向发展，导致Web开发职位进一步细分，Web 前端开发工程师、Web页面重构师等这些高薪职业相继诞生。如今流行的浏览器有十几种，不同的浏览器对页面的解析不同，导致相同的页面在不同的浏览器内显示效果不同，不能兼容多种浏览器，用户体验降低，搜索引擎抓取率低，加载速度慢等影响页面整体质量的因素产生，所以对页面制作要求越来越高，致使许多公司急需提供制作标准页面服务的技术人员。 现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站，和主流的Web2.0网站，均采用xHTML(DIV)＋CSS的框架模式，更加印证了xHTML(DIV)＋CSS是大势所趋。 正因为如此Web前端开发人员成为市场上紧缺的人才，同时也成为一个新兴的高薪职业。 </div> </div> <!-- left end --> </div> <!-- 主体 end --> <!-- 尾部 start --> <div class="foot"> <p> <a href="#">关于W3CStudy</a> | <a href="#">广告服务</a> | <a href="#">提交问题</a> | <a href="#">联系我们</a> | <a href="#">版权声明</a> | <a href="#">关于隐私</a> | <a href="#">合作伙伴</a> </p> <p> 京ICP备10055601号 All rights(C)2008-2010 Reserved </p> </div> <!-- 尾部 end --> </div> </body> </html>
主要 itlimi.scss 样式
@charset "utf-8"; @import "compass/css3"; @import "tsass"; // 默认的样式库 @import "compass/utilities/sprites"; $icons-bgs: sprite-map("icons/*.png",$layout:vertical,$spacing:15px);//图片精灵路径 @include treset(); // tsass.scss 重置默认样式 @include font-sizes(12,24,px); // tsass.scss 生成初始字体12-24 @include init-Style(ml,margin-left,px,5,10); // tsass.scss 生成初始margin-left左外边距 5-15 .sprite-base{ background: $icons-bgs no-repeat; } //初始一些 颜色值 $gray:#393838; $gray2:#eaeaea; $red:#810000; $white:#fff; body{ background:url(../images/bodyBg.png) no-repeat 0 0;} .content{ width:1000px; margin:0 auto; @include border-radius(5px); } /* 导航条 */ .nav-top{ $hei:54px; margin :{ top:$hei; }; height:$hei; background-color:$gray; %top-public{ float:left; height:$hei; } .log{ width:220px; @extend %top-public; a{ display:block; @extend .sprite-base; background-position:sprite-position($icons-bgs,logo); @include sprite-dimensions($icons-bgs,logo); } } @at-root .nav{ li{ @extend %top-public; width:86px; line-height: $hei; text-align: center; } a{ display:block; font-size: 12px; color: #ccc; } a:hover{ color:$white; background: $icons-bgs no-repeat; background-position:sprite-position($icons-bgs,navActive); } } & a{ text-decoration: none; } } /* 广告 */ .adve{ height:292px; overflow:hidden; margin:10px 0; } .box-main{ background:$gray2; padding:10px; overflow:hidden; } .box-left{ width:660px; } .tit{ font-size: 22px; font-weight: bold; line-height: 66px; color:$red; } .txt-info{ text-indent:2em; font-size:14px; line-height: 24px; } .box-right{ float:right; width:300px; } .dl-list{ padding-bottom:10px; dt{ height:32px; line-height: 32px; padding-left:20px; color:$white; font-size: 14px; @extend .sprite-base; background-color:$red; background-position:sprite-position($icons-bgs,fries,7,6); margin-bottom:4px; } dd{ position:relative; line-height: 24px; font-size: 12px; padding-left:17px; span{ position:absolute; left:8px; top:12px; width:3px; height:3px; background-image:inline-image(‘../images/dot.png‘); } a{ text-decoration: none; color:#000; } } } /* 尾部 */ .foot{ background-color:$gray; margin-top:10px; padding:15px 0; font-size: 12px; color:$white; p{ text-align: center; line-height: 20px; a{ text-decoration: none; color:$white; } } }
应用 tsass.scss
@charset "utf-8"; @mixin treset(){ html {margin: 0; padding: 0; border: 0;} body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } ol, ul, li { list-style: none; } table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;} caption, th, td { text-align: left; font-weight: normal; } input,select{margin:0;padding:0} a:hover { text-decoration: underline; } img { border: none; } textarea{ resize:none;border:1px solid #ccc;} } //浮动 @mixin float($dir:left){ float:$dir; } //设置默认字体class @mixin font-sizes( $strat:0 , $end:100 ,$oUnit:px ){ @if( TestNum( $strat,$end ) ){ @for $i from $strat through $end { @if( $i%2 == 0 ){ .f-#{$i}{ font-size:$i+$oUnit; } } } } } //判断是否为数字 @function TestNum( $num1,$num2 ){ @if ( not unitless($num1) or not unitless($num2) ){ @debug "其中数值有单位"; @return false; } @if ( type-of($num1) == number and type-of($num1) == number ) { @return true; }@else{ @debug "其中有值不数字"; @return false; } } //初始class @mixin init-Style( $class,$styles,$oUnit:px, $strat:0 , $end:100 ){ @if( TestNum( $strat,$end ) ){ @for $i from $strat through $end { .#{$class}-#{$i}{ #{$styles}:$i+$oUnit; } } } }
config.rb配置文件：
require ‘compass/import-once/activate‘
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "../"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
output_style = :compact
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = false
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
最终生成 itlimi.css
@charset "UTF-8"; html { margin: 0; padding: 0; border: 0; } body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } ol, ul, li { list-style: none; } table, tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; } caption, th, td { text-align: left; font-weight: normal; } input, select { margin: 0; padding: 0; } a:hover { text-decoration: underline; } img { border: none; } textarea { resize: none; border: 1px solid #ccc; } .f-12 { font-size: 12px; } .f-14 { font-size: 14px; } .f-16 { font-size: 16px; } .f-18 { font-size: 18px; } .f-20 { font-size: 20px; } .f-22 { font-size: 22px; } .f-24 { font-size: 24px; } .ml-5 { margin-left: 5px; } .ml-6 { margin-left: 6px; } .ml-7 { margin-left: 7px; } .ml-8 { margin-left: 8px; } .ml-9 { margin-left: 9px; } .ml-10 { margin-left: 10px; } .sprite-base, .nav-top .log a, .dl-list dt { background: url(‘../images/icons-s46c7590030.png‘) no-repeat; } body { background: url(../images/bodyBg.png) no-repeat 0 0; } .content { width: 1000px; margin: 0 auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /* 导航条 */ .nav-top { margin-top: 54px; height: 54px; background-color: #393838; } .nav-top .log, .nav-top .nav li, .nav .nav-top li { float: left; height: 54px; } .nav-top .log { width: 220px; } .nav-top .log a { display: block; background-position: 0 -37px; height: 54px; width: 220px; } .nav li { width: 86px; line-height: 54px; text-align: center; } .nav a { display: block; font-size: 12px; color: #ccc; } .nav a:hover { color: white; background: url(‘../images/icons-s46c7590030.png‘) no-repeat; background-position: 0 -106px; } .nav-top a { text-decoration: none; } /* 广告 */ .adve { height: 292px; overflow: hidden; margin: 10px 0; } .box-main { background: #eaeaea; padding: 10px; overflow: hidden; } .box-left { width: 660px; } .tit { font-size: 22px; font-weight: bold; line-height: 66px; color: #810000; } .txt-info { text-indent: 2em; font-size: 14px; line-height: 24px; } .box-right { float: right; width: 300px; } .dl-list { padding-bottom: 10px; } .dl-list dt { height: 32px; line-height: 32px; padding-left: 20px; color: white; font-size: 14px; background-color: #810000; background-position: 7px 6px; margin-bottom: 4px; } .dl-list dd { position: relative; line-height: 24px; font-size: 12px; padding-left: 17px; } .dl-list dd span { position: absolute; left: 8px; top: 12px; width: 3px; height: 3px; background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAAGuTRJ+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkM0Q0UwRTVGNzA4MTFFNEI3RjZFMkQ1Njc1RkM0RDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkM0Q0UwRTZGNzA4MTFFNEI3RjZFMkQ1Njc1RkM0RDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQzRDRTBFM0Y3MDgxMUU0QjdGNkUyRDU2NzVGQzRENiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQzRDRTBFNEY3MDgxMUU0QjdGNkUyRDU2NzVGQzRENiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqSIIugAAAAhSURBVHjaYmhkYAAIIAYgBgggEAYigABihGKAAANhCAAASNsDi4C3yNYAAAAASUVORK5CYII=‘); } .dl-list dd a { text-decoration: none; color: #000; } /* 尾部 */ .foot { background-color: #393838; margin-top: 10px; padding: 15px 0; font-size: 12px; color: white; } .foot p { text-align: center; line-height: 20px; } .foot p a { text-decoration: none; color: white; }
心得
刚开始写的时候有点不太习惯，之后我就把sass当成JS封方法的感觉在写就好多了 没个css模块就是一个 大的function 里面可能有几个子的方法的概念,
在写 @function 、@if 老感觉在写JS常常忘记@ 然后就编译老报错看代码还觉得没错啊，原来忘了写@
标签：
原文地址：http://www.cnblogs.com/auok/p/4469263.html
