常用SASS封装
结合Compass库和工作总结,列出了项目中最为常用的SASS片段。内容收集于网络,我进行了简单整理并测试正常,可以根据实际项目情况进行取舍,值得学习或直接应用,感谢!
//重置浏览器默认样式
@import "compass/reset";
//使用粘滞页脚
@import "compass/layout/sticky-footer";
<div id="main">
<div id="main-footer"></div>
</div>
<div id="footer">
Footer content goes here.
</div>
@include sticky-footer(54px, "#main", "#main-footer", "#footer");
// Github: https://github.com/zenozeng/fonts.css @extend %font-hei; 通用字体的处理方法
%font-hei {
font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB", "Source Han Sans CN Normal", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
%font-kai {
font-family: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW\-Kai", serif;
}
%font-song {
font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", serif;
}
%font-fang-song {
font-family: Baskerville, "Times New Roman", "Liberation Serif", STFangsong, FangSong, FangSong_GB2312, "CWTEX\-F", serif;
}
%font-ming {
font-family: Georgia, "Nimbus Roman No9 L", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
}
// Compass最常用的一些模块
@import "compass/css3/background-size"; //@include background-size; default > background-size:100% auto;
@import "compass/css3/border-radius"; //@include border-radius; default > border-radius:5px;
@import "compass/css3/box-shadow"; //@include box-shadow; default > box-shadow:0px 0px 5px #333333;
@import "compass/css3/box-sizing"; //@include box-sizing(border-box);
@import "compass/css3/inline-block"; //@include inline-block;
@import "compass/css3/opacity"; //@include opacity(.4);
// 设置宽高
@mixin size($width, $height:$width){
width: $width;
height: $height;
}
// rgba的兼容处理方案
@mixin backgroundTransparent($bgcolor,$opacity,$support-for-ie:true){
background-color:rgba($bgcolor,$opacity);
@if $support-for-ie{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str(rgba($bgcolor,$opacity))},endColorstr=#{ie-hex-str(rgba($bgcolor,$opacity))});
:root & {
filter:none;
}
}
}
// @include boxCenter(center,false);使用css3 box-align/box-pack水平垂直居中
@mixin boxCenter($pack:center, $align: center) {
@if($align !=false) {
-webkit-box-align: $align;
box-align: $align;
}
@if($pack !=false) {
-webkit-box-pack: $pack;
box-pack: $pack;
}
display:-webkit-box;
display:box;
}
//@include boxClamp(3); >> suitable Mobile and no height 多行超出设置点点点,适用于webkit内核的浏览器
@mixin boxClamp($v:1){
overflow:hidden;
-webkit-line-clamp: $v;
line-clamp: $v;
-webkit-box-orient: vertical;
box-orient: vertical;
display:-webkit-box;
display:box;
}
//Button Sizes 按钮,具体使用时具体修改
@mixin button-size($padding,$line-height,$border-radius){
padding: $padding;
line-height: $line-height;
border-radius: $border-radius;
}
//Thanks http://codepen.io/zhouwenbin/pen/xbVjPb 面包屑(两头)
//<span class="breadcrumb-right">breadcrumb</span> @include breadcrumb(#425164,#fff,16px,left);
//http://lugolabs.com/caret 各种三角,这个网址可以手动调整并在线实时预览
//@include caret(absolute,9px,3px,right,red,#fff);
//@include center-translate($direction: both); 利用translate可以实现未知宽高的东东水平/垂直居中
@mixin center-translate($direction: both) {
position: absolute;
@if $direction == both {
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
@else if $direction == horizontal {
left: 50%;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
@else if $direction == vertical {
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
}
//@include ellipsis-overflow; 文字溢出点点点
@mixin ellipsis-overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
//@include float; 浮动
@mixin float($direction: left,$support-for-ie:false){
float: $direction;
@if $support-for-ie{
_display: inline;
}
}
//@include inline-block; 行内元素display:inline-block;的兼容方案
@mixin inline-block($alignment: middle,$support-for-ie:true) {
display: inline-block;
@if $alignment and $alignment != none {
vertical-align: $alignment;
}
@if $support-for-ie {
*vertical-align: auto;
zoom: 1;
*display: inline;
}
}
//@include opacity; opacity的兼容方案
@mixin opacity($opacity:.65,$support-for-ie:true) {
opacity: $opacity;
@if $support-for-ie{
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
}
//@include position(absolute,top 10px right 20px bottom 20px left 20px); suitable no width/no height
@mixin position($position,$args){
@each $o in top right bottom left {
$i: index($args, $o);
@if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
#{$o}: nth($args, $i + 1);
}
}
position: $position;
}
//Thanks: https://github.com/bitmanic/rem/blob/master/stylesheets/_rem.scss by @benfrain (https://github.com/benfrain)
//Thanks http://codepen.io/zhouwenbin/pen/bNpMov single arrow
常用SASS封装的更多相关文章
- AppDelegate减负之常用三方封装 - 友盟分享 / 三方登录篇
之前完成了 AppDelegate减负之常用三方封装 - 友盟推送篇: http://www.cnblogs.com/zhouxihi/p/7113511.html 今天接着来完成 - 友盟分享和三方 ...
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- js实现第一次打开网页弹出指定窗口(常用功能封装很好用)
js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...
- subprocess以及常用的封装函数
从Python 2.4开始,Python引入subprocess模块来管理子进程,以取代一些旧模块的方法:如 os.system.os.spawn.os.popen.popen2..commands. ...
- php文件操作(最后进行文件常用函数封装)
文件信息相关API $filename="./1-file.php"; //filetype($filename):获取文件的类型,返回的是文件的类型 echo '文件类型为:', ...
- android常用对话框封装
在android开发中,经常会用到对话框跟用户进行交互,方便用户可操作性:接下来就对常用对话框进行简单封装,避免在项目中出现冗余代码,加重后期项目的维护量:代码如有问题欢迎大家拍砖指正一起进步. 先贴 ...
- 常用IC封装技术介绍
1.BGA(ball grid array)球形触点陈列,表面贴装型封装之一.在印刷基板的背面按陈列方式制作出球形凸点用 以 代替引脚,在印刷基板的正面装配LSI 芯片,然后用模压树脂或灌封方法进行密 ...
- iOS常用的封装方法
做开发也有一段时间了,看了好多大神的代码,总体感觉他们写的代码简洁,好看,然而在对比下我写的代码,混乱,无序,简直不堪入目啊! 总体来说大神们的代码封装的都比较好,对一个项目要重复用到的代码他们都会封 ...
- .Net Excel操作之NPOI(二)常用操作封装
一.Excel数据导出常用操作 1.指定表头和描述 2.指定数据库中读出的数据集合 二.ExcelExport封装 /// <summary> /// Excel常用的表格导出逻辑封装 / ...
随机推荐
- winform 下载文件显示进度和百分比
/// <summary> /// 下载完成 /// </summary> private void DownloadFileCompleted() { IsComlate = ...
- MySql(六):影响 MySQL Server 性能的相关因素
MySQL 最多的使用场景是WEB 应用,那么我们就以一个WEB 应用系统为例,逐个分析其系统构成,进行经验总结,分析出数据库应用系统中各个环境对性能的影响. 一.商业需求对性能的影响 这里我们就拿一 ...
- 一起学android之怎样设置TextView中不同字段的字体颜色(22)
在这里先看看效果图: OK,有时候,在我们的项目中会要求TextView中文本有一部分的字体颜色不一样.这时我们应该使用 SpannableStringBuilder这个工具类,当然这个类的功能非常强 ...
- Codeforces Round #263 (Div. 2) proB
题目: B. Appleman and Card Game time limit per test 1 second memory limit per test 256 megabytes input ...
- StringBuilder的append、StringBuffer的append和String str = "a"+"b"的区别?
大家都知道String+String会开销额外的系统资源,粗略的原因是String是不可变类,每一步操作都会返回新的String变量,占用空间及时间. 其实我的理解不是这样的,我们来看看String+ ...
- MySQL中使用INNER JOIN来实现Intersect并集操作
MySQL中使用INNER JOIN来实现Intersect并集操作 一.业务背景 我们有张表设计例如以下: CREATE TABLE `user_defined_value` ( `RESOURCE ...
- Java知识点梳理——读写分离
1.读写分离:可以通过Spring提供的AbstractRoutingDataSource类,重写determineCurrentLookupKey方法,实现动态切换数据源的功能:读写分离可以有效减轻 ...
- 【BZOJ1835】[ZJOI2010]base 基站选址 线段树+DP
[BZOJ1835][ZJOI2010]base 基站选址 Description 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯 ...
- 我们计划为EasyDSS定制开发一款超低延时的EasyPlayer Flash播放器
现象 最近团队在做EasyDSS RTMP流媒体服务器开发的过程中,遇到了一个关于延时累积的问题,先大概描述一下过程: 在EasyRTMP Android进行长时间的RTMP推流压力测试,在EasyD ...
- apache功能优化
隐藏Apache版本等敏感信息 $ grep Server /usr/local/httpd/conf/extra/httpd-default.conf|grep -v "#" 修 ...