scss入门学习(一)

sass的文件后缀名

sass是目前流行的css预处理语言。sass有两种后缀文件，一种是.sass,不允许使用大括号和分号；另一种是.SCSS，允许使用大括号和分号,类似于我们平时写css的语法习惯。其实sass最早出现在2007年，但却没有后来的LESS流行和易于接受，最主要的原因是sass严格的语法要求不太符合csser编写，sass为了改变这种现状，迎合大众，推出了更为宽松的SCSS这种类css写法。

sass文件的编译

sass扩展了css的写法，为css提供了变量，继承，宏等能够提高效率和增强维护性的新概念。是不是说我们直接就可以在html文件中引用.sass文件了么?答案是否定的，浏览器并不会认识sass语法形式，而只会解析.css文件资源，所以我们需要将sass编译成css。

主要有以下几种编译方式：

命令编译

单文件编译：

1	sass <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

多文件编译：

1	sass sass/:css/

实时监听文件更改

1	sass --watch <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

GUI界面工具编译

Koalo
CodeKit

自动化编译

自动化编译因你使用的工具的不同而不同。当前流行的有gulp，grunt，webpack等。

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

嵌套输出方式(nested)

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

展开输出方式(expanded)

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

紧凑输出方式(compact)

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

压缩输出方式(compressed)

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

变量

声明变量

— 1.变量声明符号($)
— 2.变量名称
— 3.赋予变量的值

1	$width: 100px;

普通变量和默认变量

在普通变量后加上关键字!default即可声明默认变量.默认变量的价值再进行组件化开发的时候非常有用。

1	$width: 100px !default;

局部变量和全局变量

在选择器，函数，混合宏…外面声明的变量为全局变量。相应的在块内部声明的变量为局部变量。局部变量在块内会覆盖全局变量。

1 2 3 4 5 6 7 8

$color: orange !default; //全局变量 .a{ $color: red; // 全局变量 color: $color; // color: red< 大专栏  scss入门学习(一)br/>} .b{ color: $color; // color: orange }

变量的调用

1 2 3 4

$width: 100px !default; .container{ $width; }

混合宏(mixin)

当你的网站中有几处样式类似，比如颜色，字体时用变量就可以统一处理了；但是当你有大段的样式需要复用时，变量就无法达到目的了。而混合宏就变得很有意义了。

声明混合宏

— 混合宏声明符号(@mixin)
— 混合宏名称
— (可重用的)代码片段

1. 不带参数的混合宏

   1 2 3 4

   @mixin border-radius { -webkit-border-radius: 5px; border-radius: 5px; }

2. 带参数的混合宏

   1 2 3 4

   @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; }

3. 复杂的混合宏

   1 2 3 4 5 6 7 8

   @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) }

调用混合宏

— 混合宏调用的关键字@include
— 混合宏的名称

继承／扩展

当两个样式有高度可重用代码时，我们可以定义一个基类，将相似度高的代码提取出来，然后子类继承(extend)父类。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!-- 定义一个基类 --> .btn{ border: 1px solid padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; // 继承 } .btn-second { background-color: orange; color: #fff; @extend .btn; // 继承 }

占位符%placeholder

当定义一个基类的时候，如果没有子类继承他(extend)，就会造成代码冗余。我们使用占位符声明的代码，如果不被@extend调用的话，将不会产生任何代码。

1 2 3

%mt5{ margin-top: 5px; //如果没有子类继承，代码中不会显示 }

优先使用占位符；如果需要传参数，使用宏；没有参数，使用继承。