sass学习笔记

作者: wshining | 来源:发表于2017-05-16 22:30 被阅读0次

安装运行

1.下载ruby并安装

2.安装之后打开命令行执行gem命令，检查是否已经安装好

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

3.安装sass，在命令行中执行:gem install sass

gem install sass

按回车，等待一段时间就会提示你sass安装成功，安装成功后可以在命令行中执行sass -v，查看版本

4.创建简单项目，用sass创建项目比较简单，直接新建文件夹，新建.scss文件即可

5.将.scss文件编译成.css文件

在命令行中进入到sass项目中，执行：sass demo.scss demo.css即可,这跟webpack管理项目很相似

6.sass使用基础命令

编译sass ： sass ；

监视sass文件：sass --watch :,执行这个命令后，编辑sass文件后会自动的改变相应的css文件，不需要每次都去重新编译sass文件；

文件夹监听命令，监听文件夹内所有sass文件改动，并编译 : sass --watch scss:css;

编译sass风格：sass --style compressed ;

生成 source map，方便调试 : sass --watch scss:css --sourcemap ; --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。这样就可以像调试CSS一样在浏览器调试scss文件了。

帮助： sass -h;

7.sass四种编译风格

nested：嵌套缩进的css代码，它是默认值；

expanded：没有缩进的、扩展的css代码；

compact：简洁格式的css代码；

compressed：压缩后的css代码；

sass基础语法

注释

Sass有两种注释方式，一种是标准的CSS注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。

这里有一个坑，代码若有中文编译Sass，文件出现Syntax error: Invalid GBK character报错，解决方法如下：在C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.15\lib\sass\engine.rb文件里面加入Encoding.default_external = Encoding.find('utf-8')放在所有的require XXXX 之后即可。最后在scss文件头部启用编码声明：@charset "utf-8"; //必须设置了这个才能编译有中文的注释。

变量

Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

特殊变量

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

List类型：list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可）

嵌套（Nesting）

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套：所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器

属性嵌套：属性拥有同一个开始单词，如border-width，border-color都是以border开头

@at-root

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

@at-root (without: ...)和@at-root (with: ...)默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个 :all（表示所有），rule（表示常规css）,medal（表示media）,support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认@at-root其实就是@at-root(without:rule)

混合（mixin）

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明@mixin通过@include来调用。

无参数mixin

有参数mixin

多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

@content

在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

PS:@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。