时间:2021-07-01 10:21:17 帮助过:29人阅读
编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划
线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。
然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文
如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被件名前面的下划线。
例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你还可以这样做:
@import "colors";//不用加下划线
来引入 _colors.scss 文件。
注意,在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如, _colors.scss 不能与 colors.scss 并存。
嵌套 @import
虽然大部分时间只需要在顶层文件使用 @import 就行了,但是,你还可以把他们包含在css 规则和@media 规则中。
然后这样引用:
#main {
@import "example";
}
编译出来的 CSS:
#main .example {
color: red;
}
@media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另
外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一
个简单示例:
.siderbar{
width:300px;
@media screen and (orientation: landscape){
width:500px;
}
}
编译出来;
.sidebar{
width:300px;
}
@media screen and ( orientation : landscape){
.sidebar{
width:500px;
}
}
@media 也可以嵌套@media:
@media screen{
.sidebar{
@media (orientation: landscape){
width:500px;
}
}
}
在使用@media 时还可以使用#{}:
$media :screen;
$feature:-webkit-min-device-pixel-ratio;
$value:1.5;
@media #{$media} and ($featrue:$value){
.sidebar{
width:500px;
}
}
编译出来的css:
@media screen and (-webkit-min-device-pixel-ratio;1.5){
.sidebar{
width:500px;
}
}
@extend
Sass 中的@extend 是用来扩展选择器或者占位符,比如
.error{
border:1px #f00;
background-color:#fdd;
}
.error.intrusion{
background-image:url("/image/hacked.png");
}
.seriousError{
@extend .error;
border-width:3px;
}
被编译为:
.error, .seriousError{
border:1px #f00;
background-color:#fdd;
}
.error .intrusion, .seriousError .intrusion{
background-image: url("/image/hacked.png");
}
.seriousError{
border-width:3px;
}
扩展选择器:
@extend 不止扩展类选择器,还可以扩展任何选择器,比如 .special.cool, a:hover, 或 a.user[href^="http://"] 例如
.hoverlink{
@extend a:hover;
}
a:hover{
text-decoration:underline;
}
编译出来:
a:hover, .hoverlink{
text-decoration:underline;
}
.hoverlink{
@extend a:hover;
}
.comment a.user:hover{
font-weight:bold;
}
编译出来的CSS
.comment a.user:hover, .comment
.user .hoverlink{
font-weight:bold;
}
多个扩展
所设某个样式要继承多个地方的样式,那么可以使用@extend 来继承的多个选择器或者占位符的样式,如:
.error{
border:1px #f00;
background-color:#fdd;
}
.attention{
font-size:3em;
background-color:#ff0;
}
.seriousError{
@extend .error;
@extend .attention;
border-width:3px;
}
编译出来的css
.error, seriousError{
border-width:3px;
}
扩展单一选择器
前面我们知道 %placeholder 不使用@extend显示调用是不会生成
任何样式代码。那么在选择器中使用占位符一样。比如下面的代码
#context a%extreme{
color:blue;
font-weight:bold;
font-size:2em;
}
这段代码在不调用之前不产生任何代码,只有能过@extend调用之后才生成代码:
.notice{
@extend %extreme;
}
编译出来的CSS
#context a.nontice{
color:blue;
font-weight:bold;
font-size:2em;
}
@at-root
@at-root 从字面上解释就是跳出跟元素。当你选择器嵌套多层之
后,想让某个选择器跳出,此时就可以使用 @at-root。来看一个
简单的示例:
.a{
color:red;
.b{
color:orange;
.c{
color:yellow;
@at-root .d{
color:green;
}
}
}
}
编译出来的css
.a{
color:red;
}
.a .b{
color:orange;
}
.a .b .c{
color:yellow;
}
.d{
color;green;
}
@debug
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了
@debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:
@debug 10em +12em;
会输出:
Line 1 EEBUG: 22em
@warn
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。如:
@mixin adjust-location($x,$y){
@if unitless($x){
@warn "Assuming #{$x} to be in pixels";
$x: 1px *$x;
}
@if unitless($y){
@warn "Assuming #{$y} to be in pixels"
$y: 1px *$y:
}
position:relative; left:$x; top:$y;
}
@error
@error 和@warn,@debug 功能是如出一辙。
@mixin error($x){
@if $x < 10{
width:$x * 10px;
}@else if $x == 10{
width:$x;
}@else{
@error "你需要将#{$x}值设置在10以内的数";
}
}
.texst{
@include error(15);
}
编译的时候:
你需要将15 值设置在10 以内的数 on line 7 at column5