Sass知识整理

Sass知识整理

1.Sass简介

1.1 什么是 CSS 预处理器？

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

1.2何为Sass

官方文档： /
官方的介绍：
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

1.3 Sass 和 Scss 的区别

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass语法：
由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：

 $color: red //定义变量bodycolor: $color

scss语法

$color: red
body {color: $color;
}

编译出来的 CSS

body {color: red;
}

2. 安装和基本使用

2.1.安装ruby

安装： /
因为mac是自带ruby的，且是稳定版本，所以有时会需要ruby的管理器，可以到 / 进行安装

2.2 安装Sass

默认已经安装好ruby

gem install sass

安装好后可以查看版本

  sass -v

2.3 基本编译

将sass文件转为scss文件

sass-convert   A.sass  A.scss

将scss文件转为sass文件

sass-convert   A.scss  A.sass

将scss或者sass文件转为css文件

sass A.scss

将scss或者sass文件转为特定的css文件

sass A.scss  style.css

将scss或者sass文件实时编译为css文件

sass --watch input.scss:output.css

2.4 常见的界面编译器

Koala (/) ——-推荐

Compass.app（/）

Scout（/）

CodeKit（.html）

Prepros（/）

2.5 常见的编译错误

1. 字符编译

   字体默认为utf-8，不支持“GBK”编码

2. 中文字符

   路径应该避免中文字符

2.6 不同样式风格的输出方法

1. 嵌套输出方式 nested
2. 展开输出方式 expanded
3. 紧凑输出方式 compact

4. 压缩输出方式 compressed

   在编译的时候带上参数就可以了，比如“ sass –watch test.scss:test.css –style nested”

2.6.1 具体编译的样式

我们的scss为

nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}

嵌套输出方式 nested

  sass --watch test.scss:test.css --style nested

nav ul {margin: 0;padding: 0;list-style: none; }
nav li {display: inline-block; }
nav a {display: block;padding: 6px 12px;text-decoration: none; }

展开输出方式 expanded

sass --watch test.scss:test.css --style expanded

nav ul {margin: 0;padding: 0;list-style: none;
}
nav li {display: inline-block;
}
nav a {display: block;padding: 6px 12px;text-decoration: none;
}

紧凑输出方式 compact

sass --watch test.scss:test.css --style compact

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

压缩输出方式 compressed

sass --watch test.scss:test.css --style compressed

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

3.基本用法

3.1 变量

Sass 的变量包括三个部分：

1. 声明变量的符号“$”

2. 变量名称

3. 赋予变量的值

全局变量调用：

 $color: red;body {color: $color;}

编译为css

    body {color: red;}

局部变量调用

//定义全局变量$color: red;body {//定义局部变量$color: yellow;a {//调用局部变量color: $color;}}span {//调用全局变量color: $color;}

编译为css

 body a {color: yellow;}span {color: red;}

可以发现sass变量的调用和js很像。

镶嵌在字符串之中

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;.rounded {border-#{$side}-radius: 5px;
}

3.2嵌套

3.2.1选择器嵌套

HTML

    <div class='box'><div class="main"><span class="message"></span></div></div>

css写法

.box {width: 200px;height: 200px;}.box .main {background: red;}.box .main .message {color: yellow;}

sass写法

.box {width: 200px;height: 200px;.main {background: red;.message {color: yellow;}}}

3.2.2 属性嵌套

适用于CSS 有一些属性前缀相同，只是后缀不一样，
css

.box {border-top: 1px solid red;border-bottom: 1px solid green;
}

sass

.box {border: {top: 1px solid red;bottom: 1px solid green;}
}

3.2.3 伪类嵌套

借助&符号代表父元素

例如：
实现：a元素本为黄色，hover后变为红色

css

a {color: yellow;
}
a:hover {color: red;
}

sass

a {color: yellow;&:hover {color: red;}}

3.3计算功能

SASS允许在代码中使用算式：

body {margin: (14px/2);top: 50px + 100px;right: $width * 10%;}**重点内容**

3.4 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

4.代码的复用

4.1 Mixin

使用@mixin命令，定义一个代码块。

@mixin box {wdith: 100px;height: 200px;
}

使用@include命令，调用这个mixin。

.main {@include box;
}

mixin可以传参数。

 @mixin box($width,$height) {wdith: $width;height: $height;
}

任然使用@include调用

.main {@include box(100px,200px);
}

mixin可以给参数默认值

 @mixin box($width: 100px) {wdith: $width;height: 200px;
}

任然使用@include调用，可以传参也可以不传

.main {//@include box(300px);@include box();
}

mixin对于@media这样的自适应

sass

@mixin clo-ms() {@media screen and (min-width: 768px) {width: 50%;float: left;}@media screen and (max-width: 600px){width: 100%;}
}
//调用
.main_box {@include clo-ms()
}

编译后的css（可以看到@media又到了最外面）

@media screen and (min-width: 768px) {/* line 76, ../sass/screen.scss */.main_box {width: 50%;float: left;}
}
@media screen and (max-width: 600px) {/* line 76, ../sass/screen.scss */.main_box {width: 100%;}
}

4.2继承

可以使用@extend实现继承

继承样式

sass

.b {color: yellow;
}
.c {@extend .b;border: 1px solid red;
}

编译后的css

.b {color: yellow;
}
.c {color: yellow;border: 1px solid red;
}

继承样式和层级

sass

.f{.k{color: red;}
}.i {@extend .k;
}

编译后的css

.f .k, .f .i {color: red;
}

4.3 插入文件

@import命令，用来插入外部文件。

　　@import "path/filename.scss", "_mixin";

如果不写路径，只写文件名，会在同级目录下找,且可以不带后缀

与原生css中的@import的不同

这个@import和css原生的是不一样的，
原生的2大弊端：

1. 必须放在css代码的最前面；
2. 加入a引入b，当a下载下来之后读到b才会去下载b，造成了阻塞，影响性能

sass中@import ：

sass重新定义了import指令的功能,我们称之为control directives，sass编译时会将引入的文件合并,并且输出到css文件，import可以放在文件的任意位置，如果引入的文件是变量和mixin，则我们可以随意使用这些变量和mixin

如果你就是想用css原来的import的话,是用一定规则的(符合任意一条即可) ：

1. @import的文件是以css结尾
2. @mporti的是以http:/ /开头的字符串
3. @import的是url()函数的时候
4. @import的都带有meidia queries的时候（例如 tv）*/

5.高级用法

@mixin ber($num) {//if判断@if type-of($num) != number {//报错,  #{}可以取到变量@error "$num必须是number,你输入的是 #{$num}";}//unitless()检查带不带单位，不带单位为false      取反用not@if not unitless($num) {// unit()获取单位@if unit($num) != '%'{@error '$num单位必须是%，你输入的是 #{$num}';}} @else {//警告@warn '#{$num} 应该带单位，你输入的是 #{$num}';//加上%单位$num: (percentage($num)/100);}width: $num;
}