.container {
h1,h2,h3 {margin-bottom:2em;}}a {
color:blue;
&:hover {color:red;}
}// 选择器只会选择article下紧跟着的子元素中命中section选择器的元素;
article > section {border:1px solid #ccc;}
// 选择header元素后紧跟的p元素;
header+p {font-size:1.1em;}
// 选择所有跟在article后的同层article元素;
article ~ article {border:none;}
4. 属性拆分，可以随意的方便调用。
nav {
border: { // 将属性拆开;
style:solid;
width:1px;
color:#ccc;
}，
font:{
size: 12px;
family: 'Micro'
}
}5. @imp
ort 导入 sass内部重写了这个css的方法，但是以下5种情况还是会调用原生的css的这个方法：
1.被导入的文件的名字以.css结尾; 2.被导入的文件的名字是一个URL地址; 3.被导入的文件的名字是CSS的url()值; 4.多个imp
ort使用逗号进行分割 5. media query查询的时候也会 6. 注释： // 编译会被删除 、 /**/不会被删除 注释最前面加上！在压缩的时候就不会删除这些注释
7. 混合器// 混合器使用@mixin标识符定义;
// 这个标识符给一段样式赋予一个名字,这样就可以通过"@include"引用这个名字重用这段样式;
// @include调用会把混合器中的所有样式提取出来放在@include被调用的地方;@mixin rounded {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.notice {
@include rounded;
}使用场景：
（1）判断一组属性是否应该合成一个混合器;一条经验法则就是能否为这个混合器想出一个合理的名字;
混合器和CSS类的区别:
a. 类名在HTML文件中应用;具有语义化; b. 混合器是在样式表中应用的;具有展示性;
案例： 1 调用混合器当一个包含CSS规则的混合器通过 @include 包含在一个父规则中时,在混合器中的规则最终会生成父规则
中的嵌套规则;
Sass:
@mixin no-bullets {
list-style:none;
li {
list-style-type:none;
margin-left:0px;
}
}
ul {
color:#333;
@include no-bullets;
}
CSS:
ul {
color:#333;
list-style:none; // 混合器中的属性;
}
ul li {
list-style-type:none;
margin-left:0px;
}（2）. 混合器传递参数
因为页面解析css的时候是选从内部开始的，嵌套太深会影响。只是为了更好的书写跟更好的维护。@mixin link-colors( $normal:24px, $hover, $visited ){ // 默认参数
color:$normal;
&:hover { color:$hover }
&:visited { color:$visited}
}
a {
@include link-colors(blue,red,green);
}8 @at-root 规范 进行嵌套的时候使用 @at-root 可以提升选择题输出不会嵌套，加快解析渲染，
// sass.foo {
@at-root .bar {
color:gray;
}
}// css.bar {
color: gray;
}9. @extend 继承继承是基于类的(有时是基于其他类型的选择器),所以 继承应该是建立在语义化的关系上;如果一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式;继承不是仅仅用CSS样式替换 @extend 处的代码那么简单;
>1.跟混合器相比,继承生成的CSS代码相对更少; >2.继承遵从CSS层叠的规则; (权重和出现的先后顺序);
继承需要注意：extend 不能继承选择器序列： .a .b{} 选择器序列
% 开头的选择器，只用来继承，不会进行编译输出。
.error {
border:1px solid red;
}%red{ color:red } // 这句话不会被编译
.seriousError {
@extend .error; // 继承选择器中的内容;
border-width:3px;@extend %red;
}
11： @midea@mixin col-sa ($width:50%){
// 使用type-of()方法: 检测$width是否是数值类型;
@if type-of($width) != number {
// #{}:可以引用Sass的变量;--Ruby语法;
// @error:表示错误信息;
@error "$width必须是一个数值类型,你输入的width是:#{$width}.";
}
// 使用unitless()方法:判断当前的数值是否跟有单位;
// 前置not表示否定,双重否定表示肯定;
@if not unitless($width){ // 判断数值有单位;
@if unit($width) != "%" { // 如果单位不是%;
@error "$width必须是一个数值类型,你输入的width是:#{$width}.";
}
} @else { // 判断数值没有单位;
@warn "$width必须是一个数值类型,你输入的width是:#{$width}.";
$width:(percentage($width)/100); // 换算成带%单位的数值;
}
@media (min-width:768px){
width:$width;
float:left;
}
}
// Sass中的@media与Css中的@media区别:
// 1.Sass中的media query可以内嵌在css规则中;
// 2.在生成css的时候,media query才会被提到样式的最高级;
3.好处: 避免了重复书写选择器或者打乱样式表的流程;Sass:
@mixin col-sm ($width:50%){
@media (min-width:768px){
width:$width;
float: left;
}
}
.webdemo-sec {
@include col-sm();
}
Css:
@media (min-width:768px){
.webdemo-sec {
width:50%;
float:left;
}
}
也可以在win+r下打印：
compass interactive
=>browsers()
2898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
