Sass学习（二）--混合器与继承

@mixin test($normal,$hover:red){color:$normal;background-color:$hover
}
#top{@include test(skyblue,orange);
}
//编译后
#top {color: skyblue;background-color: orange;}//不指定color
@mixin test($normal,$hover:red){color:$normal;background-color:$hover
}
#top{@include test(skyblue);
}
//编译后#top {color: skyblue;background-color: red; }

Sass继承

Sass中也可实现继承类似面向对象思想子类继承父类，sass可以继承多个父类这个”父类“可以是类，id 标签状态等。
继承语法 @extend name
如

.error{color:red;font-size:15px;
}
.danger-error{@extend .error;font-size:20px;
}
//编译后
.error, .danger-error {color: red;font-size: 15px;
}.danger-error {font-size: 20px;
}

当然父类也可包含css规则

.error{color:red;font-size:15px;>.te{padding:10px}
}
.danger-error{@extend .error;font-size:20px;
}
//编译后
.error, .danger-error {color: red;font-size: 15px;
}
.error > .te, .danger-error > .te {padding: 10px;}.danger-error {font-size: 20px; }

组合继承

.error a{color:red;font-size:10px;
}
.danger{@extend .error;color:orange;
}
//编译后
.error a, .danger a {color: red;font-size: 10px;
}.danger {color: orange;
}

继承多个

.one{color:red;
}
.two{border:1px solid red;
}
.three{@extend .one;@extend .two;//或者这样写@extend .one,.two//background:blue;
}
//编译后
.one, .three {color: red;
}
.two, .three {border: 1px solid red;
}
.three {background: blue;
}

继承局限性
继承不支持组合
很多选择器不支持继承如包选择器 .one tow
相邻选择器 .one+.two

%继承
有些时候我们希望被用来继承的代码不要渲染到页面上只作为继承使用。
定义方法父类名前+%

%test{border:1px solid red;
}
#main{@extend %test;
}
//编译后
#main {border: 1px solid red;
}#meng a%long{color:blue;border:1px solid red;
}.notice{@extend %long;
}
//编译后
#meng a.notice {color: blue;border: 1px solid red;
}

继承在指令的作用域如（@media）
在指令内部无法继承到指令外部的类，指令外部继承指令内部的类无法达到预期效果

.one{height:400px;
}@media print{.two{@extend .one}width:300px;
}

编译时报错

继承注意事项

不能过量使用继承，因为所有类继承了父类，父类改变就会影响子类
继承只会在生成css时复制选择器，而不会复制大段的css属性
如果不小心会让生成css中包含大量的选择器复制
避免这种情况的最好办法：
不要在继承css规则中使用后代选择器如

 .dsf{}.foo .bar {@extend dsf //不推荐}

Sass学习（二）--混合器与继承相关推荐

菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
python编程语言继承_python应用：学习笔记（Python继承）
学习笔记(Python继承)Python是一种解释型脚本语言,可以应用于以下领域: web 和 Internet开发科学计算和统计人工智能教育桌面界面开发后端开发网络爬虫有几种叫法(父类 ...
spring security 学习二
spring security 学习二 doc:https://docs.spring.io/spring-security/site/docs/ 基于表单的认证(个性化认证流程): 一.自定义登录页 ...
深度学习二(Pytorch物体检测实战)
深度学习二(Pytorch物体检测实战) 文章目录深度学习二(Pytorch物体检测实战) 1.PyTorch基础 1.1.基本数据结构:Tensor 1.1.1.Tensor数据类型 1.1.2. ...
Struts2框架学习(二) Action
Struts2框架学习(二) Action Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程拦截器 ...
JS高级的学习(二)
JS高级的学习(二) set对象 Set 是一个对象存放数据数据永远不会重复 Set 当成是一个数组遍历使用数组方法 find findIndex Map 数组转成 Set对象 const ...
C#多线程学习(二) 如何操纵一个线程
C#多线程学习(二) 如何操纵一个线程原文链接:http://kb.cnblogs.com/page/42529/ [1] C#多线程学习(二) 如何操纵一个线程 [2] C#多线程学习(二) 如何 ...
C++学习笔记：(五)继承多态
目录 7.组合.继承与多态性 7.1 组合 7.2 继承 7.3继承和组合 7.4构造与析构顺序 7.5派生类重载基类函数的访问 7.6多态性&虚函数 7.7纯虚函数和抽象基类 7.8 多重继 ...
STL源码剖析学习二：空间配置器（allocator）
STL源码剖析学习二:空间配置器(allocator) 标准接口: vlaue_type pointer const_pointer reference const_reference size_ty ...
mysql用创建的用户登陆并修改表格_MySQL 基础学习二：创建一个用户表，并增删改查...
MySQL 基础学习二:创建一个用户表,并增删改查提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...

Sass学习（二）--混合器与继承

目录

混合器

Sass继承

Sass学习（二）--混合器与继承相关推荐

最新文章

热门文章