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; }
时间: 2024-10-11 03:36:33