Sass个人学习笔记——快速入门
- 变量$
1.声明
$变量名：属性值
例子:$highlight-color: #F90;
2.引用
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
- 嵌套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 }
1.父选择器标识符&
是什么：&代表父选择器
解决什么：嵌套规则编译后形成的都是后代选择器，例如一些伪类和并级选择其就没法实现，只能通过&来引用父选择器
例子：
article a {
color: blue;
&:hover { color: red }
}
//编译后
article a { color: blue }
article a:hover { color: red }
2.群组选择器嵌套
.container {
h1, h2, h3 {margin-bottom: .8em}
}
//编译后
.container h1, .container h2, .container h3 { margin-bottom: .8em }
3.子组合选择器和同层组合选择器:>、+、~;
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
编译后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
4.嵌套属性
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//编译
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
- 导入SASS文件
语法：@import “colors”；
与[email protected]'不同，sass会生成css文件时就把相关的文件导入进来
注意：被导入文件中的变量和混合器都可在导入文件中使用
1.使用SASS部分文件(_colors.scss)
当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。
此约定即，sass局部文件的文件名以下划线开头。
2.默认变量值：
一般情况：反复声明多个变量，只有最后一个变量有效，会覆盖前面的变量。
例子：
$link-color: blue;
$link-color: red;
a {
color: $link-color; a便签的color为red
}
**
!default可以解决这个问题，如果变量没被声明赋值则使用这个默认变量
$fancybox-width: 400px !default;
3.嵌套导入
当导入的文件在css规则内，则只在这个规则内有效
例子：
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;}}
4.原生css导入
4.1被导入文件的名字以.css结尾；
4.2.被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
4.3被导入文件的名字是CSS的url()值。
- 静默注释
css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。
静默注释不会生成到css文件中
- 使用//注释，不使用/* */
- 混合器
能解决？
实现大段样式的重用,将样式中的通用样式抽离出来，很轻松就肯以重用
定义：@mixin
@mixin name {
-moz-border-radius:5px;
-webkit-border-radius:5px;
Border-radius:5px;
}
使用：@include
@include name;
.demo{
@include name;
}
问题：过度使用会使得样式表过大，加载缓慢，哪什么时候使用呢
1.何时使用混合器
何时：当能找到很好的短命字来描述这些属性修饰的样式
与class名的区别：类名是一类样式的集合具有样式用途的语义化样式，混合器具有展示性的最终视觉样式。混合器和类配合使用写出整洁的html和css，因为使用语义化的类名亦可以帮你避免重复使用混合器。
2.混合器中的css规则
混合器不仅可以包含属性，还可以包含css规则。
例子：
定义：
@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;
}
3.给混合器传参
混合器不一定总得生成相同的样式，可以通过传参来生产不同的样式。
例子：
定义：
@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; }
另一种传参形式：不在乎传参顺利，保证没漏掉参数就行
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
4.默认参数值：
相当于调用方法一样（参数名：默认值），默认值可以是任何有效的css属性值，也可以是其他参数的引用。
例子：
@mixin link-colors($normal,$hover: $normal,$visited: $normal )
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
- 使用选择器继承来精简css
@extend：选择器继承将继承另一个选择器的所有样式（甚至包括选择器有关的组合选择器）
1.何时使用继承
继承是基于类的，类名是用于语义化样式的重用，所以继承应建立在语义化的关系上。
2.继承的高级用法
2.1继承一个html元素的样式
例子：
disabled {
color: gray;
@extend a;
}
2.2假如一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。
例子：
3.继承的工作细节
4.使用继承的最佳实践
如果不小心，可能会让生成的css中包含大量的选择器复制。
避免这种情况出现的最好方法就是不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控：
注意：你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。