Sass 笔记
http://www.w3cplus.com/sassguide/
http://www.ruanyifeng.com/blog/2012/11/compass.html
基本特性
- sass中可以定义变量,方便统一修改和维护
- sass可以进行选择器的嵌套,表示层级关系
- sass中如导入其他sass文件(可以使用导入文件的变量),最后编译为一个css文件,优于纯css的@import
- sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用
<!--处理css3的前缀兼容轻松便捷 @mixin语法后面有介绍(ctrl + F)-->
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
- sass可通过@extend来实现代码组合声明,使代码更加优越简洁
- 进行简单的加减乘除运算等
- 集成了大量的颜色函数
安装
- 首先安装依赖环境ruby
- 打开ruby的cmd,执行
gem install sass
命令安装sass - 命令
sass style.scss style.css
转译sass为css文件
转译比较蛋疼,需要以管理员身份打开cmd或者打开ruby的cmd doss窗口,否则系统不识别sass命令(难道需要重启?待确认) - 单文件监听
sass --watch style.scss:style.css
- 文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
工具
- 官方在线转换器
- koala.exe 下载
- sass监听
- webstorm配置监听(设置-工具-文件监听器-添加sass或scss监听 注意修改Programe配置项)
![4KKY@@_U{{54@4%Z0SJ`@8.png
注意 遇到中文无法监听通过的解决办法
- 进入【ruby安装目录\lib\ruby\gems\2.2.0\gems\sass-3.x.xx\lib\sass】;
打开【engine.rb】文件添加Encoding.default_external = Encoding.find('utf-8')
,放在所有的 require "xxx"后面;
- sass内部最前边加上
@charset "UTF-8";
语法
参考文档:http://www.w3cplus.com/sassguide/syntax.html
-
文件后缀名: sass(不适用大号和分号的语法,不推荐使用)和scss(类似css的语法,推荐)
-
导入@import "ScssFileNameWithoutSuffix": 编译时会将@import的scss文件合并进来只生成一个CSS文件,可以使用引用文件中定义的变量(把变量定义在一个文件,作为公共文件导入),可以减少浏览器http请求!
-
注释:终于支持
//
行注释了,css只支持块状注释/*...*/
-
变量
- 一般变量
$varName: value;
(可以全局使用) - 默认变量
$varName: value !default;
(根据需求来覆盖:重新声明即可) - 特殊变量 如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用
$borderDirection: top !default; .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; }
- 全局变量 在变量值后面加上!global即为全局变量。(这个目前还用不上,等待新版本的sass设计好全局变量和局部变量的问题)
- 多值变量 list map (看例子)
- 一般变量
$linkColor: #08c #333 !default; //第一个值为默认值,第二个鼠标滑过值
a {
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
- 嵌套(Nesting)
- 选择器嵌套:在一个选择器中嵌套另一个选择器来实现继承
- 属性嵌套:属性拥有同一个开始单词...可以这么写
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
- @at-root sass3.3.0中新增的功能,跳出所有的被嵌套选择器
- @keyframes @media 等...
-
混合(mixin): 使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开(注意不用逗号的可能是一个list参数),也可以给参数设置默认值。声明的@mixin通过@include来调用
<!--sass style--> @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } .imgtext-h li{ @include horizontal-line(1px solid #ccc); } .imgtext-h--product li{ @include horizontal-line($padding:15px); } <!--to css style--> .imgtext-h li { border-bottom: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px; } .imgtext-h--product li { border-bottom: 1px dashed #cccccc; padding-top: 15px; padding-bottom: 15px; }
-
继承:选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用关键词@extend,后面紧跟需要继承的选择器。
占位选择器%:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。 -
内置函数:用的最多应该是颜色函数(lighten减淡和darken加深,其调用方法为lighten($color,$amount)和darken($color,$amount))
-
自定义函数: @fuction,@return
$baseFontSize: 10px !default; $gray: #ccc !defualt; // pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem; } body{ font-size:$baseFontSize; color:lighten($gray,10%); } .test{ font-size:pxToRem(16px); color:darken($gray,10%); }
-
运算:对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算
-
条件语句
@if @else if @else
;
三目运算:if($condition, $if_true,
三个参数分别表示:条件,条件为真的值,条件为假的值。
``` css
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
p {
color: green;
}
```
- for循环
@for $var from <start> through <end>
@for $var from <start> to <end>
$i表示变量,start表示起始值,end表示结束值
这两个的区别是关键字through表示包括end这个数,to则不包括end这个数。
``` css
//sass style
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//to css style
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
```
- each循环 (可以参考css精灵生成的sass代码,雷同呢~~)
@each $var in <list or map>
$var表示变量,list和map表示list类型数据和map类型数据
``` css
//sass style
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
.egret-icon {
background-image: url('/images/egret.png');
}
```
``` css
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
```
- 列表项