sass基础学习（一）

移动端布局各种问题
pc端布局各种问题
sass

组件模块化
面向对象编程
ajax

框架学习

webpack 打包

性能优化

gulp是基于Nodejs的自动任务运行器
她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并

、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

Sass 和 CSS 写法有差别：没有括号，依靠严格的缩进方式来控制
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写

规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。
SCSS 和 CSS 写法无差别：
SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有

的“.css”文件直接修改成“.scss”即可使用。

sass使用

1.安装ruby
2.通过命令安装 Sass
打开电脑的命令终端，输入下面的命令：
gem install sass

3，sass -v 查看是否安装成功

4.更新 gem udate sass

5.卸载 gem uninstall sass

6.sass语法格式

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
font: 100% $font-stack
color: $primary-color

注意：
1.冒号后面必须空格，否则会报错

2.“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就

是 SCSS 语法规则（类似 CSS 语法格式）。

3.建议使用scss的新语法规则，跟css类似

7.sass 编译 暂时使用是webstorm的那个方法

8.[Sass]常见的编译错误

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所

以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字

符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错

误信息进行对应的修改。

9，声明变量 $
普通变量：定义之后全局使用
默认变量 定义后加上 ！default

10,变量的调用

11，属性嵌套
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}

12，伪类嵌套 &

13.混合宏 声明 @mixin
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}

14.混合宏调用 @include

15,混合宏的参数
a，可以不带值参数

@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
在调用的时候传参

.box {
@include border-radius(3px);
}

b,传一个带值的参数

@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
有默认值，在调用的时候，可以不用再传值，

.btn {
@include border-radius;
}

也可以传值去覆盖默认值
.box {
@include border-radius(50%);
}

15，传多个参数

@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;

}

调用

.box-center {
@include center(500px,300px);
}

有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代

@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}

调用

.box {
@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

16，扩展和继承 @extend
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}

.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}

.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}

编译后，会将选择器合并在一起

.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}

.btn-primary {
background-color: #f36;
color: #fff;
}

18，占位符 %placeholder

.btn-second {
background-clor: orange;
color: #fff;
}

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。

他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被

@extend 调用的话，不会产生任何代码。来看一个演示：

%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。

只有通过 @extend 调用才会产生代码：

//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}

.btn {
@extend %mt5;
@extend %pt5;
}

.block {
@extend %mt5;

span {
@extend %pt5;
}
}
编译出来的CSS

//CSS
.btn, .block {
margin-top: 5px;
}

.btn, .block span {
padding-top: 5px;
}
从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并

在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

[Sass]混合宏 VS 继承 VS 占位符

1.如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

2.如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继

承

3.那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代

码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码

中。”

20.[Sass]插值#{} 不理解

21.注释 // /**/

22.数据类型
数字: 如，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。

23,字符串