安装sass（个人选择ruby安装）
安装Ruby：下载Ruby.2.2.3(*64) 建议安装在c盘 选中第二个选项，接下来安装sass
安装sass：1. 打开控制台，gem install sass 【如果命令受限 sudo gem install sass 用这个】
2. gem install <把下载的安装包拖到这里>
查看是否安装sass成功：sass -v 【出现sass 3.4.11 seletave】表示安装成功
更新sass：gem update sass 然后出来一段 表示已最新
卸载sass：gem uninstall sass
ou用scss
scss注释要用css的注释 js类的注释只会在scss里显示
中文注释会报错，@charset"UTF-8";一定要写在scss顶部 否则中文注释报错
KaTeX parse error: Expected '}', got '#' at position 40: …unded { border-#̲{side}-radius: 5px;} 属性的话要加#号
$btn-primary-color : #fff !default; 如果值后面加上!default则表示默认值。
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default; 2覆盖1.5，如果1.5没加默认 就是1.5覆盖2
b t n − p r i m a r y − b o r d e r : d a r k e n ( btn-primary-border : darken( btn−primary−border:darken(btn-primary-bg, 5%) !default;
可以定义全局变量和局部变量
@mixin border-radius($radius:5px){ 【混合宏】
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($shadow...) { //【复杂的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。】
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
.box {@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));} 【调用上面的混合宏】
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
button {
@include border-radius;
} //【调用之前定义好的混合宏】
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(3px);
} // 【在调用的时候可以给这个混合宏传一个参数值：】
.btn {
@include border-radius(50%);
} 【不用混合宏的值 可以自己定义值】
Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}
// 在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的：【全部调用出来】
.box-center {
@include center(500px,300px);
}
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
} // 【继承】
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
} //【如果不调用的话 %这段代码不会出现 在css里】这个叫占位符
[Sass]插值#{}
>$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
margin-top: $margin-#{$size};
}
.login-box {
@include set-value(big);
}
%updated-status {
margin-top: 20px;
background: #F00;
}
.selected-status {
font-weight: bold;
}
$flag: "status";
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
}
>$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
\#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
- nth函数（nth function） 可以直接访问值列表中的某一项；
- join函数（join function） 可以将多个值列表连结在一起；
- append函数（append function） 可以在值列表中添加值；
- @each规则（@each rule） 则能够给值列表中的每个项目添加样式。
> .box { 【算法 单位必须相同 不能px - em】
width: 20px + 8in;
}
$list: twitter,facebook,github,weibo;
> @for $i from 1 through length($list){
.icon-#{nth($list,$i)}{
background-postion: $list -$i * $i;
}
} 【循环传值 乘法】
.box { 【除法必须加小括号 ()】
width: (100px / 2);
}
>$width: 1000px; 【变量除法】 乘除法大于加减
$nums: 10;
.item {
width: $width / 10;
}
.list {
width: $width / $nums;
}
SCSS
p {
font: 10px/8px; // 纯 CSS，不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量，是除法运算
width: round(1.5)/2; // 使用了函数，是除法运算
height: (500px/2); // 使用了圆括号，是除法运算
margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
.box { 【两个带单位的值除法 出来的值是没有单位的】
width: (1000px / 100px);
}
p { 【颜色值计算 两位两位加 结果为：050709】
color: #010203 + #040506;
}
$content: "Hello" + "" + "Sass!"; 【字符串进行连接】
.box:before {
content: " #{$content} ";
}
div {
cursor: e + -resize;
}
p:before { 【有引号的加没引号的 哪个在前就是哪个】
content: "Foo " + Bar;
font-family: sans- + "serif";
}
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
这里$i 表示变量
start 表示起始值 ==1
end 表示结束值 ==3】
@for $i from 1 to 5 {
.item-#{$i} { width: 2em * $i; }
} 【如果换成to就是表示循环当前写的数目-1】
//SCSS
$types: 4; 【while循环】
$type-width: 20px;
>@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
$list: adam john wynn mason kuroir;//$list 就是一个列表 【each循环 循环着将list里的变量名成为图片】
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}
.test1 {
content: unquote('Hello Sass!') ;
}
.test3 {
content: unquote("I'm Web Designer");
}
.test5 {
content: unquote('"Hello Sass!"');
}
字符串函数 只能删除开头和结尾的引号
quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 “”。如：
//SCSS
.test1 {
content: quote('Hello Sass!');
}
.test2 {
content: quote("Hello Sass!");
}
.test3 {
content: quote(ImWebDesigner);
}
.test4 {
content: quote(' ');
}
编译出来的 css 代码：
//CSS
.test1 {
content: "Hello Sass!";
}
.test2 {
content: "Hello Sass!";
}
.test3 {
content: "ImWebDesigner";
}
.test4 {
content: "";
}
使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。
.test1 {
content: quote(Hello Sass);
}
这样使用，编译器马上会报错：
error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')
解决方案就是去掉空格，或者加上引号：
.test1 {
content: quote(HelloSass);
}
.test1 {
content: quote("Hello Sass");
}
同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：
//SCSS
.test {
text: to-upper-case(aaaaa); 【一个转换大写 一个转换小写】
text: to-upper-case(aA-aAAA-aaa);
}//SCSS
.test {
text: to-lower-case(AAAAA);
text: to-lower-case(aA-aAAA-aaa);
}
在编译的时候带上参数“ --style expanded”: 换行
在编译的时候带上参数“ --style compact”: 紧凑
在编译的时候带上参数“ --style compressed”: 压缩性
Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“–sourcemap” 参数：sass --watch --scss --sourcemap style.scss:style.css
那么最关键的问题来了，如何在编译sass的时候指定输出风格，接下来我会分享命令行和gulp两种方法：
1.命令行编译：
sass --watch style1.scss:style1.css --style compressed
嘛，其实很简单，就是在原来编译指令的后面加了 --style 输出风格
所以只要依据需求，把compact,compressed这样的参数写在–style后面就行
2.gulp编译：
gulpfile.js代码如下：
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
其实这个大家应该也能看得出来，就是在原本sass()中加了一个参数outputStyle:‘编译风格’。
tips:在不指定风格的情况下，默认为嵌套输出。