sasscore学习之_mixin.scss
2024-09-21 01:43:08
_mixin scss
包括常用的mixin，%及@function
mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
%，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
@function，返回一个值，用于调用
-----------------------------------------------------
mixin & %
既定义了mixin也定义了%，根据需求使用@include或@extend调用
// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block ($extend:true) {
@if $extend {
@extend %inline-block;
} @else {
display: inline-block;
@if $lte7 {
*display: inline;*zoom:;
}
}
}
%inline-block{
@include inline-block(false);
}
对于这一块的理解：
$lte7:true;
@mixin inline-block ($extend:true) { //提供一个参数。来确定是否使用继承
@if $extend {
@extend %inline-block;
} @else {
display: inline-block;
@if $lte7 { //是否需要针对IE7编写样式。
*display: inline;*zoom:;
}
}
}
%inline-block{
@include inline-block(false);
} .aa{
@include inline-block(true);
}
.bb{
@include inline-block(false);
}
.cc{
@include inline-block(true);
}
.dd{
@extend %inline-block;
}
编译出来之后：
.aa, .cc, .dd {
display: inline-block;
*display: inline;
*zoom:;
}
.bb {
display: inline-block;
*display: inline;
*zoom:;
}
Center-align a block level element（中心对齐一个块级元素）
block得有宽度margin左右为auto才能居中
用法和inline-block一样；
@mixin center-block ($extend:true) {
@if $extend {
@extend %center-block;
} @else {
margin-left: auto;
margin-right: auto;
}
}
%center-block{
@include center-block(false);
}
float left & right
@mixin float($float:left) {
float: $float;
@if $lte7 {
display: inline;
}
}
%float{
@include float;
}
继承没有float:right(使用默认的float:left);
clearfix:
闭合子元素的浮动
@mixin clearfix ($extend:true) {
@if $extend {
@extend %clearfix;
} @else {
@if $lte7 {
*zoom:;
}
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
}
%clearfix{
@include clearfix(false);
}
Hide from both screenreaders and browsers: h5bp.com/u(从浏览器和屏幕阅读器无法隐藏：h5bp.com/u)
既隐藏于视觉也隐藏于屏幕浏览器
@mixin hidden ($extend:true) {
@if $extend {
@extend %hidden;
} @else {
display: none !important;
visibility: hidden;
}
}
%hidden{
@include hidden(false);
}
最新文章
- 响应式web设计总结
- 使用Entity Framework通过code first方式创建数据库和数据表
- HTML5触屏版多线程渲染模板技术分享
- uC/OS-II应用程序exe
- 用inno Setup做应用程序安装包的示例脚本（.iss文件）(
- 进入做Mvc项目的时候 返现某个文件夹下面css js png等静态文件都访问不了
- USB 描述符
- OpenJudge 计算概论-判断闰年
- C# 将DataTable装换位List<T> 泛型
- PHP的语言规范
- keystone之预备知识点
- 在iOS当中发送电子邮件和短信
- Java堆栈（转）
- 扫雷游戏制作过程（C#描述）：第四节、菜单操作
- NOIp2018提高组 双栈排序
- mac 电脑进入root用户
- 046、创建Docker Machine（2019-03-11 周一）
- Java多线程：volatile 关键字
- salesforce lightning零基础学习(十) Aura Js 浅谈三: $A、Action、Util篇
- Django的settings配置