sass学习笔记

后缀名为sass与后缀名scss的区别

sass不用区分大括号和分号，scss与css文件格式差不多

例子：

sass语法：

$font-stack: Helvetica, sans-serif  //定义变量 $primary-color: #333 //定义变量  body   font: 100% $font-stack   color: $primary-color

scss语法：

$font-stack: Helvetica, sans-serif; $primary-color: #333; body {   font: 100% $font-stack;   color: $primary-color; }

1、声明变量：

sass引入了变量这个概念，使用$来表示变量，与css属性声明很像

示例：

$highlight-color: #F90;

以空格分割多个属性值

$basic-border: 1px solid black;

除非应用变量，否则变量没有生效。与css不同的是变量可以在css规则块之外存在，如果定义在规则块内，该变量只能在规则块内使用。

示例：

$nav-color: #F90; nav {   $width: 100px;   width: $width;   color: $nav-color; }  //编译后 nav {   width: 100px;   color: #F90; }

//$nav-color可以引用于任何规则块，$width只能引用于nav规则块内

声明变量值可以引用其他变量

示例：

$highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected {   border: $highlight-border; }

变量名中划线和下划线相互兼容，中划线声明的变量可以使用下划线的方式引用，反之亦然。

示例：

$link-color: blue; a {   color: $link_color; }

2、嵌套css规则：

2-1、css有时往往需要重复写选择器

例：

#content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }

sass只需写一遍，并且可读性更，可以像普通css那样包含属性，又可以嵌套其他规则块

例:

#content {   article {     h1 { color: #333 }     p { margin-bottom: 1.4em }   }   aside { background-color: #EEE } }  //编译后 #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }

#content {   background-color: #f5f5f5;   aside { background-color: #eee } }

2-2、父选择器的标识符&

后代选择器：sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）

当为链接元素写:hover这种伪类时，并不希望以后代选择器的方式连接

如:

article a {   color: blue;   :hover { color: red } }

//这种情况sass不能正常运行，将被解析为article  a  :hover，article元素内链接的所有子元素在被hover时都会变成红色。

解决方法使用父选择器父选择器标识符为&

article a {   color: blue;   &:hover { color: red } }   //编译后 article a { color: blue } article a:hover { color: red }

2-3、子组合选择器和同层组合选择器：>、+、~；

子组合选择器>，选择一个元素的直接子元素

例：

article > span { border: 1px solid #ccc } <article> <span>1</span> <p>   <span>1</span> </p> </article>

//样式将之作用于article里的span，而不会作用到p下的span

同层相邻组合选择器+，选择同层的下一个元素

例：

article + p { margin: 5px } <article>   <p>1</p> </article> <p>2</p> <p>3</p>

//样式将只作用于内容为1的p标签

同层全体组合选择器~，选择同层的所有元素

例：

<article>   <p>1</p> </article> <p>2</p> <p>3</p>

//样式将作用于内容为1和2的p标签

2-4、嵌套属性

反复写border-style``border-width``border-color以及border-*等也是非常烦人。sass中，你只需敲写一遍border

例：

nav {   border: {   style: solid;   width: 1px;   color: #ccc;   } }

nav {   border: 1px solid #ccc {   left: 0px;   right: 0px;   } }

3、导入sass文件

sass的@import规则在生成css文件时就把相关文件导入进来，相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，而那些sass文件称为局部文件

@import引入sass文件，可以不写文件后缀名，可以省略局部文件名开头的下划线

3-1、默认变量值

反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。

!default实现定制修改某些值，如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。很像css属性中!important标签的对立面，不同的是!default用于变量。

3-2、嵌套导入

sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。

例：

.blue-theme {@import "blue-theme"} //编译后 .blue-theme {   aside {     background: blue;     color: #fff;   } }

3-3、原生css导入

sass兼容原生的css，所以它也支持原生的CSS@import。

以下三种情况会生成原生的css@import，造成浏览器解析css时的额外下载

导入的文件以.css结尾

       导入的文件名是一个URL地址（如：http://www.sass.hk/css/css.css）

       被导入文件名字是css的url()值

因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

4、静默注释

/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。

例：

body {   color: #333; // 这种注释内容不会出现在生成的css文件中   padding: 0; /* 这种注释内容会出现在生成的css文件中 */ }

/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

例：

body {   color /* 这块注释内容不会出现在生成的css中 */: #333;   padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0; }

5、混合器

实现大段代码的重用，使用@mixin标识符定义，这个标识符给一大段样式赋予一个名字，然后可以轻易引用这个名字重用样式

通过使用@include使用混合器

例：

@mixin rounded-corners {   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   border-radius: 5px; } notice {   background-color: green;   border: 2px solid #00aa00;   @include rounded-corners; } //编译后： .notice {   background-color: green;   border: 2px solid #00aa00;   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   border-radius: 5px; }

5-1、混合器的css规则

.notice是一个有语义的类名。如果一个html元素有一个notice的类名，就表明了这个html元素的用途：向用户展示提醒信息。sass同样允许你把css规则放在混合器中。sass可以使用父选择器标识符&。

例：

@mixin no-bullets {   list-style: none;   li {     list-style-image: none;     list-style-type: none;     margin-left: 0px;   } } ul.plain {   color: #444;   @include no-bullets; }  //编译后 ul.plain {   color: #444;   list-style: none; } ul.plain li {   list-style-image: none;   list-style-type: none;   margin-left: 0px; }

5-3、混合器传参

混合器并不一定总得生成相同的样式。通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。与JavaScript的function很像。

@mixin link-colors($normal, $hover, $visited) {   color: $normal;   &:hover { color: $hover; }   &:visited { color: $visited; } } a {   @include link-colors(blue, red, green); }   //编译后 a { color: blue; } a:hover { color: red; } a:visited { color: green; }

有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了

例：

a {     @include link-colors(       $normal: blue,       $visited: green,       $hover: red   ); }

5-4、默认参数值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式

@mixin link-colors(     $normal,     $hover: $normal,     $visited: $normal   ) {   color: $normal;   &:hover { color: $hover; }   &:visited { color: $visited; } }

6、使用选择器继承来精简css

基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。

例：

//通过选择器继承继承样式 .error {   border: 1px red;   background-color: #fdd; } .seriousError {   @extend .error;   border-width: 3px; }

//.seriousError将会继承样式表中任何位置处为.error定义的所有样式。

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

例：

//.seriousError从.error继承样式 .error a{  //应用到.seriousError a   color: red;   font-weight: 100; } h1.error { //应用到hl.seriousError   font-size: 1.2rem; }

继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。

6-1、继承的高级用法

最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。

例：

.disabled {   color: gray;   @extend a; }

6-3、继承的工作细节

@extend有两个要点你应该知道。

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。

继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

6-4、继承的最佳实践

继承只会在生成css时复制选择器，而不会复制大段的css属性。

不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。