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="data: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="data: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:; padding:; border:;}
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:; padding:; border:; font-size: 100%; vertical-align: baseline; }
ol, ul, li { list-style: none; }
table,tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline;}
caption, th, td { text-align: left; font-weight: normal; }
input,select{margin:;padding:}
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:; padding:; border:; } 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:; padding:; border:; font-size: 100%; vertical-align: baseline; } ol, ul, li { list-style: none; } table, tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline; } caption, th, td { text-align: left; font-weight: normal; } input, select { margin:; padding:; } 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常常忘记@ 然后就编译老报错看代码还觉得没错啊，原来忘了写@
sass个人学习笔记的更多相关文章
-
sass的学习笔记
sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...
-
sass,compass学习笔记总结
最近在进行百度前端技术学院的任务,知道自己基础薄弱,可没想到弱到这种地步,同时在安装各种软件的同时遇到了各种坑,查阅了各种资料,一个个解决的时候也发现自己凌乱了.学习总结,在脑海中形成自己的学习系统才 ...
-
Sass&;Compass学习笔记（一）
1.sass中可以使用变量 变量名以$符号开头,可包含所有可用作CSS类名的字符,包括下划线和中划线. 可见,中划线也是可以作为命名的字符,这是与很多其他语言的不同之处.变量的使用实例: $compa ...
-
Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
-
Sass学习笔记（补充）
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
-
Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
-
gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
-
JavaScript学习笔记：数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
-
stylus入门学习笔记
title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...
随机推荐
-
win10快捷键大全 win10常用快捷键
win10快捷键大全大家可以来了解一下,今天小编带来了win10常用快捷键,很多朋友喜欢使用快捷键来操作电脑,那么Windows10系统有哪些新的快捷键呢• 贴靠窗口:Win +左/右> Win ...
-
Microsoft Dynamics CRM4.0编程---说明
Introduction(说明) If your organization has customers, you need a software system to help you manage y ...
-
ubuntu下配置安装conky
由于默认的conky配置不好看,于是下载了一些配置,网上一抓一大把. 首先 sudo apt-get install conky-all 然后下载想要的配置文件,下载下来的是压缩文件,解压就行了,解 ...
-
codeforces 316F3 Suns and Rays
题目在此 找出中有多少个太阳以及每个太阳的散发线段. 算法 原图: 将图"缩小",如果一个白点的四周有黑点,那么把这个白点变成黑点: 将图"放大",即上述&qu ...
-
虚拟机安装中文Fedora14和C/C++IDE开发环境
虚拟机安装中文Fedora14和C/C++IDE开发环境 2010-12-05 00:15:58 标签:中文Fedora14 IDE 开发环境 C/C++ 原创作品,允许转载,转载时请务必以超链接形式 ...
-
vector 利用swap 函数进行内存的释放 vector<;int>;().swap
首先,vector与deque不同,其内存占用空间只会增长,不会减小.比如你首先分配了10,000个字节,然后erase掉后面9,999个,则虽然有效元素只有一个,但是内存占用仍为10,000个.所有 ...
-
Oracle Client（客户端） 安装与配置
因为工作需要,需要通过本地oracle客户端将数据导入到远程服务器上的oracle数据库中.从csdn下了很多oracle客户端,都是属于精简版,缺少imp.exe文件,造成无法导入数据.所以最终从o ...
-
python使用os.listdir和os.walk获得文件的路径
python使用os.listdir和os.walk获得文件的路径 目录 情况1:在一个目录下面只有文件,没有文件夹,这个时候可以使用os.listdir 情况2:递归的情况,一个目录下面既有目录 ...
-
mysql 查询上个月某一天
本文地址:http://www.cnblogs.com/jying/p/8877065.html 需求:获取上个月15号的日期 网上一搜一大堆粘贴复制的大坑:(如下是查询上个月最后一天,可是我要的不一 ...
-
EF框架搭建小总结--CodeFirst代码优先
前言:之前在下总结编写了一篇 EF框架搭建小总结--ModelFirst模型优先 博文,看到一段时间内该博文的访问量蹭.蹭蹭.蹭蹭蹭...往上涨(实际也不是很多,嘿嘿),但是还是按捺不住内心的喜悦(蛮 ...