Sass 基础(三)_html/css_WEB-ITnose
继承对于了解css 的同学来说一点都不陌生,先来看一张图
在Sass 中也具有继承一说,也就是继承类中的样式代码块,在Sass中时通过关键词“@extend”来
继承已经存在的类样式块,从而实现代码的继承。
//SCSS
.btn{
border:1px solid #ccc;
padding:6px 10px;
font-size:14px;
}
.btn-primarg{
background-color:#f36;
color:#fff;
@extend .btn;
}
.btn-second{
background-color:organge;
color:#fff;
@extend .btn;
}
编译出来之后:
//css
.btn, .btn-primary, .btn-second {
border:1px solid #ccc;
padding:6px 10px;
font-size:14px;
}
.btn-primary{
background-color:#f36;
color:#fff;
}
.btn-second{
background-color:orange;
color:#fff;
}
在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器:
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
占位符%placeholder
Sass中的占位符%placeholder 功能是一个很强大,很实用的一个功能,可以取代以前的css中的基类造成的
代码冗余的情形,因为%placeholder 声明的代码,如果不被@extend 调用的话,不会产生任何代码。
%mt5{
margin-top:5px;
}
%pt5{
padding-top:5px;
}
.btn{
@extend %mt5;
@extend %pt5;
}
.block{
@extend %mt5;
span{
@extend %pt5;
}
}
编译出来的css
//css
.btn, .block{
margin-top:5px;
}
.btn, .block span{
padding-top:5px;
}
通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。
混合
混合宏vs继承vs占位符
a Sass中的混合宏使用
//SCSS中混合宏使用
@mixin mt($var){
margin-top:$var;
}
.block{
@include mt(5px);
span{
display:block;
@include mt(5px);
}
}
.header{
color:orange;
@include mt(5px);
span{
dispay:block;
@include mt(5px);
}
}
编译结果:
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
.block, .block span, .header, .header span {
margin-top: 5px;
}
建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
b)Sass中继承
同样的,将上面代码中的混合宏,使用类名来表示,然后通过继承来调用。
.mt{
margin-top:5px;
}
.block {
@extend .mt;
span{
display:block;
@extend .mt;
}
}
.header{
color:orange;
@extend .mt;
}
编译结果:
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
.block, .block span, .header, .header span {
margin-top: 5px;
}
建议:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用Sass的继承。
c)占位符
最后来看占位符,将上面的代码中的基类.mt 换成Sass的占位符格式
//SCSS中占位符的使用
%mt{
margin-top:5px;
}
.block{
@extend %mt;
span{
display:block;
@extend %mt;
}
}
.header{
color:orange;
@extend %mt;
span{
display:block;
@extend %mt;
}
}
编译结果:
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,
不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”
差值#{}
使用css 预处理器语言的一个主要原因是想使用Sass 获得一个更好的结构体系,比如说你想写更干净的,搞笑的和面向对象的
css. Sass 中的差值(Interpolation)就是重要的一部分,让我们看一下下面的例子。
$properties:(margin ,padding);
@mixin set-value($side,$value){
@each $prop in $properties{
#{$prop}-#{$side}:$value;
}
}
.login-box{
@include set-value(top,14px);
}
代码编译成css
.login-box{
margin-top:14px;
padding-top:14px;
}
当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器。
@mixin generate-sizes($class,$small,$medium,$big)
上一篇: 前端必看H5 meta小结
下一篇: 如何升级PHP?各种纠结
推荐阅读
-
三角形里面添加文字_html/css_WEB-ITnose
-
前端基础(二)快速布局神器Flexbox布局_html/css_WEB-ITnose
-
Codeforces Round #259 (Div. 2) A B C 三连发_html/css_WEB-ITnose
-
牛腩发布系统CSS盒子模型基础_html/css_WEB-ITnose
-
CSS 2.1 中三种定位方案的分析_html/css_WEB-ITnose
-
前端css框架SASS使用教程_html/css_WEB-ITnose
-
实现一个三列布局(左右侧固定,中间自适应宽度)_html/css_WEB-ITnose
-
sass的学习_html/css_WEB-ITnose
-
前端基础之初识 HTML_html/css_WEB-ITnose
-
纯css玩转三角形_html/css_WEB-ITnose