sasscore学习之_mixin.scss
_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);
}
sasscore学习之_mixin.scss的更多相关文章
- 前端学习之路——scss篇
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 Sass依赖于ruby环境,所以装sass之前先 ...
- SASS学习笔记2 —— 语法
sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种是scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.在此也建议使用后缀名为scss的文件,以避免sass ...
- sass入门学习篇(二)
从语法开始但是语法也不是一两句的事情,首先看基本的导入,使用 一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,建议scss. 二,导入 使 ...
- sass揭秘之@mixin,%,@function
因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你 ...
- sass揭秘之@mixin,%,@function(转载)
因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你 ...
- less,sass,stylus配置和应用教程及三者比较
less,sass,stylus配置和应用教程及三者比较 Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运 ...
- SASS使用总结
简单用法: 变量 sass中可以定义变量,方便统一修改和维护. //sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; ...
- sass+require实现侧边栏
一.效果图(如下)及使用的技术 实现用sass实现页面中右侧固定侧边栏的样式,用require.js实现返回顶部的功能 二.sass 具体的sass的介绍就不多说了,大家可以参考sass官网介绍,下面 ...
- 09-移动端开发教程-Sass入门
1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量.函数.循环.分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也 ...
随机推荐
- 实现跨域的N种方法
从域说起 域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即 ...
- String.format() 格式化字符串
1.几种常见的转换符 转换符 说明 实例 %d 整数类型(十进制) 99 %f 浮点类型 99.99 %s 字符串类型 "mingrisoft" %c 字符类型 'm' %b 布尔 ...
- Android-Selector用法
在项目开发的时候,由于系统给出的控件不够美观,因此开发时领导常常要我更改下界面,用美工给的图片取代系统图片.开始时,我只是给按钮等设置一下背景图片,这样做虽然美观了,但界面看起来却比较死板,比如用户点 ...
- 设计模式:模版模式(Template Pattern)-转
模版模式 又叫模板方法模式,在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情冴下,重新定义算法中的某些步骤. 我们使用冲泡咖啡和冲泡茶的例子 加工流程 ...
- Undefined symbols for architecture i386:和"_OBJC_CLASS_$_xx", referenced from:问题解决方法
多个人共同操作同一个项目或拷贝项目时,经常会出现类似这样的问题: Undefined symbols for architecture i386: "_OBJC_CLASS_$_xx文件名& ...
- Resharper注册机实现以及源代码
一直用Resharper,每次找注册机也麻烦,就想怎么才能自己能做个注册机,把它原理给搞懂了,不就不用找了.今天早上起来研究了下Resharper注册机,网上找到一位大神之前做Resharper注册机 ...
- swipe js dynamic content
swipe js dynamic content swipe 动态改变内容时,需要用 update 一下. swiper.update(true); 实例: HTML Code 页面用的FreeMa ...
- 解决Spring4 MVC请求json数据报406错误
解决方法一: 1.导入jackson-core-2.5.1.jar和jackson-databind-2.5.1.jar 2.Spring配置文件添加: <!-- 避免IE执行AJAX时,返回J ...
- TCP 连接的 TIME_WAIT 过多 导致 Tomcat 假死
最近系统二次开发之后,发现使用的 Tomcat 7 会经常假死.前端点击页面无任何反应,打开firebug,很多链接一直在等待服务器的反应.查看服务器的状态,CPU占用很少,最多不超过10%,一般只有 ...
- 关于Redis中交互的过程
一.Redis启动 加载配置(命令行或者配置文件) 启动TCP监听,客户端的列表保存在redisserver的clients中 启动AE Event Loop事件,异步处理客户请求 事件处理器的主循环 ...