CSS预编译：sass-scss
2017-03-15 09:25
441 查看
1 SCSS/SASS
两者在使用上，稍有不同， 主要体现在格式上，SCSS的格式和
CSS格式几乎一样，不局限于缩进，带有大括号，而
SASS必须严格遵循缩进原则，并且没有大括号，使用上选择
SCSS更多点，需要注意的是两者不能混用，也就是说后缀名为
.scss的书写规则就不能在其中使用
SASS书写规则，否则会出现意想不到的错误，慎重选择。
这里主要以
SCSS为主，原因很简单，更能接收点。
2 SASS 的安装
不管是SCSS还是
SASS都可以通过
sass命令来翻译等其他操作，由于
sass是基于
Ruby实现的，所以在安装的时候直接输入
sudo apt-get install sass的时候会提示使用
ruby-sass进行安装，这个无所谓，它会自动帮助我们选择
ruby-sass进行安装；
安装好之后使用
sass --version查看下，如果能正确输出版本号，说明安装成功
3 使用 sass
命令
编译：sass src.scss:dist.css
需要注意的是，源文件和目标文件是采用冒号（“：”）来隔开，如果想监听文件的变动，可以加上
--watch参数
sass --watch src.scss:dist.css
这样一旦
src.scss有变动，
dist.css文件就会实时发生变化。
还可以通过
sass --help来查看更多相关的使用。
4 语法
4.1 变量声明
变量声明使用 ‘$’ 美元符号作为前缀来声明，并且还支持作用域，即可以定义全局和局部变量，两者定义方式，全局定义在整个文件范围，局部则是定义在大括号中的变量。示例：
// test.scss
$bgColor: red;
body {
background-color: $bgColor;
}
a {
$mtop: 10px;
}上面的
$bgColor就是全局变量，再看
$mtop就是局部变量，只在
a标签中生效。
变量使用：很简单，直接通过
$var使用即可，如上的背景色设置；
4.2 父选择器引用：&
通过 ‘&’ 符号可以在大括号内引用父选择器，从而做出更丰富的选择器操作，比如：// test.scss
a {
&:hover {
color: red;
}
}上面示例中，相对第一层大括号内的选择器，
a标签就是父选择器，在里面使用
&来引用，上面的代码实际上可以写成：
a:hover { color: red; }PS:
&和
@at-root结合使用，将会有意想不到的结果出现，功能强大，组合形式多样。
4.3 选择器嵌套
选择器嵌套赋予了代码编写的灵活性，嵌套主要发生在父子及子孙选择器上，如下：// test.scss
div {
a {
img {
....
}
}
}上面的示例就类似：
div a img { ... }群组选择器嵌套，表示多个选择器包含同一种子选择器的时候，就可以使用群组嵌套，如下：
// test.scss
div, p {
a {
text-decoration: none;
}
}上面的意思是，在
div和
p元素下同时都有
a链接标签，并且要求有共同的部分样式，实际上等同于如下写法：
div a, p a { text-decoration: none; }另外还有一些其他类型的选择器，比如： 直接子选择器（
>），相邻选择器（
+），兄弟选择器（
~）等等
sass下嵌套写法，也都很简单：
// test.scss
div {
> p {
// 子选择器
}
~ span {
// 兄弟选择器，即跟在当前 div 后面的所有同级的 span 标签
}
+ div {
// 相邻选择器
}
}对应
css格式，如下：
div > p {} ： 子标签 p，不包含孙子标签；div ~ span {}： div标签后面的所有同级标签
span；
div + div {}： div后面的相邻的
div标签。
4.4 混合器使用
混合器，类似于函数的使用，可以通过@mixin定义一样式块，然后在样式表中使用
@inclue引用该样式块。
混合器可以带参数，也可以不带参数使用，但是建议需要参数的时候使用混合器，因为后面还有更好的替代方式来使用不带参数的情况，比如：继承和
%形式。
混合器使用：
不带参数
// test.scss
@mixin set_bg {
background-color: red;
background-image: url(girl.png);
background-size: 300px 300px;
}
// 引用
div {
@include set_bg;
}带参数
// test.scss
@mixin set_bg( $color, $img, $w, $h ) {
background-color: $color;
background-image: url($img);
background-size: $w $h;
}
// 引用
div {
@include set_bg( red, '../../images/1.jpg', $width, $height );
}参数默认值
// test.scss
@mixin set_bg( $color:green, $img, $w:100px, $h:100px ) {
background-color: $color;
background-image: url($img);
background-size: $w $h;
}
// 引用
div {
@include set_bg( red, '../../images/1.jpg', $width, $height );
}如果设置了默认值，那么对应的参数可以不传，比如上例中的
$width和
$height就可以省略掉，在使用的时候可以直接写成：
@include set_bg( red, '../../images/1.jpg' );
但是如果没有设置默认值，还省略的话就会报错：
因此在使用的时候务必要小心谨慎。
@content使用
在使用混合器时候，还可以结合
@content来使用，这个时候不需要在选择器中使用
@include就会生效，使用方式：
// test.scss
@mixin test {
* html {
@content;
}
}
@include test {
#logo {
background-color: red;
}
}上面的结果就是：
// test.css
* html #logo {
background-color: red;
}因此
@content的使用可以考虑使用在全局的一些通用样式情况下。
4.5 继承
可以通过@extend来继承其他元素的样式
比如：
被继承元素：
.parent {
color: red;
}需要继承的元素：
.son {
@extend .parent;
}最后等价于 ：
.son { color: red; }继承要点：
相对混合器代码量更少，因为继承是从选择器层面为出发点，而不是类似混合器直接复制属性；
CSS层叠问题，因为继承可能继承来自不同元素下的样式，比如
.a extend .b，那么也同样继承了
div.b下的
.b样式，那么此时就存在选择权的问题，也就是层叠问题，而这个时候选择的依据首先是权值，然后是声明顺序。
4.6 导入
sass同样提供了样式文件导入的功能，同样使用
@import关键词来使用，并且支持局部导入，即在某个选择器内部导入样式文件；
比如：
样式文件：
// a.scss $bg_color: red;
在其他文件中导入
a.scss
// b.scss
div {
@import a;
}最终生成结果其实就类似：
// b.scss
div {
$bg_color: red; // 在此声明了个局部变量
}5 sass
语法扩展
5.1 占位符 + 继承
占位符，使用%来声明，通过占位符声明的样式块，可通过
@extend来继承，并且占位符的使用也只有在被继承了之后才会生成，否则不会被编译到文件中去。
使用
// test.scss
%placeholder {
background-repeat: no-repeat;
}
@mixin set_bg( $color, $img, $w:60px, $h:60px ) {
background-color: $color;
background-image: url($img);
background-size: $w $h;
@extend %placeholder;
}结果会发现：
div {
background-repeat: no-repeat; }
div {
background-color: red;
background-image: url("../../images/1.jpg");
background-size: 60px 60px; }并没有和其他背景属性放在一个选择器中，而是单独复制了个选择器然后设置了占位符定义的属性，这也说明了继承并不是属性的复制而是选择器的复制。
5.2 函数
在sass中还可以使用
@function来声明函数，并且
sass提供了很多自带的功能函数，更详细的参考 第六节-函数 go ✈
比如：
// test.scss
$width: 100px;
$stepW: 5px;
@function calcWidth( $w ) {
@return $width - $w * $stepW + $width / $stepW;
}
// 直接调用即可
div {
width: calcWidth( 10 ); // --> 结果为： 70px;
}5.3 样式输出
将scss文件编译输出成
css文件的时候可以通过参数来指定输出的样式版本
:nested嵌套样式
嵌套样式就是通过大括号，进行各种样式嵌套，使的样式代码清晰不至于混乱难以维护，比如：
// test.css
div { background-repeat: no-repeat; } div { background-color: red; background-image: url("../../images/1.jpg"); background-size: 60px 60px; }
.red {
width: 70px;
height: 100px;
margin-top: 10px; }
注意这里的成对的第二个大括号会和样式在同一行，这也是和后面一个输出样式不同的地方
:expended，其实就是
:nested的展开模式
// test.css
div {
background-repeat: no-repeat;
} // 这个大括号单独成一行:compact紧凑型
样式都写在一行上
div { background-color: red; background-repeat: no-repeat; }:compressed压缩型
去掉空格和换行后的形式，比如：
// test.css
div{background-repeat: no-repeat;}div{background-color:red;background-image:url("../../images/1.jpg");background-size:60px60px;}压缩的形式相对更适合发布版本里面使用，可以一定程度上减少文件大小。
6 函数
Sass提供了不少自带的工具函数，下面来简略的看下各个函数的功能
该 函数列表 地址下包含了
sass提供的各种函数
6.1 颜色函数（Color Functions）
颜色函数主要分为三大类，包含（RGB，HSL，Opacity）和其他一些函数6.1.1 RGB
rgb($red, $green, $blue)：生成
rgb颜色，参数值范围：0 ~ 255
rgb($red, $green, $blue, $opacity)，同上，包含了透明度设置，透明度范围：0 ~ 1
red($color)
green($color)
blue($color)
mix($color1, $color2, [$weight])，混合两种颜色，
$weight表示混合比例，默认：50%，参数可以是
rgb/rgba函数形式，也可以是
red/blue颜色字符串形式
混合示例：
$bg-color: mix( red, blue, 30% );
6.1.2 HSL
HSL 是由：色相（hue），饱和度（saturation），亮度（lightness）三个值组合而成，三个值的取值范围分别为：
hue： 0 ~ 360 度
saturation： 0 ~ 100%
lightness： 0~ 100%
hsl($hue, $saturation, $lightness)
hsla($hue, $saturation, $lightness, $alpha)
示例：
hsl( 180, 30%, 60% )
结果：
#59a6a6;
hue($color)
saturation($color)
lightness($color)
上面三个均是从一个颜色值中取得相应的值
adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)
desaturate($color, $amount)
上面的5个函数都是在调整
$color颜色，最后返回一个调整后的颜色值
grayscale($color)
complement($color)
invert($color)
6.1.3 Opacity
alpha($color) / opacity($color)：获取透明度
rgba($color, $alpha)：设置透明度
opacify($color, $amount) / fade-in($color, $amount)：不透明化，相当于淡入
transparentize($color, $amount) / fade-out($color, $amount)：透明化，相当于淡出
6.1.4 其他
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
设置之前：
rgba(204, 204, 204, 0.7);
$bg-color: adjust-color( $bg-color, $red:-10, $green:20, $blue:-20, // $hue:180, $saturation:30%, $lightness:20%, $alpha:0.3 );
设置之后：
#c2e0b8;==>
rgb(194,224,184);
从结果上看，该函数是在原有的基础上进行加减得来，参数是负值就是减，正值就是加；
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
以上三个函数都可以对某个颜色值进行修改，修改的内容涉及
RGB和
HSL六个值；
在使用过程中遇到两个问题：
直接传入数值会报错，原因在于，传值必须以：
$red:30形式传入；
报错：不能对一个颜色同时设置 HSL 和 RGB；
ie-hex-str($color)：将颜色转换成 IE 可识别的 16 进制字符串；
ie-hex-str(#abc) => #FFAABBCC ie-hex-str(#3322BB) => #FF3322BB ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00
6.2 字符串处理函数（String Functions）
unquote($string)
quote($string)
去掉引号和添加引号
str-length($string)：获取字符串长度
str-insert($string, $insert, $index)，将
$insert插入到字符串的
$index位置；
str-index($string, $substring)：查找子串，返回索引；
str-slice($string, $start-at, [$end-at]):切割字符串
to-upper-case($string)：大写化
to-lower-case($string)：小写化
这些字符串操作函数，
6.3 数字处理函数（Number Functions）
percentage($number)：将不带参数的数字转换成百分比
比如：
percentage( 100 ); => 10000%
percentage( 0.8 ); => 80%
round($number)：四舍五入
ceil($number)：向上取整
floor($number)：向上取整
min($numbers…): 取最小值
max($numbers…)：取最大值
random([$limit])：取随机数，从 1 ~
$limit之间的随机数
设置个随机背景色：
$bg-color: rgba( random(255), random(255), random(255), random(100) / 100 );
其实编译之后还是个固定值，还在傻傻的一个劲刷新浏览器（囧囧囧囧！！！！）
6.4 列表处理函数（List Functions）
sass中的所有列表都是不可变的，所提供的列表函数在操作列表之后都是返回新的列表，原来列表不会发生变化；
sass中的列表，有几种表现形式：
空格型：
比如（
border: 1px solid red）中的
1px solid red就可以定义为一个列表，
$list: 1px solid red;
逗号型：
比如（
rgb(120， 120， 120);）中的
120, 120, 120就可以这样定义
$list: 120, 120, 120;
函数列表：
length($list)
示例：
$list: 120, 120, 120; $list: 120 120 120; $bg-color: rgba( 120, 120, 120, length($list) / 10 );
结果：
background-color: rgba(120, 120, 120, 0.3);得到
$list长度：3
nth($list, $n)
示例：
$list: 1, 2, 3, 4, 5, 6; $bg-color: rgba( 120, 120, 120, nth($list, 4) / 10 );
结果：
background-color: rgba(120, 120, 120, 0.4);，从结果可知通过
nth取得了
$list中的第四个元素也就是：
4。
set-nth($list, $n, $value)
示例：
$list: 1, 2, 3, 4, 5, 6; $list: set-nth($list, 5, 9); $bg-color: rgba( 120, 120, 120, nth($list, 5) / 10 );
结果：
background-color: rgba(120, 120, 120, 0.9);
从结果可知，通过
set-nth($list, 5, 9)把
$list中的第五个值变成了
9，但是上面提过，所有的列表操作函数都无法改变原列表，所以，在设置完之后，必须的重新赋值给
$list，也就是上面示例中的第二行代码必须要有；
join($list1, $list2, [$separator])
append($list1, $val, [$separator])
上面两个也挺简单，就不多说了，
join就是合并列表，
append就是在列表后面追加值；
zip($lists…)
该函数是将多个一维列表组合成一个多维列表，从官网的示例看，组合方式需要多注意。
zip(1px 1px 3px, solid dashed solid, red green blue) => 1px solid red, 1px dashed green, 3px solid blue
list-separator($list): 返回列表的分隔符
6.5 映射处理函数（Map Functions）
map-get($map, $key)：根据给出的
$key得到相应的值；
map-merge($map1, $map2)：合并两个图；
map-remove($map, $keys…)：删除指定键的项；
map-keys($map)：得到所有键；
map-values($map)：得到所有值；
map-has-key($map, $key)：判断是否存在给出的键的项；
keywords($args)：类似于字符串化参数似得。
比如：
@mixin foo( args... ) {
@debug keywords( $args ); // => (arg1:v1, arg2:v2)
}
@include($arg1:v1, $arg2:v2);6.6 选择器函数（Selector Functions）
selector-nest($selectors…)
子元素选择器处理：会在后面加上空格，再链接起来，如果后面的参数中包含父元素的引用：
&，那么不使用空格而是直接链接到前面选择器中；
// 无 ‘&’ 情况，空格连接 selector-nest( ".a .b", ".c .d" ); // .a .b .c .d // 如果是下面的有逗号的情况，那么就是在 .a 和 .b 下面各自添加 .c .d selector-nest( ".a, .b", ".c .d" ); // .a .c .d, .b .c .d // 有 ‘&’ 情况，直接连接 selector-nest( ".a", "&.b" ); // .a.b
selector-append($selectors…)：往前面追加，中间不添加分隔符
比如：
selector-append( ".a", ".b", ".c" ); // ==> .a.b.c selector-append( ".a.foo", ".b.bar"); // ==> .a.foo.b.bar selector-append( ".a", "-suffix" ); // ==> .a-suffix
selector-extend($selector, $extendee, $extender)
$extendee：被继承者；
$extender：继承者；
官方的解释是，如同下面的形式：
$selector { ... }
$extender { @extend $extendee }从示例看也还是没太明白意思：
selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar.a .b, .a .foo .bar这两个还好理解，之后后面一个 ：
.foo .a .bar不太理解，怎么
.foo又成了父级选择器了。
selector-replace($selector, $original, $replacement)
这个函数作用是用来进行选择器替换用的，支持替换全部或者部分
官方示例：
selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz"
selector-replace(".foo.bar.baz", ".foo.baz", ".qux") => ".bar.qux"从示例看可知，
replace还是很强大的，
.foo.bar.baz在 查找
.foo.baz情况下都能替换掉，变成
.bar.qux
这篇文章讲述了
@at-root有关的使用，值得一看。
selector-unify($selector1, $selector2)
is-superselector($super, $sub)：
$super选择器是否被
$sub包含
simple-selectors($selector)： 将选择器组合分割成简单的选择器，返回分割后的选择器列表；例如：
simple-selectors(".foo.bar.baz"); // => ".foo",".bar",".baz"selector-parse($selector):
selector-parse(".foo .bar, .baz .bang") => ('.foo' '.bar', '.baz' '.bang')，解析给出的选择器字符串成列表；6.7 内部函数（Introspection Functions）
feature-exists($feature)
variable-exists($name)
global-variable-exists($name)
function-exists($name)
mixin-exists($name)
inspect($value)
type-of($value)
unit($number)
unitless($number)
comparable($number1, $number2)
call($name, $args…)
上面都是一些基本的内部函数，大部分都可以直观的通过函数名来识别其用途。需要注意的几点
unit返回的是一个数的单位；而
unitless是返回
boolean值用来判断数字是否带有单位；
comparable：用来判断两个数是否能进行加减比较操作，比如在不同单位的情况下可能无法做出算术操作，那么就可以事先通过这个去判断下；
6.8 其他函数（Miscellaneous Functions）
if($condition, $if-true, $if-false)：这个函数类似与三元操作符，表示，如果条件
$condition成立，就执行
$if-true，否则执行
$if-false；
unique-id()：生成唯一的
CSSid，不带引号形式返回；
更多与函数有关的知识可以在官方文档-函数部分获取
7 其他
7.1 插值
在属性名当中相同的部分使用变量是使用// test.scss
$props: (margin, padding);
@mixin set_top( $direction, $value ) {
@each $prop in $props {
#{$prop}-#{$direction}: $value;
}
}
.red {
width: set_width( 10 );
height: $height;
margin-top: $mtop;
@include set_top( left, 100px );
}上面的
$props的声明类型，是
sass中的数组，包含两个元素：
margin和
padding,
插值的引用，使用
#{} 方式，经常被用在属性名上7.2 各种指令
指令的使用采用@name形式，相当于
sass中的关键字。
@each： 遍历数组用，类似
for ... in；
@if，
@else，
@else if，
@for等等都可以在
sass中使用
@for：
@for $i from 1 through 3 { .item-#{$i} { width: 100px; } };@each
@each $prop in $props { .item-#{$prop} { ... } }@while
@while $i > 0 { ... }7.3 不定参数（…）
在参数比较多，或者不确定的时候，可以使用...
比如：
// test.scss
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}传值的时候同样可以使用：
// test.scss
$values: 11, 22, 33, 44;
@mixin test( $v1, $v2, $v3, $v4 ) {
......
}
div {
@include test( $values... ); // 这里意思是把 $values 中的所有值传入到混合器中
}7.4 运算符
算术： 加减乘除（+ - * /）;
逻辑： 或（
or），非（
not），且（
and）；
8 总结
SASS的基本使用还是比较简单的，基本上只要记住以下几点，入门还是很快的
变量声明使用‘$’，比如：
$result；
全局和局部变量声明；
关键字部分，使用
@，比如：
@mixin，
@extend，
@include，
@content等等；
控制语句：
@for, @if, @each, @else if, @while等的使用；
混合器，继承，占位符的使用；
运算符（算术（
+ - * /），逻辑（
or，
and，
not），等等）；
文件引入：
@import这里需要注意的是针对原生
Css文件和
Sass/scss文件引入的注意点；
函数声明：
@function；
各种函数的使用；
&和
@at-root的结合使用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [Phonegap+Sencha Touch] 移动开发9、scss编译成css，如何去除-moz-、-o-、-ms-前缀
- 把Fireshell中的sass模块替换为less编译css
- css - SASS/SCSS 基本教程
- 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
- SCSS（SASS、CSS）学习
- CSS：用SASS（SCSS）实现栅格系统
- scss编译输出css四种格式
- 前端编码规范（4）—— CSS 和 Sass (SCSS) 规范
- Nodejs，Grunt配置sass自动编译成css
- sass文件编译成css文件
- WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps
- 使用 sass/scss 编写CSS 快速上手
- webstorm scss编译css配置
- Sass编译Css
- Sublime Text通过插件编译Sass为CSS及中文编译异常解决
- 支持新版chrome，用webstorm编译形成css和sourcemap，调试sass和less源文件（转）
- CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?
- koala 编译scss不支持中文 ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法
- sass的四种css编译风格
- 在sublime text3中安装sass编译scss文件