demo1.scss
body{ //选择器嵌套
background-color:lightgray;
header{
background-color:lightgreen;
}
footer{
background:{ //属性嵌套，仅仅对中划线样式有效
color:red;
size:100% 50%;
}
}
a {
color:red;
&:hover{ //引用父选择器，& = a
color:blue;
}
& span{
color:green;
}
&.content{
color:green;
}
}
@at-root .container{ //跳出body
width:996px;
}
@media screen and (max-width:600px){
color:red; //屏幕600以下使用这个样式
}
@media screen and (max-width:600px){
@at-root (without:media){
.container{
color:red; //屏幕600以下使用这个样式
}
}
}
@at-root .text-info{
color:red;
@at-root nav &{
color:blue;
}
}
}
.alert{
background-color:#FFEEDD;
}
.s{
font-size:12px;
}
.alert-info{
@extend .alert,.s; //继承
color:red;
}
.one{
border:1px solid red;
}
.two{
@extend .one;
color:red;
}
.three{
@extend .two;//链式继承
boder:1px;
}
//交叉继承,会出现错误
a span{
font-weight:blod;
}
div .content{
@extend span;
}
%abc{ //占位符，没人继承他不会编译到css，有人继承也不会编译他自己，别人继承的会编译
color:blue;
}
.ws{
@extend %abc;
}
/*
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。
虽然能继承的选择器数量很多，但也有很多是不被支持的。如包含选择器（.one .two）或者是相邻兄弟选择器(.one+.two)
如果继承的元素是a，恰巧这个元素a又有hover状态的形式，那么hover状态也会被继承
占位选择器%：优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
*/demo1.css
@charset "UTF-8";
body {
background-color: lightgray;
}
body header {
background-color: lightgreen;
}
body footer {
background-color: red;
background-size: 100% 50%;
}
body a {
color: red;
}
body a:hover {
color: blue;
}
body a span, body a div .content, div body a .content {
color: green;
}
body a.content {
color: green;
}
.container {
width: 996px;
}
@media screen and (max-width: 600px) {
body {
color: red;
}
}
body .container {
color: red;
} .text-info {
color: red;
}
nav .text-info {
color: blue;
} .alert, .alert-info {
background-color: #FFEEDD;
} .s, .alert-info {
font-size: 12px;
} .alert-info {
color: red;
} .one, .two, .three {
border: 1px solid red;
} .two, .three {
color: red;
} .three {
boder: 1px;
} a span, a div .content, div a .content {
font-weight: blod;
} .ws {
color: blue;
}