sass常用语法
sass常用语法
sass是css的预处理器,提供了很多方便的语法,如嵌套、可复用代码块等,但是我们在做一般程序的时候用不上这么多功能,这里总结了sass里我用的最多的几种常用语法:
定义变量
$ff: Arial;
$font-color: # ccc;
$background-grey: # f5f5f5;
元素(包含伪类)的嵌套
a {
color: $font-color;
cursor: pointer;
&:hover {
text-decoration: none;
}
}
这里的&指的是前面的选择器。
属性的嵌套
font: {
family: $ff;
size: 26px;
weight: 900;
}
类的继承及不表现样式
%error {
color: # f00;
}
%error.instrusion {
background-image: url(../images/rabbit-big.png);
}
.serious-error {
@extend %error;
border: # ff0000 1px solid;
}
这里的%error是不表现样式,只能用来继承。
可复用代码块@mixin
@mixin col-sm ($width:50%){
@media (min-width: 768px) {
width: $width;
float: left;
}
}
这里定义了一个名为col-sm的代码块通过后面的括号传参,名为$width的参数默认值为50%,里面的@media是媒体查询,也可以不传变量,去掉后面的括号就行。
关键字:css, sass, 嵌套, width
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!