sass(scss)学习笔记
使用Sass
第一步都是安装 Sass gem：
gem install sass
如果你使用的是 Windows， 就需要先安装 Ruby。
如果要在命令行中运行 Sass ,只要输入
sass input.scss output.css
你还可以命令 Sass 监视文件的改动并更新 CSS ：
sass --watch input.scss:output.css
如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录：
sass --watch app/sass:public/stylesheets
=============================
声明变量 用符号 $
=============================
输出方式
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
=============================
符号 & 代表父级元素名
=============================
混合声明使用 @mixin
调用混合声明 @include
【无参数】
编译前：
@mixin border-radius{
-webkit-border-radius: 10px;
border-radius: 10px;
}
button {
@include border-radius;
}
编译后：
button {
-webkit-border-radius: 10px;
border-radius: 10px;
}
—————————————————
【有参数,多参数】
编译前：
@mixin opacity($opacity:50,$padding:10px) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
padding:$padding;
}
.opacity{
@include opacity; //参数使用默认值
}
编译后：
.opacity{
opacity: 50 / 100;
filter: alpha(opacity=50);
padding:10px;
}
—————————————————
可以随机给混合宏传值，如：
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
.opacity-80{
@include opacity(80); //传递参数
}
编译出来的 CSS:
.opacity-80{
opacity: 80 / 100;
filter: alpha(opacity=80);
}
=============================
box-shadow可以有多组值，所以在变量参数后面添加“…”。
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
在实际调用中：
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
编译出来的CSS:
.box{
border:1px solid #ccc;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}
=============================
继承@extend
//通过选择器继承继承样式
.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border- 3px;
}
//被编译为：
.error, .seriousError {
border: 1px red;
background-color: #fdd; }
.seriousError {
border- 3px; }
=============================
选择器占位符%
//编译前的CSS
%mar {
margin: 5px;
}
%pad{
padding: 5px;
}
.btn {
@extend %mar;
@extend %pad;
}
.block {
@extend %mar;
span {
@extend %pad;
}
}
编译出来的CSS:
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。
=============================
SassScript 支持六种主要的数据类型：
数字（例如 1.2、13、10px）
文本字符串，无论是否有引号（例如 "foo"、'bar'、baz）
颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）
布尔值（例如 true、false）
空值（例如 null）
值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）
=============================
编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, hubwiz users!";
}
}
@include firefox-message(".header");
被编译为：
body.firefox .header:before {
content: "Hi, hubwiz users!"; }
注意：当 deprecated = property syntax 时，所有的字符串都将被编译为无引号字符串，不论是否使用了引号。
=============================
除法运算
p {
font: 10px/8px; // 纯 CSS，不是除法运算
$ 1000px;
$width/2; // 使用了变量，是除法运算
round(1.5)/2; // 使用了函数，是除法运算
height: (500px/2); // 使用了圆括号，是除法运算
margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
被编译为：
p {
font: 10px/8px;
500px;
height: 250px;
margin-left: 9px; }
———————————————
如果你希望在纯 CSS 中使用变量和 /， 你可以用 #{} 包住变量。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
被编译为：
p {
font: 12px/30px; }
=============================
颜色运算
所有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算。 例如：
p {
color: #010203 + #040506;
}
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：
p {
color: #050709; }
——————————————————
一般 {Sass::Script::Functions color functions} 比颜色运算更有用，并且能达到相同的效果。
算数运算也能将数字和颜色值一起运算，同样也是分段运算的。 例如：
p {
color: #010203 * 2;
}
计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：
p {
color: #020406; }
=============================
三目运算符的语法为：
@if($condition, $condition_true, $condition_false)，
三个参数分别表示：条件，条件为真的值，条件为假的值。
例如：
$fontBold: true;
p {
font-weight: if($fontBold, bold, normal);
}
编译生成:
p {
font-weight: bold;}
=============================
在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：
@for $i from through
@for $i from to
$i 表示变量 start 表示起始值 end 表示结束值
这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数
=============================
@each 循环就是去遍历一个列表，然后从列表中取出对应的值。
@each 循环指令的形式： @each $var in < list >
=============================
@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。
这里有一个 @while 指令的简单用例：
//SCSS
$i: 6;
@while $i > 0 {
.item-#{$i} { 2em * $i; }
$i: $i - 2;
}
被编译为：
.item-6 {
12em; }
.item-4 {
8em; }
.item-2 {
4em; }