scss/sass 快速入门

1.1.定义变量

$开头就可以定义点亮：比如$sidebar-width、$highlight-color

1.2.变量引用

1.3下划线  '_' 和 中划线 '-'

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线

 

2.1嵌套规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

2.2父选择器的标识符&;

1.普通用法

编译后

2.特殊用法：给当前&添加上层选择器

2.3群组选择器的嵌套

1.群组在外

编译后：

2.群组在内

编译后：

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

' '（空格)：表示子选择器，可以是直接子和间接子

>：表示直接子选择器

+：表示当前元素的后一个兄弟元素

~：表示当前元素的后全部兄弟元素

2-4. 嵌套属性;

目的

写法1：

写法2：

3. 导入SASS文件;

1.css中的@import规则：只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

2.scss中@import规则：所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求

3.可以省略.sass或.scss文件后缀：@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。

3-1. 使用SASS部分文件;

sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。例如：

         文件themes/_night-sky.scss，导入只需要@import"themes/night-sky";

3-2. 默认变量值;

@import 'b.scss'//---其中A可能存在，也可能不存在
A=#000

问题：需要一个变量$A，但是要从外文件b.scss导入获取变量$A，但是变量A可能不存在。

目的：如果@import 'b.scss'中已经存在变量$A，则生效为导入；不存在，则生效当前声明的

现象：后声明一个变量A=#000，只有最后一处声明A=#555有效且A会覆盖前边的值，最后A=#555；

默认值写法：

@import 'b.scss'//------------------>其中$fancybox-width可能存在，也可能不存在
$fancybox-width: 400px !default;//---->不存在时，这里声明$fancybox-width=400px生效
.fancybox {
    width: $fancybox-width;
}

3-3. 嵌套导入;

_blue-theme.scss

导入

3-4. 原生的CSS导入;

@import，sass与原css语法相同。sass导入css，可以直接导入，为了避免不惜要的麻烦，可以将文件名后缀'.css'修改为'.scss'，在导入。

4. 静默注释;

静默注释会出现在打包后的.css文件中。

注意：/* ... */注释的位置不到行尾，scss不知道如何编译，就去除注释

5. 混合器（代码复用）;

@mixin：定义混合器，混合器中是一组样式

@include：引用@mixin定义的混合器

6. 使用选择器继承来精简CSS;

6-1. 何时使用继承;

混合器主要用于展示性样式的重用，混合器的名字注重代码含义，比如：圆角混合器，disable混合器

继承针对的是类，而类的名字注重功能性，比如：header，正文，菜单menu，登录块block

不同：混合器复制代码到样式体内，继承时添加名字到样式体前。

6-2. 继承的高级用法;

1.最常用的一种高级用法是继承一个html元素的样式。

尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承

灰色的<a>链接

2.简单继承复制

.seriousError @extend .important.error

可以继承的范围：范围比继承的.important.error小的都会完成继承操作，即.important.error可以命中的样式。所                          以.seriousError继承了.important.error和h1.important.error。。。，

不可以继承的：范围比.important.error都不继承，例如：‘.important’、‘.error’

3.复制继承简单

（#main .seriousError）@extend（.error）

同上，只有完全匹配#main .seriousError这个选择器的元素才会继承.error的样式

注意：#main .error

4.复制继承复制

 

5.不能被继承

#main .error这种选择器序列是不能被继承的

 

 

 

FAQ

 @at-root跳出嵌套