Sass 默认初始化样式库

@charset "utf-8";

// 变量存储
// 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8B\4F53
$pcFont: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', arial;
$defaultColor: #333;
$mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-serif, Microsoft JhengHei, Arial;
$browser: null; %display {
display:inline-block;
*display:inline;
*zoom:;
}
%text-indent {
font-size:;
text-indent:-99999em;
overflow:hidden;
}
%box-sizing {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
// 绝对居中
@mixin center($width, $height) {
position: absolute;
left:50%;
top:50%;
width:$width;
height:$height;
margin:(-$height / 2) 0 0 (-$width / 2);
}
// 设置动画名称
@mixin animation($aniName) {
-webkit-animation:$aniName;
-moz-animation:$aniName;
-o-animation:$aniName;
animation:$aniName;
}
// 设置延迟执行时间
@mixin animation-delay($time) {
-webkit-animation-delay:$time;
-moz-animation-delay:$time;
-o-animation-delay:$time;
animation-delay:$time;
}
// 设置阴影
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-o-box-shadow:$shadow;
box-shadow:$shadow;
}
// 圆角
@mixin border-radius($radius) {
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-o-border-radius:$radius;
border-radius:$radius;
}
// 设置过渡
@mixin transition($transition...) {
-webkit-transition:$transition;
-moz-transition:$transition;
-o-transition:$transition;
transition:$transition;
}
// 设置旋转位置
@mixin transform-origin($origin...) {
-webkit-transform-origin:$origin;
-moz-transform-origin:$origin;
-o-transform-origin:$origin;
transform-origin:$origin;
}
@mixin transform($transform...) {
-webkit-transform:$transform;
-moz-transform:$transform;
-o-transform:$transform;
transform:$transform;
} // 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-'; @content;
}
@keyframes #{$name} {
$browser: ''; @content;
}
} /* ********************重置样式 reset******************** */ /* *********PC端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
ul, ol {
list-style:none;
margin:0px;
padding:0px;
}
body {
font:14px/1.5 $pcFont;
width:100%;
color: $defaultColor;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
/* 清除点击出现虚拟框 */
a{
outline:none;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
&:focus{
outline:0;
}
&:link,
&:visited {
color: $defaultColor;
text-decoration:none;
}
}
a img {
border:none;
}
input, textarea, select {
outline:none;
font:12px/1.5 $pcFont;
} /* 清除浮动 */
.clearfix {
*zoom:;
&:after {
display:block;
content:"\200B";
clear:both;
height:;
}
} /* *********移动端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
/* 改变盒子模型 */
section, article, nav, aside, footer, header, div, p, ul, li, input, textarea {
display: block;
@extend %box-sizing;
}
html, body {
-webkit-user-select: none;
/* 禁止选中文本 */
user-select: none;
-webkit-text-size-adjust: 100%;
/* iphone禁用文字大小调整 */
-ms-text-size-adjust: 100%;
}
html {
font-size:625%;
}
body{
font:.16rem/1.6 $mobileFont;
color:#333;
-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
}
/* 清除点击虚拟框 */
a, div, p, span, ul, li, i, img, input {
outline:;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
outline:;
}
a:link,a:visited{
color:$defaultColor;
text-decoration:none;
}
a img{
border:0 none;
}
a, img {
-webkit-touch-callout: none;
/* 禁止长按链接与图片弹出菜单 */
}
input, textarea, select {
outline: none;
color: $defaultColor;
font-family: $mobileFont;
}
input {
/* 清除 iphone 中 input 默认样式 */
-webkit-appearance: none;
}
/* 清除浮动 */
.clearfix {
*zoom:;
&:after {
display:block;
content:"\200B";
clear:both;
height:;
}
}

Sass 默认样式库的更多相关文章

  1. Bootstrap4默认样式不对胃口?教你使用NPM+Webpack+SASS来定制

    Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Boo ...

  2. Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )

    最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...

  3. 使用sass语法生成自己的css的样式库

    前言 先说一下 sass 和 scss的区别 sass 是一种缩进语法(即没有花括号和分号,只使用换行 缩进的方式去区别子元素,PS:这是我个人的理解) scss 是css-like语法  (它的语法 ...

  4. css3修改浏览器scroll默认样式

    最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...

  5. 清除浏览器默认样式——css reset & normalize.css

    css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清 ...

  6. iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式

    目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...

  7. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  8. [Sass]不同样式风格的输出方法

    [Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...

  9. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

随机推荐

  1. POJ1159——Palindrome(最长公共子序列+滚动数组)

    Palindrome DescriptionA palindrome is a symmetrical string, that is, a string read identically from ...

  2. HADOOP基本操作命令

    在这篇文章中,我们默认认为Hadoop环境已经由运维人员配置好直接可以使用. 假设Hadoop的安装目录HADOOP_HOME为/home/admin/hadoop. 启动与关闭 启动HADOOP 进 ...

  3. php中的ceil和floo以及round函数

    ceil是向上进位得到一个值的函数: floor是舍掉小数位得到一个值的函数: round是用来四舍五入的函数. ceil 定义和用法: ceil() 函数向上舍入为最接近的整数. ceil(x); ...

  4. 去除html标签 正则 <.+?> 解释

    http://baike.baidu.com/link?url=2zORJF9GOjU8AkmuHDLz9cyl9yiL68PdW3frayzLwWQhDvDEM51V_CcY_g1mZ7OPdcq8 ...

  5. ibeacons社区

    http://www.idropbeacon.com http://www.chinaibeacons.com http://iwebad.com/tag/ibeacon http://www.cng ...

  6. struts2启动报错com/opensymphony/xwork2/spring/SpringObjectFactory.java:220:-1

    好久没有搞struts2,今天配置strut2.2.1,启动时遇到个小问题.记录下. tomcat启动报错: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...

  7. BZOJ3053: The Closest M Points

    题解: 我们可以事先在堆里放入插入m个inf然后不断的比较当前值与堆首元素的大小,如果小于的话进入. 估计函数也可以随便写写... query的时候貌似不用保留dir... return 0写在 wh ...

  8. 打印web页面指定区域的三种方法

    本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...

  9. Java程序版权保护解决方案

    通常C.C++等编程语言开发的程序都被编译成目标代码,这些目标代码都是本机器的二进制可执行代码.通常所有的源文件被编译.链接成一个可执行文件.在这些可执行文件中,编译器删除了程序中的变量名称.方法名称 ...

  10. extern "C"的用法解析(转)

    原文链接:http://www.cnblogs.com/rollenholt/archive/2012/03/20/2409046.html   1.引言 C++语言的创建初衷是“a better C ...