深夜问题个 css 样式重用问题

Can I use?

Less

Cool Libraries

› Jetstrap

This topic created in 3799 days ago, the information mentioned may be changed or developed.

比如我想定制一个 button 用的时候只是透明度背景不一样怎么写才最好，现在最笨的办法是：
.button-allen {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 0.5;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}
.button-allen:hover {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 1;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}

一个 button 就这么多代码，用多个还不写死， google 了半天语法无奈不知道搜索什么，估计是关键词不对，貌似还有哥 sass 的，求助 😳

5 replies • 2016-01-09 13:16:31 +08:00

wulongqiu

Jan 9, 2016

.button-allen, .button-allen:hover {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 0.5;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}
.button-allen:hover {
opacity: 1;
}
最简单的是这样， CSS 是后边覆盖前边的。
可以搜索： CSS 重用

mogita

Jan 9, 2016

@wulongqiu 是不是第一行的 .button-allen:hover 也可以去掉？

hxsf

Jan 9, 2016

难道不是这么写的咩。。。

```css
.button-allen {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 0.5;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}
.button-allen:hover {
opacity: 1;
}
```

SourceMan

Jan 9, 2016 via iPhone

呵呵

boyhailong

Jan 9, 2016

@wulongqiu 还是没有解决因为用了 pure 很蛋疼的 pureutton 麻烦点修改了下也能看但麻烦
还有一个问题 sidebar 的位置有点偏下不知道怎么调整
如下图
<img>src="

"</img>

看不到的话直接看主页吧 https://allenzhao.herokuapp.com/