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

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部