_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的更多相关文章

  1. 前端学习之路——scss篇

    一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 Sass依赖于ruby环境,所以装sass之前先 ...

  2. SASS学习笔记2 —— 语法

    sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种是scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.在此也建议使用后缀名为scss的文件,以避免sass ...

  3. sass入门学习篇(二)

    从语法开始但是语法也不是一两句的事情,首先看基本的导入,使用 一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,建议scss. 二,导入 使 ...

  4. sass揭秘之@mixin,%,@function

    因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你 ...

  5. sass揭秘之@mixin,%,@function(转载)

    因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你 ...

  6. less,sass,stylus配置和应用教程及三者比较

    less,sass,stylus配置和应用教程及三者比较  Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运 ...

  7. SASS使用总结

    简单用法: 变量 sass中可以定义变量,方便统一修改和维护. //sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; ...

  8. sass+require实现侧边栏

    一.效果图(如下)及使用的技术 实现用sass实现页面中右侧固定侧边栏的样式,用require.js实现返回顶部的功能 二.sass 具体的sass的介绍就不多说了,大家可以参考sass官网介绍,下面 ...

  9. 09-移动端开发教程-Sass入门

    1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量.函数.循环.分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也 ...

随机推荐

  1. jQuery源码分析-02正则表达式-RegExp-常用正则表达式

    2.4 常用正则表达式在网上找到一篇广为流传的文章<常用正则表达式>,逐一分析,不足地方进行补充和纠正. 常用的数字正则(严格匹配) 正则 含义 ^[1-9]\d*$ 匹配正整数 ^-[1 ...

  2. SharePoint 数据迁移解决方案

    前言:说来惭愧,我们的SharePoint内网门户跑了2年,不堪重负,数据量也不是很大,库有60GB左右,数据量几万条,总之由于各种原因吧,网站速度非常慢,具体问题研究了很久,也无从解决,所有考虑用N ...

  3. OC中NSArray

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  4. iOS之 Mac下抓包工具使用wireshark

    主要是mac上面网卡的授权 分三个步骤:    1.wireshark安装        wireshark运行需要mac上安装X11,mac 10.8的系统上默认是没有X11的.先去http://x ...

  5. 《大话移动APP测试:Android与iOS应用测试指南》

    <大话移动app测试:android与ios应用测试指南> 基本信息 作者: 陈晔 出版社:清华大学出版社 ISBN:9787302368793 上架时间:2014-7-7 出版日期:20 ...

  6. JodaTime library not available - @DateTimeFormat not supported

    使用spring的@DateTimeFormat来格式化Date类型时,报错: org.springframework.validation.BindException: org.springfram ...

  7. springMVC 接收数组参数,mybatis 接收数组参数,mybatis批量插入/批量删除案例

    案例是给一个用户赋予多个权限,多个权限用其对应的主键 id 为参数,组成了 一个id数组,传给springMVC,然后springMVC传给mybatis,然后mybatis批量插入.其实类似的场景还 ...

  8. Mongo 的相关增删改查

    1,Mongod 下载安装,请看https://www.mongodb.com/download-center 2,插入语句: MongoDB后台管理 Shell 如果你需要进入MongoDB后台管理 ...

  9. 设计模式C#实现(九)——工厂方法模式和简单工厂

    工厂方法模式:定义一个用于创建对象的接口,让子类决定实例化哪一个类.Factory Method使一个类的实例化延迟到其子类. 构成: 1.Product工厂方法创建的对象的接口 2.Concrete ...

  10. Count and Say

    Count and Say https://leetcode.com/problems/count-and-say/ The count-and-say sequence is the sequenc ...